「JavaScriptなんて理解不能」を「ちょっとわかる」にする最低限の基本を教えてください（後編）

前編ではJavaScriptに対する苦手意識をなくしたいという人のために、プログラミング用語である「変数」「関数」「制御構文」について解説した。

今回は、さらに苦手意識をなくすため、JavaScriptの“読み解き”にフォーカスして説明したいと思う。

やっぱりJavaScriptはプログラミング言語だからね。「言語」というだけあって、単語や文法があるわけだから、「5分で全部習得する！」なんてことは、さすがに不可能だ。普通の言語学習と同じように、「単語を覚えて、文法を覚えて、慣用句を覚えて……」というステップが必要だ。

僕は「5分で全部習得するのは不可能」といったんだよ。逆に言えば、目的に応じてある程度の時間をかけることと、覚える範囲を見極めることが必要なんだよ。だから今回は、「プログラムの書き方」ではなく、「プログラムの要点をおさえるための、読み解き方法」を教えようと思う。

英語なら、「主語が来て、述語が来て、その後、目的語や補語が来る」といった“基本ルール”があるね（もちろん例外はあるのだけど）。このような“基本ルール”を知っていれば、英語の読解は、ずいぶん楽になる。

なら同じように、JavaScriptでも“基本ルール”がわかっていれば、読解が楽になるはずだ。以下のルールが、JavaScriptにおける“基本ルール”だ。まずは、これを覚えておくんだ。

• 処理は上から下に実行される。上から下に読んでいけばよい。

• JavaScriptのプログラムは、「ブラウザに何か処理をさせる」という目的がある。たとえば「ブラウザからデータをサーバーに送る」「文字を出力する」「CSSを制御する」といった目的で使われている。

• こうした複数の作業・目的が積み重なり、プログラムとなっている。そして最終目的は、下のほうのブロックに書いてあることが多い。

上記の“基本ルール”を覚えたうえで、前編で例示したスクリプトを、あらためて見てほしい。

<script>

//1．
// ・数字「2」
// ・数字「8」
// ・答えを格納する場所
// を、それぞれメモリ上に用意する（変数を作る）
var twobox;   // twoboxという名前で場所（変数）を作る
var eightbox; // eightboxという名前で場所（変数）を作る
var answer;   // answerという名前で場所（変数）を作る

//2．1つ目の変数（twobox変数）に値を入れる
twobox = 2;

//3．2つ目の変数（eightbox変数）に値を入れる
eightbox = 8;

//4．CPUに渡して計算させ、その結果を3つ目の変数（answer変数）に格納する
answer = twobox + eightbox;

//5．answer変数の内容を画面上に表示する
alert(answer);

</script>

綾瀬さんは、このプログラムの最終目的は何だと思う？

正解だ。このように、プログラムはある目的に向かって上から下に進んでいく。そのなかで、変数を作って、何か処理をさせ、さまざまな目的の作業を積み重ね、最後に最終目的の行動をさせているんだ。

だから、プログラム内容がわからないときは、「結局何をするプログラムなのか？」ということを意識し、下のブロックから先に見て、各個所の目的を考えてみると、理解できることも多い。

この場合、最後の「}」は、「if」という制御構文を締めくくるための「}」だ。このプログラムの目的は、その前のブロックにある「document.write(～);」と、条件に応じてHTMLに文章を表示する部分だ。

こういった「}」に惑わされないためにも、前編で話した「制御構文」も覚えておいてほしい。

これは、文法がわかってないと、英語がわからないのと似ているかもしれない。

まあ、贅沢を言ってはいけない。もともと5分で全部習得できるようなものではないのだから。でも今回は最小限、大意をつかむ読み方のコツを説明したから、とっかかりはつかめたんじゃないかな？

興味がわいたら、いろんなプログラムを読んでみるといいよ。ぐっと理解が深まるはずだから。

「jQuery」は、サイト制作時にとても便利なJavaScriptプログラムの“パーツ集”だよ。中身を見ると、JavaScriptプログラムで書かれているのがわかるんだけど、こういう専用パーツを集めたプログラムを「ライブラリ」というんだ。

「ライブラリ」は、今まで説明してきたプログラムとは違う形に見えると思う。これは、jQueryなどのライブラリは、JavaScriptの達人の手によって作られているから、基本の技だけでなく、さまざまなノウハウを凝縮して作られているんだよ。

正確に言うとそうだ。ただ「jQueryを理解すること」ではなく、「jQueryを使うこと」に限れば、そんなに難しくないよ。

jQueryを使うのは、すでに出来上がったパーツを組み合わせることに近い。むりやりたとえれば、「組み立て家具用の部品集」とかに似ているかもしれない。組み立て家具って、同じような部品が用意されていて、説明書を読めば誰でも組み立てられるだろ？ それに部品同士の組み合わせで、本棚になったり机になったりする。

jQueryも、達人が作った組み立て家具の部品のようなものだから、説明書を読んで組み合わせれば、何とか形になる。

今回は、前編と後編にわたってJavaScriptについて解説した。「JavaScriptに対する苦手意識を解消する」のが目的だったけど、少しでも興味をもってもらえると嬉しい。現在のWebサイト制作では、JavaScriptは必須だからね。

余談の雑学だけど、JavaScript自体はもともと、インターネット初期にネットスケープ社がブラウザを動かす目的で作った、非常に柔軟性の高いプログラミング言語だったんだ。ただ、その設計思想がすばらしかったため、基本仕様を踏襲して、さまざまな“方言”も作成された。たとえばマイクロソフト社のInternet Explorerで動作するのは、「JavaScript」ではなく、「Jscript」と呼ばれている。

それからもJavaScriptは、今日まで拡張発展しながら、ブラウザの枠すら超えて、さまざまなシーンで使用されるようになってきている。

シンプルだけどとても奥深い言語なので、ぜひ勉強して、JavaScriptプログラムの楽しさを味わってほしい。