JavaScriptで変数を宣言する際、あなたは今もvarを使っていませんか？ES6以降登場したletは、一見単純な構文変更のように見えますが、スコープ管理や再代入性、バグ回避など、実務に大きな影響を与える重要な構文です。この記事では、letの基本とその実用上のメリット、注意点を整理し、より安全で読みやすいコード設計を目指すヒントをお届けします。
letの基本：ブロックスコープと再代入の特徴
letは、JavaScriptのES6（2015年）で導入された新しい変数宣言キーワードで、以前から使われていたvarに比べて、より直感的で安全なコードを書くことができます。このセクションでは、letのスコープと再代入の特性を中心に、基本的な使い方とそのメリットを整理します。
letのスコープは「ブロックスコープ」
✅ ブロックスコープとは？
letで宣言された変数は、「{}」で囲まれたブロックの中だけで有効です。これにより、if文やfor文などの中で定義した変数が、外に漏れ出すことがありません。
例：
{
let x = 10;
console.log(x); // 10
}
console.log(x); // ReferenceError: x is not defined
この例のように、letで宣言された変数xは、ブロックの外では認識されず、スコープが明確に限定されています。
letは再代入が可能
✅ 柔軟な変数管理が可能
letで宣言した変数は、後から値を変更することができます。これは、状態が変化する処理において非常に有用です。
let counter = 0;
counter = counter + 1;
console.log(counter); // 1
ただし、再宣言は不可です。同一スコープ内で同じ変数名を再びletで宣言しようとすると、エラーになります。
let a = 5;
let a = 10; // SyntaxError: Identifier 'a' has already been declared
これにより、意図しない変数の上書きを防ぐことができ、コードの予測性と保守性が向上します。
varとの違いと使い分けのポイント
このセクションでは、letと旧来のvarの違いについて整理し、それぞれの特徴から実務での使い分けポイントを明確にします。特にスコープ、再宣言、ホイスティングの観点からの挙動の違いは、バグの原因にもなりやすいため、しっかり理解しておきましょう。
スコープの違い：varは関数スコープ、letはブロックスコープ
✅ varの落とし穴
varで宣言した変数は、関数全体がスコープになります。つまり、どこで宣言しても関数内ならどこでも参照できてしまい、スコープが緩すぎるという特徴があります。
function example() {
if (true) {
var x = 10;
}
console.log(x); // 10 - ブロック外でも参照可能
}
✅ letはブロックに閉じたスコープ
一方でletは、そのブロック内でしか使えず、より厳密なスコープ管理が可能です。これは、より安全でバグの少ないコードに直結します。
再宣言：letは同一スコープでの再宣言を禁止
✅ varは再宣言OK、letはNG
varは同じスコープ内で何度でも宣言できますが、これが意図しない変数の上書きを引き起こす原因になります。letではこのような再宣言が禁止されており、より堅牢です。
var a = 1;
var a = 2; // OK
let b = 1;
let b = 2; // SyntaxError
ホイスティングの挙動：TDZ（Temporal Dead Zone）の存在
✅ varは宣言が巻き上げられる（hoisting）
varで宣言された変数は、スコープの先頭に「巻き上げ」られ、未定義状態（undefined）で初期化されます。
console.log(x); // undefined
var x = 5;
✅ letはホイスティングされるが、TDZによってエラーになる
letも技術的にはホイスティングされますが、TDZによって、宣言前の参照が禁止されています。
console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 5;
この違いは、初学者が見落としがちなポイントであり、実務でのバグの発生源になりがちです。letの方が、明確な変数のライフサイクルを持たせることができます。
サンプルで理解するletのスコープ挙動
コードを通じて違いを見ることで、理論的な説明がより明確に理解できます。このセクションでは、letとvarのスコープ挙動の違いが顕著に表れるケースとして、ループと非同期処理の組み合わせを取り上げます。
ループ内でのスコープの違い
✅ letを使った場合：各ループごとに独立したスコープが作られる
JavaScriptの例：
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// 出力：0, 1, 2（それぞれのスコープでiが異なる）
このように、letで定義された変数iはループの各回で独立したスコープを持つため、非同期処理（setTimeout）が正しいiの値を保持してくれます。これは開発中のバグ回避に非常に役立ちます。
✅ varを使った場合：1つのスコープしか持たない
JavaScriptの例：
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// 出力：3, 3, 3（すべて同じiが参照される）
こちらは、varで宣言された変数iがループの外側でも同じスコープに存在するため、非同期処理が呼び出されるときには、すでにループが終了しており、iの値が3になっているという状況です。
実務での応用例：イベントリスナーとループ
✅ letを使うことで、イベントハンドラが正しい要素に対応
const buttons = document.querySelectorAll("button");
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", () => {
console.log(`ボタン${i}がクリックされました`);
});
}
このように、letを使えば、各イベントリスナーが独自のインデックスiを保持できます。これをvarで書いた場合、すべてのイベントで同じiが出力されるというバグに繋がるため注意が必要です。
letのメリット・デメリット
ここでは、letを使うことで得られる利点と、逆に注意が必要な点を整理します。すべてのツールには長所と短所があるように、letにも用途に応じた使い分けが求められます。
メリット
✅ スコープが明確で予測可能なコードになる
letはブロックスコープを持つため、変数が意図せず外部に影響を及ぼすリスクが低くなります。これにより、保守性や再利用性が高いコード設計が可能になります。
✅ 意図しない再宣言を防止できる
letは同一スコープ内での再宣言を許可しないため、誤って変数を上書きするようなバグを未然に防げます。コードの安全性が高まる点で非常に重要な機能です。
✅ ループや非同期処理との親和性が高い
先ほど紹介したように、letはループの各イテレーションごとにスコープが分離されるため、非同期処理との組み合わせで想定通りの動作をしやすくなります。
✅ varのホイスティングによるバグを回避できる
TDZ（Temporal Dead Zone）の存在によって、宣言前に変数へアクセスするとエラーになるため、未定義の変数を参照してしまうようなバグを回避できます。
デメリット
⚠️ 古い環境ではサポートされていないことがある
現在では主要なブラウザすべてでletはサポートされていますが、極端に古い環境（たとえばIE10以前など）では動作しません。古いシステムを対象にする場合はトランスパイルやポリフィルが必要です。
⚠️ スコープが細かくなることで変数シャドウイングの可能性
ブロックスコープによって意図しないシャドウイング（同名の変数が外側スコープと衝突すること）が起こることもあります。これは一見してコードの挙動がわかりにくくなる原因にもなるため、命名規則や構造に注意が必要です。
let value = "外側";
{
let value = "内側";
console.log(value); // "内側"
}
console.log(value); // "外側"
このように、スコープの境界に対する意識がないと、バグの原因になりかねません。
実務での活用ポイントとベストプラクティス
letは便利で安全な変数宣言手段ですが、実務ではただ使えばいいというわけではありません。このセクションでは、プロジェクトでの運用において意識したい「使い分け」や「設計のコツ」を整理します。
新しいコードではvarを使わないのが基本
✅ 新規開発では原則としてletかconstを使用
モダンなJavaScript開発では、varを避けるのが一般的なベストプラクティスです。これは、varのスコープやホイスティングの挙動が原因で生まれる不具合を回避するためです。現在の開発環境では、ES6以降の構文が標準化されているため、letとconstを前提とした設計が推奨されます。
constとletの使い分けを明確にする
✅ 基本はconst、再代入が必要な場合のみletを使用
不変の変数はconstで宣言し、状態が変化する必要がある場合にだけletを使います。これにより、どの変数が変更されうるのかが明確になり、意図しない副作用を防げます。
const MAX_RETRIES = 5;
let retryCount = 0;
このように使い分けることで、変数の「意図」をコードから読み取りやすくなります。
スコープ設計を意識した変数配置
✅ ループ・条件分岐内で使う変数はそのブロック内で宣言する
スコープが広いと、それだけバグの温床になります。letを使う場合でも、なるべく変数を使う場所の近くで宣言することで、コードの可読性と安全性が向上します。
if (user.isLoggedIn) {
let welcomeMessage = `ようこそ、${user.name}さん`;
showAlert(welcomeMessage);
}
このように、**「変数を最小スコープで使う」**という意識を持つことが重要です。
チーム開発ではリンター設定と組み合わせる
✅ ESLintなどの静的解析ツールを活用して、varの使用を禁止
プロジェクトにESLintやPrettierを導入することで、コーディング規約に沿った変数宣言（letやconstの使い分け）を強制できます。特にno-varルールを設定することで、varの使用を事前に防げます。
// .eslintrcの例
"rules": {
"no-var": "error",
"prefer-const": "warn"
}
このようにツールとルールを併用することで、属人的な判断を排除し、チーム全体のコード品質を保つことができます。
まとめ
letの登場は、JavaScriptにおける変数宣言のパラダイムを大きく変えるものでした。単なる構文の違いではなく、スコープ設計・再代入性・安全性といった、コードの根本的な品質に直結する改善をもたらしています。
本記事では、以下のポイントを中心に解説しました：
letはブロックスコープを持ち、意図した範囲で変数管理ができるvarとの違い（スコープ・再宣言・ホイスティングの挙動）を正しく理解することが重要- 実際のコードサンプルを通じて、非同期処理との相性の良さを確認
letのメリットとともに、意図しないシャドウイングなど注意点も存在する- 実務では
constとの使い分けや、最小スコープでの宣言、静的解析ツールの活用がベストプラクティス
これからのJavaScript開発では、letやconstを前提としたコードが当たり前となります。特に、保守性・安全性・可読性を重視するモダンな開発環境では、varは過去のものと考えて差し支えありません。
今こそ、自分のコードベースを見直し、「いつ」「なぜ」letを使うのかを明確にする設計指針を取り入れる好機です。より信頼性の高いコードを目指して、一歩前に進んでみてはいかがでしょうか。
コメント