How Come? - Development Blog

仕事のメモなど

JavaScript講習での質問と自己分析

2019年7月、8月の2回。JavaScript初心者コースと実践コースを受けに行った。
※この記事は2019年8月に書いたものを他ブログから移行してリライトしたもの。

先生にした質問と回答

Q1. ループ文では  i = 1 と  i  が変数名に使われますがそれはなぜですか?aでもxでもyでもなく?

i は integer 、整数という語が元となっていて例としてよく用いられます。通常は i だけでなく何を変数に入れてもよいですが、アルファベット一字をあてる人が多いかもしれません。

 

Q2. ループ文で数字の増減を変数で表すのはなぜですか?例えば、0を i という変数に入れて i が10以下の条件下で1ずつ増やしていく
for (let i = 0;  i <= 10; i++)
この流れを変数で表すのがなぜか変な感じする。

のちに自分で自分の質問の意味が分からなくなる。こういう質問が出る時点で自分の勉強の方向性が心配になる。

 

Q3. 大規模案件でscriptファイルが多くあるとき、必ずトップレベルは関数の呼び出しの連続となりますが、それが処理の高速化に繋がることがよくわかりません。限定的で毎回呼び出されることのない処理内の変数についてもトップレベルで初期化させておく必要とは?

時間内ではなんのことか先生に伝えきれなかったが、講習終了後に反復していたら分かってきた。
先生が冒頭でプログラムの読み込まれ方を図に書いてくださった。それを思い出して自分でおおざっぱに書いてみた。

JSの読み込みイメージ

JSの読み込みイメージ

横線がプログラムのコード。縦線矢印が読み込みイメージ。
紺色の線がまっすぐ進んだり、3本に枝分かれしたり、1つは上の処理に戻っているようす。ピンクの線はループしている。

ループ文の外で変数を初期化しておかなければいけない理由は、
ループ文の中に変数を入れるとループの回数分だけ毎回変数に値を入れることになり、処理が遅くなるからではないか。
プログラムは上から下に読み込まれ処理される。
その中でfor文があったらそこで何回転か回って処理を抜け出したり、分岐があれば分岐して上の処理に戻るものもあれば下へ進むものもある。

一見関係のなさそうな処理についても上で初期化させておかないと、毎回そこを通るときに変数に値を入れる作業が発生するのでそれは無駄になるから避けよう、という理解。

現在携わっている案件が大規模なものなのだが、あるとき
「〇〇のときだけこのループ文を発生させる」
というコードを書くことがあった。
そこでループ文の中で変数に値を入れて、書き方に問題ないか先輩に見ていただいたところ
「処理が遅くなるので変数の初期化をさせてください。」
と、指示されたのだった。
ようやく概略だけでも頭の中でイメージが描けて安心した。

自己分析

「なぜ」が多いゆえに先に進めなくなる。
他の参加者の方々の質問を聞いていると「動かないんですが、どうしたらいいですか?」と、「どうしたら」をたずねる声はあったが、私のように「それをする理由」「そうする意味」をたずねる人はいなかったように思う。

一つ一つ理解して納得しないと進めない。
なぜなら、頭の中でプログラムの処理がどうなっているかきちんと描けなければ、重大バグや事故を起こすかもしれないからだ。
ただ、慎重すぎて歩みが遅いのはカバーしなければいけない。

今まで買ったJS本はこちら。

  • 「改訂版 Webデザイナーのための jQuery入門」
  • 「スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)」

jQueryの本は職業訓練校でJSの入門書的テキストだった。
ふりがなプログラミングは、非常に分かりやすそうな構成で話題にもなっていたので購入。
consoleとは?といった意味まで丁寧に解説があったのが良かった。
さらっと読めてしまえるので買ってよかった。

今回受講した講座

武舎先生の通学講座『実習編 JavaScriptで学ぶ プログラミング入門丸一日コース』です。
とても親切な先生なので感謝しています。
お昼は先生と参加者数名でご飯を食べに行くこともでき、様々な環境のWEBクリエイターさんたちと交流できるのが楽しいです。
https://www.marlin-arms.com/support/js1daylab/