N先生からの質問に全力で応えてみた！変数の使い分けについて

この前、N先生からこんな質問がありました。

「変数の使い分けがいまいちピンとこないんです。もう少しわかりやすく教えてください！」

たしかに、let a = 10 と書いたり、let b = true と書いたり、let c = null と書いたり…。
「なんでこんなに書き方があるの？」「どういう風に変数に入れる値を使い分けるの？」と思いますよね。

そこで今回は、『おみくじプログラム』を例にして、どんなときにどんな変数を使うのかをお話しします！

🎯 まずは「どんなプログラムを作りたいか」

スタートボタンを押すと、黒い枠の中に「大吉」「中吉」「小吉」「吉」「末吉」の文字がクルクル回って、ストップボタンを押したときにピタッと止まって結果が出る。
そんな「おみくじマシーン」を作る課題が与えられたとしましょう。

このとき、いきなりプログラムを書くのではなく、
まずは「どんな変数が必要かな？」と考えます。

🪄 ① 結果の文字は「変数」で管理しよう

結果の文字は「大吉」や「中吉」をそのまま書いても問題なく動作します。
でもKだったら、まず変数に「文字列」を入れる方法を考えます。

let option1 = "大吉";
let option2 = "中吉";
let option3 = "小吉";
let option4 = "吉";
let option5 = "末吉";

なぜかというと――
もしかしたらあとで「”大吉”を”だいきち”に変えたい！」ってなったとき、
複数の場所に”大吉”を直接書いていたら、その文字列の所を全て書き直すはめになります💦
でも変数にしておけば、1か所直すだけでOK！

つまり、変数はあとで変えやすくするための工夫、なんです。

慣れてくると、同じようなものが並ぶなら「配列」にまとめるともっと便利！

let options = ["大吉", "中吉", "小吉", "吉", "末吉"];

options[0] と書くことで簡単に「大吉」を取り出せます。
たくさんの選択肢をまとめて管理できる、魔法のリストです✨

💡Kのひとこと
結果の文字列(例：大吉など)を変数に入れた理由は、「もしかしたら後で同じ文字列を使うかも？」と考えたからです。
同じ文字列を他のところでも使う予定があるのなら、変数か配列で管理することを強くおすすめします！

---

🚦 ② スタートとストップの「スイッチ」を作ろう

スタートボタンを押すとクルクル回るけど、
もしその途中でまたスタートを押されたら…？

――そう、めちゃくちゃになります😂

「しっかり制御しないと不具合が発生する原因」になります。
こういった状態を管理するのに便利なものが、「true」「false」なんです。

let spinning = false;

スタートを押す前は false にする
スタートを押した瞬間は true にする（スタートボタンを押したらクルクル回る）
スタートを押した直後以降は false にする（スタートボタンを再度押しても trueに変化しない）

2つの状態だけを切り替えたいときは、true / false が一番ぴったりです。

💡Kのひとこと
falseまたはtrue を変数spinningに入れた理由は、「スタートボタンの制御が必要であり、スタートボタンを押した後さらにスタートボタンを押されると不具合が発生する恐れがある！」と考えたからです。
プログラミングでは、「状態を管理したい」という場面によく出会います。
そんなときは、「true と false で管理できないかな？」 と考える発想を持っておくといいでしょう！
ここでは説明しませんでしたが、同様のことがストップボタンでもいえます。

---

💬 ③ 結果を画面に出すための変数

せっかく結果を出しても、alert("大吉!") じゃつまらない。
やっぱり画面にかっこよく表示したいですよね。

そのためには次のように、HTMLの要素を取得して、それを変数に入れる必要があります。

let resultElement = document.getElementById("result");

これで resultElement.textContent = "大吉"; と書けば、黒い枠の中に文字が表示されます。

💡Kのひとこと
getElementById(“result”) などで取得したHTML要素を 変数resultElementに入れた理由は、「HTML内の要素にある文字列を変更したり追加したりして、web上の画面に文字列を表示したい」と考えたからです。
webの画面上で動きのあるサイトを作るなら間違いなくこの形を使うので、無条件にこの発想を持っておきましょう！

