Javascript入門書のソースコードを写経する際に工夫した方がいい3つのこと


未経験のプログラミング言語を学ぶ際は、大抵の人が

・入門書を手に入れる
・環境を整えてみる
・実際に入門書に書いてあることを打ち込んでみてその通り動くか確認する

という手順で学習を開始します。完全に初学者ならばそれでもいいと思いますが、もし過去に少しだけプログラミングを触ったことある人や、別言語経験者、言語は経験があるけど新しいフレームワークを学び始めた(たとえばJavascriptは経験していて、これからReactを学ぶなど)際は、それだけだと物足りない…というか大して学びは得られません。

実際progateでも、特に動的型付け言語間ならばある程度一つの言語で業務経験あるならば未経験の言語とはいえカリキュラムをこなすだけなら退屈です。

また、入門書の後半には多少実用的なソースコード(「TODOリスト作ってみました」等)があるケースが多いですが、そのままですと「関数化されていない」「変数がリークしてしまう」など、実務上ではレビューを通すのは難しいものが殆どです。

そこで、主にウェブ系のプログラムが対象ですが、もし入門書の写経が終わった人や、他言語・他フレームワークの経験がある方は、以下のことに工夫してみることをお勧めします。

ソースを関数化する

入門書のソースコードは、初学者が見やすいようにあまり関数化されていないことも多いですが、関数の書き方自体はほぼ必ず載っています。
そこで、写経したコードを可能な限り関数化してみましょう。
その際には、機能ごとに関数で束ねてみることを工夫します。多少細かくなりすぎるくらいでも大丈夫です。平文でべったりと同じ動作が3回以上行われるところは特に「関数化できないか」工夫してみてください。

その際、関数名などは横着せずに真面目に考えて下さい。早く「動くプログラム」を作ってみたいという気持ちになるのは凄く分かりますが、関数やコメントで横着をしたソースはそれだけで可読性を大きく下げ、レビューの遅延を招きます。どういう名前のつけ方がいいのかは、ぐぐってみてください。

Javascriptの場合、即時関数化して変数が漏れ出さないようにする

ほとんどの書籍ではjsファイルのソースコードを、チーム開発を想定して作っていません。
HTMLファイルにベタ書きか、jsファイル内でいきなりvarやletで変数を定義してコードを書いています。
そのままですと、他のjsファイルに対して変数が汚染されてしまいますので、チームで開発する際もさることながら自分で開発する際も、混乱を招くことがあります。

即時関数化するなどして変数が漏れないようにしましょう。そのやり方に関しては以前こちらに投稿しております。

機能ごとにファイルを分割する

実際の開発環境では、機能ごとにJsファイルを分割することも多々あります。
・初期化関数
・定数群
・テーブル描画
・グラフ描画
など、機能に分けてjsファイルを作成してみましょう。上記の項目に沿って即時関数化していたら、初学者にとっては変数を他のjsファイルに渡すところで何をやっているのか分からないかもしれませんが、最初はそれでも大丈夫です。

(可能ならば)要素はHTMLに書き込むのではなく、JavascriptやJQueryを利用してDOM挿入で書かせる

これは、初学者や未経験者にとっては難しいかもしれないので余力があればで大丈夫です。プルダウンリストやテーブル、ラジオボタンなどの要素はHTML上でidやclassを指定してベタ書きするのではなく、JavascriptやJQueryを用いてDOM挿入で書いてみましょう。
Javascriptを学んでいる段階ではJQueryを並行してマスターするのは大変でしょうが、こちらは必要な要素だけ拾い食いして必要なものだけピックアップしても使うことが出来ます。

ここまでやるのは確かにハードルが高いかもしれませんが、無理してやった分コーディングへの理解は確実に深まります。

以上、初学者がソースコードを写経する際に工夫した方がいいことをまとめました。
説明がJavascript寄りになってしまっていますが、少なくとも関数化に関しては他言語でもあてはまるかなと思っています。

また、すべての現場で上記のようなことがルールとなっているとは限りませんが、これらを自然に心がけることが出来るのでしたら、どんなルールにもすぐ適用できるようになるのかなと思います。