【入門編】 letによる変数宣言とブロックスコープ – JavaScript実践ガイド

JavaScriptの「let」と「スコープ」：変数の寿命と居場所を攻略しよう

こんにちは。フロントエンドの迷宮へようこそ。
JavaScriptを学び始めると、必ずと言っていいほど最初にぶつかる壁が「変数」の宣言です。「なぜ `var` じゃダメなの？」「`let` って何がそんなにすごいの？」という疑問、とてもよく分かります。

かつて、JavaScriptの世界は「変数」の管理が非常にルーズでした。しかし、モダンな開発現場では、今や `let` が主役です。今日は、この `let` が持つ「ブロックスコープ」という概念を、一緒に紐解いていきましょう。

—

まず、「スコープ」という言葉を難しく考える必要はありません。これは単に「その変数がどこまで生きていられるか（どこからアクセスできるか）」という「持ち場」のことです。

例えば、あなたのお財布の中にある「100円玉」。これはあなたのお財布の中（スコープ）では使えますが、お財布の外には出ていきませんよね。

昔使われていた `var` は、関数の中であればどこでも顔を出せるという、少し「でしゃばり」な性格でした。これが原因で、意図しない場所で変数が書き換わってしまうバグが多発したんです。

そこで登場したのが、`let` です。

—

`let` は、「ブロック」と呼ばれる `{ }（波括弧）の中だけで生きるというルールを持っています。これを「ブロックスコープ」と呼びます。

お買い物をする時、レジで「合計金額」を計算しますよね。その計算結果のメモは、そのレジの会計が終われば捨てていいはずです。

// お買い物の開始
{
let total = 1000; // このブロックの中だけで生きる金額
console.log(“今回の会計は” + total + “円です”);
}

// ここで total を呼んでも、もう影も形もありません！
// console.log(total); // 実行するとエラーになります。安心ですね。

このように、`{ }` という壁を作ることで、変数の寿命を短く、安全に管理できるのが `let` の最大の強みです。

—

現場のリアルな感覚として、まずは 「基本は `const`、どうしても書き換える時だけ `let`」 という使い分けを強くおすすめします。

「全部 `let` でいいじゃん！」と思うかもしれませんが、`const` を使うことで「この変数は絶対に書き換わらない」というサインを自分やチームに送れるため、バグが劇的に減るんです。

—

例えば、カウンターを作るときのように、値がどんどん増えていくような場面では `let` が大活躍します。

// カウンターの例
let score = 0; // スコアは変化するので let を使用

function addScore() {
score = score + 10; // 後から値を上書き（再代入）できる
console.log(“現在のスコア: ” + score);
}

addScore(); // 10
addScore(); // 20

もしここを `const` で書いてしまうと、JavaScriptは「君、一度決めた値を書き換えようとしてるね？ダメだよ！」とエラーを出して止めてくれます。そうやって、JavaScriptはあなたのミスを未然に防いでくれているんですよ。

—

プログラミングを始めたばかりの頃、スコープの概念で混乱するのは、世界中の誰もが通る道です。「あれ、さっきまで使えてた変数が使えない！」と焦る日もあるでしょう。

でも、それはあなたが「プログラムを正しく制御しようとしている証拠」です。

まずは、「`{ }` を見たら、その中だけの秘密の変数を作れるんだな」ということだけ覚えておいてください。それだけで、あなたの書くコードは一気にプロフェッショナルなものに近づきます。

何か分からないことがあれば、いつでもまた聞きに来てくださいね。あなたのコードが、今日もバグなく軽やかに動きますように！