「JavaScriptなんて理解不能」を「ちょっとわかる」にする最低限の基本を教えてください（前編） | 誰もが受けたい！アクセス解析5分クリニック | Web担当者Forum

JavaScriptはGoogleアナリティクスでも使われているから覚えたいけど、苦手という人も多いね。そこで今日は、JavaScriptの概要とその習得について話してあげよう。

まず、さっき2人が話していたように、JavaScriptはプログラミング“言語”だ。だから英語のように「読める能力」と「書ける能力」が必要になる。Web担当者には、まず最低限「初歩レベルのプログラムをなんとなく読める能力」の習得をお勧めしたい。

英語も、最初は頭が痛いものだったと思う。でも基本文法がわかって、少しの単語がわかれば、全部はわからなくても、なんとなくわかるようになるよね。

JavaScriptの習得もそれと似たようなところがあるから、まずは全部わからなくてもOKだという意識をもっておこう。

「プログラミング言語」というのは、コンピュータへの動作指示、つまりプログラムを書き記すためのものだ。プログラミング言語でプログラムを作る。そしてプログラムをもとにすべてのコンピュータは動作する。

多くの「プログラミング言語」は、ぱっと見では、英語の文章みたいになっているが、ところどころに、数式のようなものが入っている、という印象だと思う。どうだい？

それで、「プログラミング言語」の要素のなかでも、まず覚えてほしいのが、「変数」「関数」「制御構文」という3つだ。今回は、この3つをまず説明しよう。

いや、「プログラミング言語」でいう「変数」「関数」は、またちょっと違うものだから、数学とは違う独特の用語だと思ったほうが理解が早い。これから説明していこう。

たとえば「2＋8を計算しろ」というプログラムを例にして考えてみよう。

このプログラムを、細かく追っていくと、以下のような流れになる。

1. まず、データを格納する場所「a」「b」「c」を、コンピュータのなかに用意する
2. 場所aに「2」というデータを入れる
3. 場所bに「8」というデータを入れる
4. aとbの場所に入っている数字を合計し、場所cに入れる
5. 場所cの内容を表示する

この1番の処理のことを、「変数を作る」という。「変数」はプログラミング独特の用語だけど、ようは何でも入る箱のことだ。その場所に置いたデータを、あとから見つけるために「名前」を付けているんだね。

だから、数学とは違うプログラム独特の用語だと思った方が理解が早いんだ。変数は、箱のこと。使い方としては、まず名前を付けた箱、つまり変数を用意する。そしてその名づけた変数に、数字やら、文字などを格納して使う。具体的には、以下のような記述になるよ。

1で、まず「twobox」「eightbox」「answer」という名前の変数（箱）を3つ用意している。varというのが変数を用意するための命令。 そして2で、twoboxの中に2を、3でeightboxの中に8を格納している。“=”を使うと、変数の中に値を入れることができる。左側の変数に、右側の値を入れるんだ。だから“○○ = △△”の部分を、「○○には△△が入る」と読み替えるとわかりやすいかもね。

そう。さらに、4で「answer = twobox + eightbox;」として合計をanswerに入れて、5で内容を画面表示しているんだ。変数と変数を足したものを、さらに変数に入れる、という書き方ができるんだ。

そういうことだ。あと、JavaScriptの基本的な決めごととして、こんなものがある。

• JavaScriptは、HTML上では「」とで挟んで書く。

• 基本的に、行の最後に「;」を書くことで「ここまでが1つの命令」というのを示す。

• JavaScript内の「//」は、説明のためのコメントで、実際の動作には影響しない。

  上記のプログラムをコメントを除外してシンプルに書き直すと、以下のようになる。

自分でわかりやすい名前にするといいね。そのほうがプログラムが読みやすくなるからね。たとえば、カレンダーの計算なら「Hiduke」とか「Youbi」とかになっていれば、後から見てもわかりやすいだろう。これを思いつきで「Hensuu」とか「x」とかにしていると、読みにくくなるから注意だ。

次は、「関数」だ。

こちらはプログラムの処理を効率化したり、わかりやすくしたりするために生まれている。たとえば、プログラム中、何回も似たような作業をするような場合だね。

先ほどのように足し算した結果を画面に表示するんだけど、「足し算を10回繰り返す」というプログラムの場合を考えてみよう。

それだと、プログラムがものすごく長くなってしまうよ。10回ならまだしも、これがたとえば100回とかだと、ものすごくプログラムに無駄ができてしまう。

そこで「2つの数値を足して画面に表示する」という作業をひとまとめにし、何度でも再利用できるようにするんだ。この「作業をひとまとめにする」ことを「関数」だと思うとわかりやすい。

だから、関数もプログラム独特の用語だと理解したほうが早いんだよ。今回も、実際のプログラムで例をみせるよ。

関数は「function」というキーワードで始まる。次に右側に関数の名前を続けて、さらに、実行したいひとまとまりの作業を「{」と「}」で挟んで書くのが基本だ。

function tasuzoA() {
 var kekka;
 kekka = 2 + 8;
}

そのとおり。指摘のとおりtasuzoAは2+8をするだけの関数だ。せっかく作ったけど、実質は何も処理をしていないし単純すぎるから使えないね。

そういう要望もあるので、関数には、任意の値を渡して作業を依頼する仕組みが用意されている。この引き渡される値は「引数」（ひきすう）と呼ぶ。

そこで、さっきよりも高機能な「tasuzoB」を作ってみた。「tasuzoA」との違いは、「(」と「)」で挟まれた部分にtasu,tasareruという文字が入っている。このtasuとtasareruが渡される値、つまり引数になる。それに、文字どおり計算結果をリターンしている。

function tasuzoB(tasu,tasareru) {
 var kekka;
 kekka = tasu + tasareru;
 return kekka;
} 

鋭いね。これは、作業を依頼する時に依頼側（関数を呼び出す側）が決める。具体的には、以下のように書くよ。「answer = tasuzoB(2,8);」という行で、関数が呼び出されている。

そのとおり。なお関数は、一般的に以下のような書式になっていることが多いよ。

■関数を作る（作業を定義する）
function 関数名(引数名) {
  引数に対する作業内容;
}

■使う時
「関数名(渡す値)」の形で記述する

「使うときに値を渡してあげると、その渡した値に対して、定義した作業をしてくれる」というイメージだね。

念のため、下記に動作確認用のデータを用意しておいた。これを、HTMLファイルとして保存し、ブラウザで開いてみると、動作が確認できる。余力のある人は、自分なりにいろいろ書き替えて試してみるといい。

    ダイアログボックスに「10」が表示されたはずです
  

さて、最後の要素「制御構文」だ。制御構文は今までの2つよりずっと簡単だ。これは単純な英語がわかれば誰でもわかる。これも見てもらったほうが早いので見せるよ。

var aaa = 99;

//制御構文のifとelse
if (bbb === 99) {   //bbbが99だったら
    document.write("bbbは99です");
}else{  //そうじゃなかったら
    document.write("bbbは99ではありません");
}

制御構文は、読んで字のごとく、「プログラムの動作を制御する」文のこと。「もし◯だったら」というifや、「◯の間」というforといった文のことを言うよ。

他にも「switch」「do while」などの制御構文が存在する。これらも英語の意味に近いから、なんとなく読めばわかると思うよ。

大切なのは、そういった「制御構文」で、場合によって違うことをしたり、決まった回数だけ何かを繰り返したりといったことができるということを知っておくことだ。