変数とは何か？「値を入れる箱」をもう少し正確に理解する
プログラミングでいう 変数 は、よく「値を入れるための名前付きの箱」と説明されます。
このたとえはとても大事で、JavaScriptでも同じです。
もう少し正確に言うと、変数を作るとは、
- コンピュータのメモリに“置き場所”を確保し
- そこに値（数値・文字列・オブジェクトなど）を入れて
- あとで取り出したり、入れ替えたりできるようにする
ということです。
JavaScriptの特徴として、変数に入れる値の種類（型）を、最初に決めておく必要がありません。これを 動的型付け と呼びます。
たとえば、同じ変数に数値→文字列の順で入れてもエラーになりません。
これは初心者にとっては書きやすい反面、「思っていない型のまま処理が進む」原因にもなります（詳しくは後半で説明します）。
そして変数は、ただ値を入れるだけでなく、プログラムの中の「状態（変化する情報）」を管理するために使います。
例：
- ゲームのスコア
- 入力フォームの内容
- 計算途中の合計
- ログイン状態 など
学習の最初は、次の形を“型”として体に覚えればOKです。
let age = 25;
age：箱の名前=：値を入れる（代入）25：入れる値
このイメージができると、あとで複雑な処理になっても「いま何がどこに入っているか」を追いやすくなります。
ES6で変数の書き方が変わった（varだけの時代からlet/constへ
JavaScriptは昔、変数宣言が var しかありませんでした。
しかし2015年の大きなアップデート（ES6 / ECMAScript 2015）で、let と const が追加されました。
これが「変数宣言の革命」と言われる理由は、var にはバグの原因になりやすいクセがあり、let/const がそれをかなり解決したからです。
現在の開発現場では、基本的に let/constが標準です。
初心者も最初から let/const を中心に学ぶのが近道です。
JavaScriptの「ゆるさ」：動的型付けと暗黙の型変換に注意
JavaScriptが「便利だけど難しい」と言われる理由のひとつが、この ゆるさです。
たとえば、数値と文字列を + で足すとき、多くの言語ではエラーになりますが、JavaScriptはエラーにせず続行します。
そして多くの場合、文字列として結合します。
let x = "5"; // 文字列
let y = 3; // 数値
console.log(x + y); // "53"
本当は「8」にしたかったのに「53」になる。
しかもエラーが出ないので、気づきにくいのが怖いところです。
他にも、true + 1 が 2 になる（trueが1として扱われる）など、知らないと混乱しやすい動きがあります。
だから変数を扱うときは、
- 今の値は何？
- 型（数値？文字列？）は合ってる？
を意識する必要があります。
困ったら console.log() や typeof で確認する癖をつけると、ミスが減ります。
varはなぜ避けられる？ホイスティング（巻き上げ）が混乱の元
今は基本的に使わない var ですが、古いコードではまだ見かけるので「挙動は知っておく」価値があります。
var のややこしさの中心が ホイスティング（巻き上げ） です。
ポイントはこれです：
varの「宣言」は上に持ち上げられたように扱われる- でも「代入（値を入れる）」は持ち上げられない
その結果、こういうことが起きます。
console.log(val); // undefined（エラーにならない）
var val = "hello";
普通は「まだ宣言してないからエラー」になってほしいのに、undefined が出ます。
これがバグの原因になりやすいのです。
さらに var は ブロックスコープを持ちません。
ifやforの {} の外にも変数が漏れやすく、名前の衝突や上書きが起きやすくなります。
let：再代入できる変数（ブロックスコープで安全）
let は「あとで値を変える必要がある変数」を作るときに使います。
一番大事なポイントは、let が ブロックスコープを持つことです。
ブロックスコープとは、「{} の中だけで有効」というルールです。
if (true) {
let message = "hello";
console.log(message); // "hello"
}
console.log(message); // エラー（外から見えない）
この仕様のおかげで、変数が関係ない場所まで影響する事故が減ります。
また let は同じ名前の二重宣言も基本的に防げるため、うっかりミスも減ります。
. const：再代入できない定数（まずはこれを基本にする）
const は「一度入れた値を、あとから入れ替えない」変数です。
つまり 再代入が禁止です。
const name = "Mike";
name = "Judy"; // エラー
この「変わらない」という性質は、とても重要です。
コードを読むときに「この値は途中で変わらない」とわかるだけで、理解がかなり楽になります。
そのため現場ではよく、
- 基本はconst
- 値を変える必要があるときだけlet
というルールが推奨されます。
※注意：const が禁止するのは「箱ごと入れ替える（再代入）」ことです。
配列やオブジェクトの中身を変更できる場合がある（ここは応用で扱うと良い）という点は覚えておくと安心です。
スコープ（参照できる範囲）：グローバルとローカル
変数には「どこから見えるか」というルールがあります。これが スコープです。
- グローバルスコープ：どこからでも見える（便利だが危険）
- ローカルスコープ：限られた範囲だけで見える（安全）
グローバル変数は便利ですが、別のファイルやプラグインと変数名がかぶると、勝手に上書きされて原因不明のバグになります。
だからモダンJSでは、スコープをできるだけ小さくして、影響範囲を狭めるのが基本です。
ifやforの中でのvarは危険（ブロックを突き抜ける）
var はブロックスコープがないので、ifやforの {} の外にも変数が漏れます。
for (var i = 0; i < 5; i++) {
var temp = "test";
}
console.log(i); // 5（外から見える）
console.log(temp); // "test"（外から見える）
初心者は「forの中で作ったのに、なぜ外で見えるの？」となりがちです。
この違いが、let/const が必要になった理由でもあります。
変数の「宣言」「初期化」「代入」を分けて理解する
変数の扱いは、次の3段階で考えると理解が安定します。
- 宣言：箱の名前を作る
let x;（この時点では中身はundefined）
- 初期化：最初の値を入れる
let x = 10;
- 再代入：別の値に入れ替える
x = 20;（letはOK、constはNG）
また変数名は、意味が分かる名前にすることが重要です。
JavaScriptでは userName のような キャメルケースがよく使われます。
まとめ：モダンJavaScriptの変数選び
最後に、覚えるべきルールはこれだけです。
- 基本は const を使う（値が変わらないならこれ）
- 必要なときだけ let を使う（カウンタ、合計、途中計算など）
- var は基本使わない（古いコード理解のために挙動だけ知る）
JavaScriptは「ゆるい」ぶん、自分でルールを持って変数を管理するほど、バグが減って読みやすいコードになります。
変数はただの箱ですが、箱の作り方（var/let/const）で、プログラムの安全性が大きく変わります。