Zenn
🐒

【JavaScript】の「let」と「const」って何が違う？初心者卒業のための再整理メモ

に公開
JavaScript
tech

JavaScript基礎：「let」と「const」の本当の違いを理解する

こんにちは、Greentomatoです。

今日から「React × Python（＋Three.js）」で副業につながるスキルを3ヶ月で構築するチャレンジを始めました。
初回のテーマは、Reactの土台となるJavaScriptの変数宣言について。

✅ はじめに：ただの文法じゃなく「意図」を理解する

JavaScriptには変数を宣言する方法が3つあります：

  • var
  • let
  • const

その中でも現代的なJavaScriptでは let と const を使いこなすことが重要です。
本記事では「何がどう違うのか？」に加え、「なぜこの書き方が推奨されるのか？」という背景まで掘り下げます。

🔁 結論：基本は const、再代入が必要なら let

宣言方法 再代入 再宣言 スコープ 用途の目安
const ❌ 不可 ❌ 不可 ブロックスコープ デフォルト（不変の値）
let ✅ 可能 ❌ 不可 ブロックスコープ 値を変える必要がある場合のみ
var ✅ 可能 ✅ 可能 関数/グローバル 古いコードでのみ使用

📦 constは「定数」ではない？

多くの人が勘違いしがちですが、const は「再代入が禁止された変数」であって、「完全に固定された定数」ではありません。

const user = {
  name: "Tomato",
  age: 28
};

user.age = 29; // ✅ OK：オブジェクトの中身は変更できる
user = {};     // ❌ NG：変数そのものの再代入はできない
  • const = 「アドレスを固定する」イメージ
  • 中身（プロパティや要素）の変更は問題ない

📍 ブロックスコープが重要な理由

let と const の最大の強みは、**ブロックスコープ（{}の中で完結）**を持つこと。

if (true) {
  let message = "Hello";
  const count = 1;
  var legacy = "This leaks!";
}

console.log(message); // ❌ ReferenceError
console.log(count);   // ❌ ReferenceError
console.log(legacy);  // ✅ "This leaks!" → var は外に出る

なぜ危険なの？

  • var は関数スコープしか持たないため、関数の外でも意図せず使えてしまう
  • スコープの予測が難しく、バグやセキュリティリスクにつながる

🎯 なぜ「基本はconst」なのか？

ReactやモダンJavaScriptの現場では、次のようなスタイルが推奨されます：

const userId = 42; // 基本は const
let isLoading = true; // 状態が変わるなら let

理由は明確です：

  1. バグの原因を減らす（値の変更を制限）
  2. コードの意図が読みやすくなる（「変えません」と宣言している）
  3. 読み手に優しい（読み手は const で「固定された値」だと安心できる）

🧪 実践例：FizzBuzz

for (let i = 1; i <= 100; i++) {
  const isFizz = i % 3 === 0;
  const isBuzz = i % 5 === 0;

  if (isFizz && isBuzz) {
    console.log("FizzBuzz");
  } else if (isFizz) {
    console.log("Fizz");
  } else if (isBuzz) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}
  • i は毎回変わる → let
  • isFizz / isBuzz はその都度固定の値 → const

このように、変化するもの = let、固定 = const と使い分けるのが自然。

🚫 var を避けるべき明確な理由

function test() {
  if (true) {
    var temp = 123;
  }
  console.log(temp); // ✅ 出てくる → 意図しないスコープの暴走
}

var のスコープのルールは直感的ではなく、初心者ほどハマりやすい落とし穴になります。
ReactやNode.jsの世界では、実務レベルで var はまず使われません。

💡 まとめ

  • const は「再代入できない」だけで、「中身が完全不変」ではない
  • 変わらない値 → const、変わる値 → let
  • let / const はブロックスコープ → バグを防ぎやすい
  • var はスコープが直感に反するため、原則使用しない

Discussion