---

🔢 ④ ストップを押した回数を数えてみよう

たとえば、何回ストップボタンを押したかを数えたいとき。
そんなときは数を入れる変数を使います。

let count = 0;

そしてストップボタンを押すたびに、count++ で1ずつ増やせばOK！
数字を増やしたり減らしたりしたいときは、変数の値には数値を使います。

💡Kのひとこと
数値(例：0)を 変数countに入れた理由は、「処理した回数を取得したい、つまりボタンを押した回数を把握したい」と考えたからです。数を扱う処理をしたいときは、値に数値を入れておけばいいと考えるのは自然な流れです。迷わず、ぜひ積極的に使ってみましょう！

---

⏰ ⑤ クルクル回すためのタイマー

setInterval() という関数を使うと、
「0.01秒ごとに文字を変える」みたいな処理ができます。

でも、あとで動きを止めるためには、setInterval() と結びついている「ID」が必要になります。
このIDは、一定の間隔で動作を管理するための”番号”のようなもので、プログラムが自動的に発行してくれます。

ここでは、「スタートボタンを押したあとに setInterval() が動く」のが自然です。
（なぜなら、スタートボタンを押して初めて文字がランダムに回り始めるからです。）

つまり逆に言えば、スタートボタンを押す前はこのIDはまだ必要ありません。
そのため、まずは次のように書いておきます。

let interval = null;

まだ動かしていない段階では何も入れません。
今は空っぽだけど、あとで使う予定がある！という意味で、null を使います。

スタートボタンを押したときにこう書きます👇

interval = setInterval(rotateOptions, 10);

💡Kのひとこと
null を変数 interval に入れた理由は、「setInterval 関数で取得するIDを入れるための”下準備”だけしておきたい、つまり今はまだ具体的な値は必要ない」と考えたからです。
言い換えると、null は「これから使うための空席」みたいなものなんです。
実際に setInterval 関数が使われる場面（スタートボタンを押したり、ストップボタンを押したり）で、
この変数 interval に値が入ることで、初めて意味のある動きをします。

ちなみに、let interval = 'あああ'; のように文字列を入れてもプログラムは動作します。
ですが、後から見た人が「“あああ”って何！？」と感じてしまいますよね。
つまり、動くことは動くけれど、コードとしてはちょっと雑という状態です。

null の使い方は難しく感じると思います。
なので、まずは理解できそうなときに、少しずつ使ってみるくらいで大丈夫です。
まずは、今回ご紹介した①〜④の使い方（考え方）をしっかり身につけてみましょう！

---

🧭 まとめ：変数は、プログラムのメモ帳！

おみくじプログラムで登場した変数に入れた値をもう一度整理してみましょう👇

役割	例	意味
結果を入れる	"大吉"	文字をそのまま入れる
回ってるかどうか	true / false	状態を切り替える
表示する場所	document.getElementById()	HTMLを操作する
回数を数える	0	カウントアップ用
あとで使う予定の変数	null	「まだ入れてないけどこれから使う」という印
いくつかの結果をまとめる	["大吉", "中吉", …]	選択肢をひとまとめに

変数って、ただの「箱」ではありません。
プログラムの中で、「何をしたいのか」「何を管理したいのか」をはっきり伝えるための道しるべなんです。

最初は迷っても大丈夫。
「とりあえず入れてみる」「あとで整理する」――それでOKです。

変数は、自分が考えたことを見える形にするツール。

ちょっと深い話になってしまいましたが、「なんだか難しそう…」と思っても大丈夫。
いろんなプログラムを読んでいるうちに、少しずつ「こういうときはこう書くんだな、こう考えるんだな」という法則のようなものが見えてきます。
そして、あるとき突然「あ、つながった！」という瞬間がきっと訪れます。

焦らず、一歩ずつ進んでいきましょう。