誰もが受けたい！アクセス解析5分クリニック

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

Web担当者なら理解しておきたい、プログラミング言語「JavaScript」の基本を説明する。

69 423 128

医者：丸山先生（35歳・男）
当クリニックの代表。

研修医：来栖あきら（25歳・男）
イケメンの研修医。

研修医：綾瀬ゆい（25歳・女）
優しい天然ボケの研修医。

ここ「アクセス解析5分クリニック」には、Webサイトについてさまざまな悩みを抱えた患者が、毎日のようにやってくる。研修医の来栖と綾瀬はデコボココンビだが、院長の丸山先生がとにかく名医。たった5分ですべての悩みを解決する！というのだ……。（登場人物紹介を詳しく見る）

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

「JavaScript」をまず読めるようになろう

なんか考え込んでるけど、どうしたの？

アクセス解析を導入したクライアントが、プログラミングの知識がないまま、JavaScriptの部分を勝手に書き変えてトラブルになっちゃったんだよ。

あらら、それは災難だったわね。

それで、細かな説明を求められたんだけど、なかなかうまく説明できなくてさ……。やっぱりWeb担当者としては、質問されたことには、ちゃんと説明できるようになりたいよね。

私もそれは思っていたわ。でも、JavaScriptが何か、ちゃんとわかっていないから、説明できないのよね。

ざっくり説明するなら、「Webに向いたプログラミング言語の1つ」。

PHPとかRubyといったプログラミング言語が基本的にサーバー上で動くのとは違って、「多くの場合パソコンのブラウザ上で動く」のがJavaScriptの特徴っていったところかな。

確かにそう言われているけど、いまいちイメージがわかないのよ。

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

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

でも、読むどころか、JavaScriptを見るだけで頭が痛くなってきます。

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

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

プログラミング言語の基本

※本記事には、プログラミングの専門家から見ると「ちょっと本来の意味と異なる」と思われる表現が含まれますが、わかりやすさのためですので、ご容赦ください。

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

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

はい、そこまでは大丈夫です。

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

「変数」というと、xとかyとかですか？　ますます数学っぽいですね……。数学も苦手なんですけど……。

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

「変数」は、コンピュータが情報を覚えておく「格納場所」

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

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

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

なるほど。こうして順番に、処理を行うわけですね。

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

え、変数が箱!?　意味がわからないのですが……

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

<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>

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

「twoboxには、2が入る」というふうに読み替えられるんですね。「変数は箱」という意味がわかってきました。そうやって変数に値を入れながらプログラムが進んでいくのですね。

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

これは「answerには、twoboxとeightboxを足したものが入る」と読み替えられるわけですね。

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

JavaScriptは、HTML上では「<script>」と「</script>」とで挟んで書く。
基本的に、行の最後に「;」を書くことで「ここまでが1つの命令」というのを示す。
JavaScript内の「//」は、説明のためのコメントで、実際の動作には影響しない。
上記のプログラムをコメントを除外してシンプルに書き直すと、以下のようになる。
```
<script>
var twobox;
var eightbox;
var answer;

twobox = 2;
eightbox = 8;

answer = twobox + eightbox;

alert(answer);
</script>
```

説明してもらってから見ると、なんとなくわかります。つまり「var ◯◯◯」と書くと、メモリ上に場所が確保されるのですね。この◯◯◯を変数というのですね。◯◯◯は何でもいいのですか？

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

「関数」は、ひとかたまりの作業をまとめたもの

次は、「関数」だ。

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

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

同じ内容を10回コピペしたらいいんじゃないでしょうか？

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

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

え、こんどは作業が関数？　またわけがわからなくなりました……。

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

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

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

この場合、関数名はtasuzoAになるのですよね。中身をみると、tasuzoA関数というのは、2+8をする作業のことですか？

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

そうですね。本当だったら、任意の数値の足し算をやってくれるような高機能を目指したいですね。

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

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

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

このtasuzoB関数は、「tasu + tasareru という計算をする関数」ということですね。tasuとtasareruは引数ということですが、中身には何が入っているのですか？

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

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

var answer;
answer = tasuzoB(2,8); //2と8を渡して作業を依頼（関数を呼び出す）
alert(answer);
</script>

この例では、「tasuzoBに、2と8を渡している」ということですね。つまりtasuに2が入って、tasareruに8が入る、結果として、tasuzoB(2,8)、そしてanswerは、10になるということでしょうか？

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

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

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

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

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

<HTML>
  <HEAD>
    <TITLE>動作確認</TITLE>
  </HEAD>
  <BODY>
    <script>
    function tasuzoB(tasu,tasareru) {
      var kekka;
      kekka = tasu + tasareru;
      return kekka;
    } 

    var answer;
    answer = tasuzoB(2,8);
    alert(answer);
    </script>

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

「制御構文」とは、繰り返したり場合によって違うことをしたりする指示

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

【制御構文1】「if～else」：もしaaaがtrueだったら、それに合わせた文章を表示する処理

<scirpt>
var aaa = 99;

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

【制御構文2】「for」：cccが20未満だったら、1ずつ増やして表示を繰り返す処理

<script>
for (ccc =0; ccc < 20; ccc++) {  //cccが20未満なら繰り返し（0からはじまり1つずつ増える）
    document.write(ccc);
    document.write("<br>");
}
</script>

【制御構文3】「while」：dddが100未満だったら、3ずつ増やして表示を繰り返す処理

<script>
var ddd = 0;
while (ddd < 100) {  //dddが100未満なら
    document.write(ddd);
    document.write("<br>");
    ddd = ddd + 3;  //dddが3増える
}
</script>

あー、中身は完全にはわからないですけど、なんとなくわかりますね。見たことある英語と不等号記号ばかりですから。

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

プログラムを制御するから制御構文なのですね。種類はこの3つだけですか？

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

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

まとめ

今回は、JavaScriptの理解に必要な、「変数」「関数」「制御構文」について簡単に説明した。プログラミング言語は、一見難しく見えるけれど、ある程度英語がわかるとなんとなくわかるように構成されていることも多い。当然、英語のように、より深い文法や用法を知ることで、理解が進む。ぜひまずは読解からトライしてほしい。

次回の後編では、さらに説明を加えて、JavaScriptへの苦手意識をなくしたいと思う。お楽しみに。

今日の処方箋

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

アドバイスまずは読み解くところから始めましょう。とくに「変数」「関数」「制御構文」を覚えてください。

本文をよく読み、以下の質問に答えてください