超入門 JavaScript ②　～変数①～

こんにちは。
時候の挨拶もすっ飛ばし、早速本題に入っていきます。

２回目の超入門 JavaScript、今回のテーマは「変数」についてです。
読んで字のごとく、「変わる数」です。
と言われても、あまりピンときませんよね。

超入門①で学習したHello Worldを覚えていますか？

alert('Hello World');

このプログラムを実行させると、ブラウザでポップアップが表示され
「Hello World」とalert(警告)されましたね。
(内容はぜんぜん警告じゃないのですが、学習用サンプルということでご容赦ください…。)

文字列をポップアップ表示させるのは、確かにこれでじゅうぶんです。
しかし、もっと応用が利いて、メンテナンス性も上げられる方法があります。

プログラムを以下のコードに書き換えてみてください。

var message = 'Hello World';
alert(message);

書き終えたらファイルを上書き保存し、ブラウザで動作させてみてください。
修正前と同じように表示されたはずです。

それではコードを解説していきます。

var message = 'Hello World';

「var」とは、「variable」の略で「変数」という意味の英単語です。
変数を初めて宣言する際には、「var」つけて「これから変数を宣言するよ！」と言ってあげなければならないのがルールです。
JavaScriptで変数を宣言する際に使うキーワードには「var」だけでなく「let」や「const」もありますが、今回はまず、「var」を覚えましょう。

上記コードを日本語に訳すと、

「message」という名前の変数を宣言し、'Hello World'という文字列のデータを変数に代入します。

という意味になります。

一点注意してほしいのは、「=」の意味と使い方です。
数学では「等価」を表す「=」ですが、JavaScriptをはじめ多くのプログラミング言語では「代入」を意味します。
よって、例えば

var n = 10;

とプログラムしたならば、「変数 n は、10 と等価である」ではなく、
「変数 n に数値の 10 を代入する」と訳します。
結果は同じなんですけどね。
でも考え方としてはとても重要です！

さて、次の行に進みます。

alert(message);

文字列のHello Worldを表示した際にはシングルクォーテーション「'」で文字列を囲んでいました。
しかし今回の message は囲まれていません。
その理由は、 message が変数だからです。

変数は、今後変わることもあるかもしれない何かしらのデータが入った入れ物なので、文字列ではなくその入れ物の名前です。
だから、クォーテーションで囲ってしまうとその名前(今回の場合 message)そのものが文字列になってしまい、
中に入っているデータ(今回の場合 Hello World)が見えなくなってしまうのです。

コードの内容について、理解できたでしょうか？

「でもこれって１行増えてるし、同じ結果になるなら元のままの方が良いのでは？」

と思った方もいるかもしれません。

★

想像してみてください。
もしも数百行ものプログラムが書かれていて、
その中で何度も何度も、仮に３０回ぐらい上記のコードでHello Worldを警告していたと仮定します。

ある日突然お客様があなたのもとにやってきて、

「いやー、警告の文言なんだけどさ、『Hello World』やめて『May the force be with you!』に変更してくれない？」

と指示されてしまいました。

そうなると、「Hello World」をアラートさせている部分をすべて書き直す必要が出てきてしまいます。

ここで「変数」の出番です！
変数を使っていたのであれば、

var message = 'Hello World';

の部分だけ

var message = 'May the force be with you!';

に１か所変更すれば済みます。

あとは何百回、何千回アラートされていたとしても、コードは以下のように元のまま変えなくても問題はありませんよね。

alert(message);

これが変数の存在意義です。

「変数」についてはまだまだ説明が必要なので、次回も引き続き扱っていきます。

最後までお付き合いいただきありがとうございましたm(__)m

戻ってHello Worldを復習される方は こちら へどうぞ。

このまま次へ進まれる方は こちら へどうぞ。

それでは良いプログラミング・ライフを！