今回は「変数を宣言して、変数に値を入れ、変数の値を使って表示する」ところまでやってみます。
現在の個人的な目標として「ユーザーに値を入力させ、その値を取得して加工し画面に表示する」といったことをやってみたいと思っています。そのためには変数の扱い方がわかっていた方が良いと思うので、今回は上記をテーマにしました。
変数とは？
では早速「そもそも変数とは何か？」ということですが、「入れ物」とよく説明されます。
こちらの説明が技術的に正しいのかどうかは私にはわかりませんが、一旦は上記の理解で問題ないかと思います。
イメージとして、例えば「値を2倍にしてそれを表示する」という処理を作りたいとします。
ここでは厳密なプログラミング言語を使用せずに、ざっくりと説明します。
A ← 10
画面に表示（A × 2）
「←」は「左に書かれた入れ物に値を入れます」という指示です。
「画面に表示（）」は「カッコ内の値を画面に表示します」という指示になります。
ここでは、Aに10が入り、そのAを2倍したものが画面に表示されますので、「20」という値が画面に表示されるのだろうと予測できます。
この時のAが「入れ物」で「変数」と呼ばれます。
こちらの変数ですが、基本的には「変数を宣言する」という処理を書く必要があります。
「宣言する」と言うとわかりにくいかもしれませんが、簡単に言えば「入れ物を用意する」ことです。
先程のイメージを使用して説明すると、
入れ物Aを用意します
A ← 10
画面に表示（A × 2）
1行目の「入れ物Aを用意します」が「変数を宣言する」こととなり、これによって初めてその変数を使用することができるようになるわけです。
日常生活と同じように「入れ物がなければ物を入れようがない」と考えていただいても良いですし、コンピュータ側の視点に立って「急に『Aに10を入れてください』と言われたけど、Aとは何ですか？」と戸惑う様子を想像していただいても構いません。ご自身にとって理解しやすいイメージを持っていただければ幸いです。
では「変数のイメージ」「変数は宣言しないと使えないといったルール」などがわかったところで、JavaScriptで記述していきたいと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
<script>
// 変数Aを宣言します。
let A; // 入れ物Aを用意します
// 変数Aに値を代入します。
A = 10; // A ← 10
// 変数Aを2倍した値を表示します。
alert(A * 2); // 画面に表示（A × 2）
</script>
</head>
<body>
</body>
</html>
上記を拡張子htmlで保存し、ブラウザで実行していただくと「20」という値が表示されます。
scriptタグ内のletですが、こちらは、
let 変数名;
と書くことで、変数を宣言する（入れ物を用意する）ことができます。
変数に値を代入する（変数に値を入れる）ためには、
A = 10;
のように「=」を使用します。
最後にalert()を用いて、（）内の値を画面に表示します。
alert(値);
「//」についてですが、「//」以降はコメント部分で処理されない範囲になります。コメントを書いたことで処理が速くなる、新たな処理が追加される、といったことはありません。ただ、後から振り返る時や他の方が読んだ時に、上記のように説明やメモを書いておくとわかりやすいと思います。
今回は処理の上の行に「処理の説明」、処理と同じ行に「先程記載したイメージ」を書きました。
余談
ここからは余談ですので、もう疲れてしまった方や急いでいる方はスルーで問題ありません。
「なぜ変数などというものを使用するのか？」という疑問が出てくる方もいらっしゃるのではないでしょうか。例えば、今回のケースであれば「そのまま10を2倍してしまえばよい」と考えて、以下のように記載しても同じ結果を返します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
<script>
// 10を2倍した値を表示します。
alert(10 * 2); // 画面に表示（10 × 2）
</script>
</head>
<body>
</body>
</html>
今回のような「2倍にした値を表示する」というケースでは上記のように変数を使用しなくても問題ないかもしれません。
しかし、冒頭で申し上げたような「ユーザーに値を入力させ、その値を取得して加工し画面に表示する」といったような処理を行う場合、「ユーザーが入力した値」を変数で確保していた方がプログラミングを行う側としてはやりやすそうではありませんか？
「この入れ物にはユーザーが入力した値が入っている」とわかれば、使いたい時にその入れ物を使えばよいわけです。
また、イメージで申し訳ありませんが、
入れ物Aを用意します
A ← ユーザーに値を入力させます
画面に表示（A × 2）
画面に表示（A + A）
画面に表示（A - 2）
といったように、「ユーザーが入力した値」を繰り返し使用する場合に備えて、変数を用意しておくととても便利なのです。
この辺りの感覚についてはプログラミングを進めていく過程で徐々にわかっていくと思いますのでゆっくりで大丈夫です。
「わざわざ変数を用意しなくてもよさそうだ」と感じた方に向けて上記の考え方が参考になればと思いますし、またそういった視点でプログラミングを進めて行くと新しい発見があるのではないかと考えています。
今回の記事を作成するにあたって、以下を参考にいたしました。ありがとうございます。
【参考文献】