変数につまずくのはもうやめたい！

変数という入れ物

前回の「第1回 そろそろ本気で学びませんか？」では、JavaScriptをもう一度やり直したい方々のために、勉強の切り口を変えて、JavaScriptを使ってHTMLのコンテンツを入れ替える方法を紹介しました。

今回の最終目標は、formのデータを読み込んでBMI計算プログラム（BMIとは、Body Mass Indexの略で、肥満度の指数としてよく使われます）を作っていきたいと思います。まずは、実行結果をこのページの動画を見ながら確認してください。

また、このサンプルファイルはダウンロードできますので、こちらを見ながら勉強していきましょう。

プログラミング言語には必ず変数というものがあります。変数とは、簡単に言うとデータの入れ物です。データを一時的に保管するために、変数というものを使います。

変数名は、自由に決めることができますが、変数名の最初を数値にしたり、JavaScriptであらかじめ決められた予約語を変数にすることはできません。例えば、ifは、JavaScriptで条件分岐の制御に利用するので、変数名に使うことができません。変数名の付け方の詳細は、変数名の命名規則を参照ください。

まず、変数を使いたい場合は、「var 変数名」と指定します。これを変数の宣言と呼びます。変数を宣言すると同時に値を入れたい場合（変数の初期化と言います）は、「var 変数名 = 値」という書式で記述します。varを付けなくても「変数名 = 値」で、直接変数を作ることもできますが、変数のスコープ（次回説明）の問題があるので、varを付けるようにしましょう。

変数名とは、データを入れる箱の名前で、値がその変数に入っている中身だと思っていただければ分かりやすいでしょう。一度変数を宣言してしまえば、後から中身をいつでも変更が可能です。変更したいときは、「変数名 = 入力したい値」の書式で記述します。

JavaScriptの記入場所

JavaScriptを記入するときは、HTML内部に書く場合と、HTMLの外に書く場合の2通りがあります。前者は、HTMLと一緒に記述できるので、1ファイルにまとめることができるという特徴がありますが、一般的には、後者、つまり、外部ファイル化して管理します。

JavaScriptの記入の仕方は、JavaScriptの記入方法を参照ください。

JavaScriptのソースコードを、HTMLの外部ファイルとすることで、HTMLが軽量になり、SEO対策にもつながります。また、ソースコードを外部ファイル化することによって、HTMLとJavaScriptのプログラムコードを分離して管理することができるので、役割分担がはっきりしてきます。ただし、前回から紹介しているソースコードには、イベントハンドラがHTMLの中に埋め込まれているので、完全には分離できていません。本連載では、話を単純化するためにイベントハンドラのみは、HTMLに書いていくことにします。他の表記方法ついては、イベントハンドラの設定を参照してください。

さらに、外部ファイル化したソースコードは、使いまわしができるようになるので、なるべく、外部ファイルとして扱うようにすると良いでしょう。書籍などで紹介しているサンプルは、紙面の都合とソースコードが短いという理由で、HTML内部に記入している場合が多いので、そのあたりは考慮しておきましょう。