初心者向け：let と const の違い
JavaScriptで変数を宣言する方法のうち、もっともよく使うのが let と const です。両者の「再代入の可否」「スコープ」「挙動の違い」を押さえると、バグの少ないコードが書けます。
ざっくり結論
- 基本方針: まずは const を使い、後で値を入れ替えたい必要があるときだけ let にする。
- 再代入: const は再代入不可、let は再代入可。
- スコープ: どちらもブロックスコープ（波括弧
{}の中限定）。 - 巻き上げ: どちらも「宣言前は使えない（TDZ）」。
再代入の可否（もっとも大事な違い）
const a = 1;
// a = 2; // エラー：const は再代入不可
let b = 1;
b = 2; // OK：let は再代入できる
- Label: const は「この識別子が指すものを変えない」宣言。安心して読めるコードになる。
- Label: let は「後で値が変わる」前提の一時変数やカウンタに使う。
オブジェクト/配列と const（中身は変更可能）
const user = { name: "Taro" };
user.name = "Hanako"; // OK：プロパティ変更は可能
// user = { name: "Ken" }; // エラー：別オブジェクトの再代入は不可
const xs = [1, 2];
xs.push(3); // OK：配列の中身変更は可能
// xs = [9]; // エラー：再代入は不可
- Label: const は「変数が別の値を指すこと」を禁止するだけ。参照先のオブジェクトの中身変更は許される。
- Label: 参照先も不変にしたいなら
Object.freeze()を使う。
スコープ（どこから見えるか）
if (true) {
let x = 10;
const y = 20;
console.log(x, y); // 10 20
}
// console.log(x, y); // エラー：ブロックの外では見えない
- Label: let/const は「ブロックスコープ」。for 文や if などの波括弧内だけ有効。
- Label: 古い var は「関数スコープ」で混乱しやすいので基本使わない。
巻き上げと TDZ（宣言前は使えない）
// console.log(a); // ReferenceError（TDZ：宣言前に使えない）
let a = 1;
// console.log(b); // ReferenceError（const も同様）
const b = 2;
- Label: let/const は宣言より前の時間帯（Temporal Dead Zone）で参照するとエラー。
- Label: 「上で使って、下で宣言する」書き方は避ける。上から順に宣言して使う。
for ループでの使い分け
for (let i = 0; i < 3; i++) {
console.log(i); // 0,1,2（i は再代入されるので let）
}
const list = [1, 2, 3];
for (const v of list) {
console.log(v); // 各反復で v は新しい束縛。再代入しないなら const が読みやすい
}
- Label: カウンタ i のように値が変わるなら let。
- Label: 反復ごとの「読み取り専用の一時変数」には const。
いつどちらを使うか（実践ルール）
- Label: 変更しない設定値・関数・定数的な値 → const
- Label: 後で代入が必要になるバッファ・一時変数・カウンタ → let
- Label: 関数の戻り値を受けてそのまま使うだけ → const にして意図を明確に
const TAX_RATE = 0.1; // 変わらない定数
let total = 0; // 加算していくので変わる
total += 100 * (1 + TAX_RATE);
よくあるつまずき
- Label: const でオブジェクトを宣言しても「中身は変えられる」ことを忘れやすい。参照を変えられないだけ。
- Label: 宣言より前で使うと ReferenceError。必ず「宣言 → 使用」の順に書く。
- Label: var と混在させない。スコープや巻き上げが違い、予期せぬバグを招く。
- Label: なんでも let にしない。原則 const にして、変更が必要なときだけ let にする。
ミニ練習
- 問1: 変わらないAPIのURLを const、変更される合計値を let で宣言せよ。
const API_URL = "https://example.com/api";
let total = 0;
total += 500;
console.log(API_URL, total);
- 問2: const で配列を宣言し、要素を追加してから表示せよ（再代入はしない）。
const arr = [1];
arr.push(2);
console.log(arr); // [1, 2]
- 問3: for ループのカウンタに let、反復要素に const を使え。
const list = ["a", "b", "c"];
for (let i = 0; i < list.length; i++) {
const item = list[i];
console.log(i, item);
}
- 問4: 宣言前に変数を使うと何が起こるか確認せよ（コメントの行を外すとエラー）。
// console.log(msg); // ReferenceError
let msg = "hello";
console.log(msg);
まとめ
- const は再代入不可、let は再代入可。どちらもブロックスコープで宣言前は使えない。
- 原則 const を使い、値が変化する必要があるときだけ let。
- const でもオブジェクトの「中身」は変えられる（参照の再代入は不可）。
- 読みやすさと安全性を高めるために、意図（変わる/変わらない）を宣言で表現する。