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(`第${i}問（全${n}問）\n${a}×${b}は？`); // 問い | |
| alert(`${a}×${b}=${a * b}`); // 答え | |
| } |
乱数でできることが何かないかと探していて作ったものです。当初はもっと野暮ったい書き方でしたがちょっと直しました。
最初の頃は、乱数というのが「プログラミングやってる感」の象徴みたいに思えて、とにかく乱数を使った何かを作りたい気持ちが強かったのを覚えています。
alert()がクイズに便利だと思い、この形でクイズやゲームをあれこれ色々作っていました。もっと後の回で触れますが、何ヶ月か後ではダイアログを使ったゲームとして神経衰弱や簡易ポーカーを作ったりもしました。
Scrapboxに年リンクをまとめて作る
| let t = ''; | |
| for (let i = 2025; i > 1949; i--) { | |
| t += `[${i}]\n`; | |
| } | |
| const body = encodeURIComponent(t); | |
| const projectName = 'hoge'; // 自分のScrapboxプロジェクト | |
| const title = 'temp'; // 書き込むページのタイトル | |
| window.open(`https://scrapbox.io/${projectName}/${title}?body=${body}`); |
確かfor文を降順で作ってみることを目的に書きました。ついでに実用可能なものにしようと思ってScrapboxへの書き込みを活用。
最初はブックマークレットもUserScriptも当然わからないので、どれかのページのコンソールかオンラインエディタで実行したのだったと思います。
他に、Dateオブジェクトのことを知らなかった頃（勉強を開始して数日の、変数と配列とオブジェクトを学んだばかりの時点）、自力で年月日のデータを作り、ダイアログに情報を知りたい日付を入力すると、それがその年の何日目の何曜日で残り何日でその日生まれの星座は何で、その年は元号と十二支十干が何で閏年かそうでないか五輪があるのかないのかを表示できるプログラムを作ったりしました。
それはかなり長期にわたり手を入れて、リファクタリングを繰り返して徐々に洗練させていきました。自力で年月日のデータを作ろうなんていうことに熱意を傾けられたのは初学者ゆえだと思いますが、たまたま年月日はDateオブジェクトがあるからやらなくてもよかったことであるにしても、その回り道で獲得した経験値はかなり大きなものだったと思います。
そのコードは貼らないんかい、というツッコミがあるかもしれませんが、結構長いのと、あからさまに「やらなくていいことをやっている」感があってちょっと見せるには気が引けるので割愛致します。まあでも、Dateオブジェクトを最初から知っていても単に「ループ処理で配列を作りたい」という気持ちによって同じことをやっていたような気もします。当時も別に日付のデータが欲しかったのではなく、そういうデータを自分で作ることにこそ意味があったのです。
最初の頃、分厚い解説本を読み込むとかいうことはしないでずっと手を動かしていました。ちゃんとした解説本はそこそこわかるようになってから読んだのですが、「もっと早く読んでおけば」と思ったかというと、正直全然そうは思いませんでした。
逆に「ここまで来てから本を手にとってよかった」と感じたので、趣味でやるならそういう非体系的で場当たり的な学びもありだと私は思います（とはいえ基礎の基礎は初心者向けの解説本かサイトかアプリの力を借りるべきです）。個人の感想に過ぎないところではありますが、プログラミングに関しては空回りも無意味ではないということを強く感じています。
このシリーズ記事の概要はこちら→ノートテイキングアプリDIY体験記