投稿先: https://noratetsu.blogspot.com/2023/02/NTA-DIY-1-5.html
NTA-DIY:1ヶ月目⑤~小さいチャレンジ集~
JavaScriptの勉強のごく初期は、単元ごとにその時点で知っていることを使って何かしらの極小プログラムを色々作りました。
今となってはなぜわからなかったのかわからないところであちこち悪戦苦闘していたわけですが、どうにかもがいてひねり出してを繰り返して前に進んだのだなと思い出されます。
当時書いたコード(をちょっと直したもの)なので誰かの役に立つとは思えませんが、思い出として記録しておきたいと思います。
四則計算する関数
function operation(x, y) {
return {
和: x + y,
差: x - y,
積: x * y,
商: Math.floor(x / y),
余: x % y,
};
};
console.log(operation(2, 3));
関数とオブジェクト(連想配列)の理解のために作ったものだったと思います。
最初はオブジェクトもなんとなく掴めなかった、というか、「連想配列」という語でちょっと混乱したのですが、何がどう曖昧だったのかはもはやわかりません。
四桁の乱数生成
// 最小値x、最大値yの乱数を作る
function random(x, y) {
return Math.floor(Math.random() * (y - x + 1)) + x;
}
// 四桁の乱数を表示する
const n = random(0, 9999); // 乱数を用意する
if (n < 10) { // 1桁の時
alert("000" + n);
} else if (n < 100) { // 2桁の時
alert("00" + n);
} else if (n < 1000) { // 3桁の時
alert("0" + n);
} else { // 4桁の時
alert(n);
};
乱数とIf分岐と数字を文字列として連結する練習のために作りました。
当時はこれ以上すっきりさせる手段がわかりませんでしたが、今ならこう書きます。
const random = (x, y) => Math.floor(Math.random() * (y - x + 1)) + x;
alert(('000' + random(0, 9999)).slice(-4));
二桁×二桁計算クイズ
// 最小値x、最大値yの乱数を作る
const random = (x, y) => Math.floor(Math.random() * (y - x + 1)) + x;
// 問題の数を設定する
const n = 5;
// 繰り返す
for (var i = 1; i < n + 1; i++) {
const a = random(11, 99);
const b = random(11, 99);
alert(<code>第${i}問(全${n}問)\n${a}×${b}は?</code>); // 問い
alert(<code>${a}×${b}=${a * b}</code>); // 答え
}
乱数でできることが何かないかと探していて作ったものです。当初はもっと野暮ったい書き方でしたがちょっと直しました。
最初の頃は、乱数というのが「プログラミングやってる感」の象徴みたいに思えて、とにかく乱数を使った何かを作りたい気持ちが強かったのを覚えています。
alert()がクイズに便利だと思い、この形でクイズやゲームをあれこれ色々作っていました。もっと後の回で触れますが、何ヶ月か後ではダイアログを使ったゲームとして神経衰弱や簡易ポーカーを作ったりもしました。
Scrapboxに年リンクをまとめて作る
let t = '';
for (let i = 2025; i > 1949; i--) {
t += <code>[${i}]\n</code>;
}
const body = encodeURIComponent(t);
const projectName = 'hoge'; // 自分のScrapboxプロジェクト
const title = 'temp'; // 書き込むページのタイトル
window.open(<code>https://scrapbox.io/${projectName}/${title}?body=${body}</code>);
確かfor文を降順で作ってみることを目的に書きました。ついでに実用可能なものにしようと思ってScrapboxへの書き込みを活用。
最初はブックマークレットもUserScriptも当然わからないので、どれかのページのコンソールかオンラインエディタで実行したのだったと思います。
他に、Dateオブジェクトのことを知らなかった頃(勉強を開始して数日の、変数と配列とオブジェクトを学んだばかりの時点)、自力で年月日のデータを作り、ダイアログに情報を知りたい日付を入力すると、それがその年の何日目の何曜日で残り何日でその日生まれの星座は何で、その年は元号と十二支十干が何で閏年かそうでないか五輪があるのかないのかを表示できるプログラムを作ったりしました。
それはかなり長期にわたり手を入れて、リファクタリングを繰り返して徐々に洗練させていきました。自力で年月日のデータを作ろうなんていうことに熱意を傾けられたのは初学者ゆえだと思いますが、たまたま年月日はDateオブジェクトがあるからやらなくてもよかったことであるにしても、その回り道で獲得した経験値はかなり大きなものだったと思います。
そのコードは貼らないんかい、というツッコミがあるかもしれませんが、結構長いのと、あからさまに「やらなくていいことをやっている」感があってちょっと見せるには気が引けるので割愛致します。まあでも、Dateオブジェクトを最初から知っていても単に「ループ処理で配列を作りたい」という気持ちによって同じことをやっていたような気もします。当時も別に日付のデータが欲しかったのではなく、そういうデータを自分で作ることにこそ意味があったのです。
最初の頃、分厚い解説本を読み込むとかいうことはしないでずっと手を動かしていました。ちゃんとした解説本はそこそこわかるようになってから読んだのですが、「もっと早く読んでおけば」と思ったかというと、正直全然そうは思いませんでした。
逆に「ここまで来てから本を手にとってよかった」と感じたので、趣味でやるならそういう非体系的で場当たり的な学びもありだと私は思います(とはいえ基礎の基礎は初心者向けの解説本かサイトかアプリの力を借りるべきです)。個人の感想に過ぎないところではありますが、プログラミングに関しては空回りも無意味ではないということを強く感じています。
Backlinks
関連度が高いかもしれない記事
- NTA-DIY:1ヶ月目③~おみくじいろいろ~
- NTA-DIY:1ヶ月目④~for文を解らないまま使う~
- NTA-DIY:1ヶ月目⑧~ScrapboxのUserScriptを作ってみる~
- JavaScript日誌:一歩進んだら十回足踏みせよ
- NTA-DIY:2ヶ月目④~よくわからん三銃士~
「ノートテイキングアプリDIY体験記」シリーズの記事
- NTA-DIY:何をどう書いたらいいか考え直す
- NTA-DIY:2ヶ月目④~よくわからん三銃士~
- NTA-DIY:糸口②~環境を整えよう~
- NTA-DIY:なんでこれを書いているのか考え直す
- NTA-DIY:2ヶ月目③~付箋ツールを自作してみる-後編-~
- NTA-DIY:2ヶ月目②~付箋ツールを自作してみる-前編-~
- NTA-DIY:糸口①~結局何をどうしたら動くのさ~
- NTA-DIY:2ヶ月目①~アウトライナーを自作してみる~
- NTA-DIY:前日譚④~VBScriptの感動~
- NTA-DIY:余談①~ScrapboxとGitの貢献~
- NTA-DIY:1ヶ月目⑩~初めてのノートテイキングアプリDIY~
- NTA-DIY:前日譚③~Excelの拡張としてのデジタルDIY~
- NTA-DIY:1ヶ月目⑨~ブックマーク管理ツールを作ってみる~
- NTA-DIY:1ヶ月目⑧~ScrapboxのUserScriptを作ってみる~
- NTA-DIY:1ヶ月目⑦~DOMとAmazonブックマークレット~
- NTA-DIY:1ヶ月目⑥~実作:簡単なブックマークレット~
- NTA-DIY:1ヶ月目④~for文を解らないまま使う~
- NTA-DIY:1ヶ月目③~おみくじいろいろ~
- NTA-DIY:前日譚②~JavaScriptを書けると何が嬉しいの?~
- NTA-DIY:1ヶ月目②~感動したもの勝ち~
- NTA-DIY:1ヶ月目①~どうせならTypeScriptを覚えればいいんじゃね~
- NTA-DIY:前日譚①~カスタマイズできる人ずるい!~
- NTA-DIY:まえがき
他の「JavaScript」タグの記事