JavaScriptのlet完全ガイド｜特徴・使い方・注意点を徹底解説

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. はじめに

JavaScriptでの変数宣言は、プログラミングにおいて基本中の基本です。特に近年では、var、let、constという3種類の宣言方法が使われるようになり、適切な選択が求められます。

この記事では、「javascriptlet」というキーワードを軸に、letの特徴や使い方、varやconstとの違いを分かりやすく解説します。初心者から中級者までを対象にしており、基礎から応用までをしっかり押さえられる内容です。

読者の皆さんが「どの場面でletを使うべきか」を正確に理解し、安全で効率的なコードを書けるようになることを目指します。

2. JavaScriptの変数宣言方法の概要

JavaScriptでは、データを一時的に保持するために変数を使います。変数を宣言するためのキーワードとして、以下の3つがあります。

• var: 古くから存在する変数宣言の方法
• let: ES6（ECMAScript 2015）で追加されたブロックスコープの変数宣言
• const: 同じくES6で導入された定数宣言

これら3つのキーワードは、それぞれ特性が異なるため、目的や状況に応じて適切に使い分ける必要があります。

以下の表は、基本的な特徴をまとめたものです。

この表からも分かるように、letはブロックスコープを持ち、再代入が可能な柔軟な変数宣言として、多くの場面で活用されています。

3. letとは？— 基本的な使い方

letは、ES6で導入された新しい変数宣言キーワードです。主に以下の特徴を持っています。

1. ブロックスコープを持つ
2. 再代入が可能
3. 巻き上げ（ホイスティング）の挙動がvarと異なる

3.1 letの基本構文

以下のコードは、letを使った基本的な宣言方法です。

let x = 10;  // 変数xを宣言し、値10を代入
x = 20;      // 再代入が可能
console.log(x); // 出力: 20

この例から分かるように、letは宣言後に値を変更できます。この点はconstと異なり、柔軟なデータ管理に向いています。

3.2 ブロックスコープの特徴

letは、ブロックスコープを持つため、宣言されたブロック内でのみ有効です。

{
  let y = 30;  // ブロック内で宣言
  console.log(y); // 出力: 30
}
console.log(y); // エラー: y is not defined

このように、ブロックの外では変数yは参照できず、エラーになります。これにより、意図しないグローバル汚染を防ぎ、安全な変数管理が可能です。

3.3 ホイスティングの挙動

letは巻き上げ（ホイスティング）されますが、宣言前にアクセスするとエラーが発生します。

console.log(z); // エラー: Cannot access 'z' before initialization
let z = 50;

この挙動は、varがundefinedとして初期化されるのと対照的です。エラーを防ぐため、letは必ず宣言後に使用するようにしましょう。

4. varとletの違い

JavaScriptでは、変数を宣言する際にvarとletを使用できますが、両者にはいくつかの重要な違いがあります。このセクションでは、スコープ、再宣言、ホイスティングの挙動に注目して、具体例を交えながら違いを詳しく解説します。

4.1 スコープの違い

varは関数スコープを持つのに対し、letはブロックスコープを持つという違いがあります。

関数スコープ (var) の例

function exampleVar() {
  if (true) {
    var a = 10; // 関数内で宣言された変数
  }
  console.log(a); // 出力: 10
}

exampleVar();

ブロックスコープ (let) の例

function exampleLet() {
  if (true) {
    let b = 20; // ブロック内でのみ有効
  }
  console.log(b); // エラー: b is not defined
}

exampleLet();

この違いにより、letは意図しない変数の再定義や上書きを防ぐのに適しています。

4.2 再宣言の可否

varは同じスコープ内で再宣言が可能ですが、letは再宣言が許可されていません。

varの再宣言例

var x = 10;
var x = 20; // 問題なく再宣言できる
console.log(x); // 出力: 20

letの再宣言例

let y = 10;
let y = 20; // エラー: Identifier 'y' has already been declared
console.log(y);

この特性により、letは誤って同じ変数を重複して宣言してしまうミスを防ぎます。

4.3 ホイスティングの違い

ホイスティングとは、変数や関数の宣言がスクリプトの先頭に持ち上げられるJavaScriptの仕組みです。

varのホイスティング例

console.log(z); // 出力: undefined
var z = 30;

letのホイスティング例

console.log(w); // エラー: Cannot access 'w' before initialization
let w = 40;

4.4 使用例のまとめ

varは古いコードや互換性が必要な場合に使用されるのに対し、letは最新のコードでより安全なスコープ管理を実現するために使用されます。

比較表

5. constとletの違い

JavaScriptでは、letと並んでよく使われる変数宣言方法にconstがあります。このセクションでは、letとconstの違いについて詳しく解説し、それぞれの使い分け方を紹介します。

5.1 constとは？

constは、再代入が禁止された変数を宣言するためのキーワードです。

基本構文

const pi = 3.14; // 定数を宣言
pi = 3.14159;    // エラー: Assignment to constant variable.

この例では、piは宣言時の値から変更できないため、再代入しようとするとエラーが発生します。

5.2 letとconstの違い

5.3 再代入と再宣言の比較

letの再代入例

let count = 1;  // 初期化
count = 2;      // 再代入可能
console.log(count); // 出力: 2

constの再代入例

const maxCount = 10;
maxCount = 20; // エラー: Assignment to constant variable.

このように、letは変化する値を扱うのに適しており、constは固定された値を扱うのに適しています。

5.4 オブジェクトと配列の場合の注意点

constは再代入が禁止されていますが、オブジェクトや配列のプロパティは変更可能です。

オブジェクトの例

const user = { name: "Taro" };
user.name = "Jiro"; // プロパティの変更は可能
console.log(user.name); // 出力: "Jiro"

user = { name: "Saburo" }; // エラー: 再代入は不可

配列の例

const numbers = [1, 2, 3];
numbers.push(4); // 要素の追加は可能
console.log(numbers); // 出力: [1, 2, 3, 4]

numbers = [5, 6, 7]; // エラー: 再代入は不可

5.5 実際の使い分け例

constを使用すべきケース:

1. 定数や変化しない値

   const TAX_RATE = 0.1;

2. オブジェクトや配列の参照を固定する場合

   const CONFIG = {
     apiUrl: "https://example.com/api",
   };

letを使用すべきケース:

1. 値を動的に変更する場合

   let count = 0;
   count++;

2. ループ内でインクリメントする変数

   for (let i = 0; i < 10; i++) {
     console.log(i);
   }

6. letを使うべきケースと注意点

JavaScriptでは、変数宣言にvar、let、constの3つが利用できますが、letは特定のシチュエーションで特に有用な役割を果たします。

このセクションでは、letを使うべきケースと、その際に注意すべきポイントについて詳しく解説します。

6.1 letを使うべきケース

1. ブロックスコープが必要な場合
   letはブロックスコープを持つため、条件分岐やループの中で安全に変数を管理できます。 例: 条件分岐内での変数管理

   if (true) {
     let message = "Hello, World!";
     console.log(message); // 出力: Hello, World!
   }
   console.log(message); // エラー: message is not defined

2. 動的に値を変更する必要がある場合
   constでは再代入ができませんが、letは動的に値を変更したい場面に適しています。 例: ループ処理内での変数管理

   let total = 0;
   for (let i = 1; i <= 5; i++) {
     total += i;
   }
   console.log(total); // 出力: 15

3. 一時的な値を格納する場合
   関数内や短期間しか使用しない変数では、letを使うことでコードの可読性と管理のしやすさが向上します。 例: 関数内でのローカル変数

   function calculateDiscount(price) {
     let discount = 0.1; // 一時的な割引率
     return price * (1 - discount);
   }
   console.log(calculateDiscount(1000)); // 出力: 900

6.2 letを使用する際の注意点

1. 変数の初期化に注意する
   letは宣言前にアクセスするとエラーが発生します。 例: 初期化前の参照

   console.log(a); // エラー: Cannot access 'a' before initialization
   let a = 10;

2. ホイスティングの挙動に注意する
   letもホイスティングされますが、「一時的デッドゾーン（Temporal Dead Zone）」内ではアクセスできません。 例: デッドゾーンの挙動

   if (true) {
     console.log(b); // エラー: Cannot access 'b' before initialization
     let b = 20;
   }

3. スコープの範囲を把握する
   同じブロック内で同じ名前の変数を再宣言することはできません。 例: 再宣言によるエラー

   let c = 10;
   let c = 20; // エラー: Identifier 'c' has already been declared

4. グローバル汚染を避けるために使う
   varを使うとグローバルスコープに影響を与えるリスクがありますが、letはそのリスクを軽減します。 例: グローバル変数とローカル変数の衝突回避

   let d = 50; // グローバル変数
   function test() {
     let d = 30; // ローカル変数
     console.log(d); // 出力: 30
   }
   test();
   console.log(d); // 出力: 50

7. FAQセクション（よくある質問とその解答）

このセクションでは、JavaScriptのletに関するよくある質問とその解答をまとめました。実践的な疑問やトラブルの解決方法を具体的に解説します。

Q1: なぜletを使うべきですか？

A:
letは、次の理由から推奨されています。

1. ブロックスコープ:
   letはブロック単位で変数のスコープを制限できるため、意図しない変数の上書きを防ぎます。
2. 再宣言の防止:
   同じスコープ内で再宣言を許さないため、バグの発生リスクを低減できます。
3. ホイスティングによる安全性:
   letは「一時的デッドゾーン（TDZ）」内ではエラーを発生させるため、宣言前にアクセスしようとする誤りを発見しやすくなります。

Q2: varを使うと何が問題ですか？

A:
varは古いコードとの互換性はありますが、以下の問題点があります。

1. スコープが広すぎる:
   関数スコープしか持たず、ブロック内で定義したつもりの変数が意図せず外部からもアクセス可能になってしまうことがあります。

if (true) {
  var x = 10;
}
console.log(x); // 出力: 10

2. 再宣言が可能:
   同じスコープ内で再宣言できるため、誤って変数を上書きしてしまうリスクがあります。

var y = 20;
var y = 30; // 上書きが発生

3. ホイスティングの挙動:
   varはホイスティング時にundefinedで初期化されるため、初期化前にアクセスできてしまう問題があります。

console.log(z); // 出力: undefined
var z = 50;

Q3: letとconstはどのように使い分けるべきですか？

A:
基本的なルールは次のとおりです。

• const: 値を変更しない場合や、定数として扱う値に使用します。
• let: 値が変化する可能性がある場合や、動的に更新される値に使用します。

具体例:

const TAX_RATE = 0.1;
let price = 1000;
price = price * (1 + TAX_RATE); // 価格計算

このように、データの性質によって適切に使い分けることでコードの意図が明確になります。

Q4: letの初期化前アクセスエラー（ReferenceError）の原因は何ですか？

A:
letで宣言された変数はホイスティングされますが、「一時的デッドゾーン（TDZ）」内ではアクセスできません。

例:

console.log(a); // エラー: Cannot access 'a' before initialization
let a = 10;

対策:
宣言と初期化を一緒に行い、コードの順序に注意してください。

8. まとめ

この記事では、JavaScriptの変数宣言におけるletについて詳しく解説しました。基本的な使い方からvarやconstとの違い、具体的な使用例、そしてよくある質問への回答まで、幅広くカバーしました。

ここで、これまでの要点を振り返りながら、記事の内容を簡潔にまとめます。

8.1 letの基本的な特徴

1. ブロックスコープを持つ:

• letはブロック（{}）内でのみ有効です。
• スコープが限定されるため、意図しない変数の上書きを防ぎます。

1. 再代入が可能:

• 動的に値を変更できるため、ループや条件分岐での使用に適しています。

1. 再宣言が不可:

• 同じスコープ内での再宣言を許可しないため、コードの安全性が向上します。

1. ホイスティングの挙動:

• 宣言はホイスティングされますが、「一時的デッドゾーン（TDZ）」によって初期化前のアクセスはエラーになります。

8.2 他の宣言方法との比較

8.3 letの使いどころ

letは次のようなケースで活躍します。

• 条件分岐やループ:
  動的に値が変化する場面で利用。

  for (let i = 0; i < 5; i++) {
    console.log(i);
  }

• 関数内のローカル変数:
  一時的に使用する値を格納する際に最適。

  function calculateTotal(price) {
    let discount = 0.1;
    return price * (1 - discount);
  }

• 動的な状態管理:
  アプリケーションの状態やユーザー入力に基づいて値が変化する場合。

  let userInput = prompt("名前を入力してください:");
  console.log(`こんにちは、${userInput}さん！`);

8.4 注意点とベストプラクティス

1. 宣言前のアクセスを避ける:
   ホイスティングによるエラーを防ぐために、宣言はコードの先頭で行いましょう。
2. constを優先し、必要に応じてletを使う:
   変更される必要のない変数はconstを使い、再代入が必要な場合のみletを使用するのが推奨されます。
3. スコープ管理を意識する:
   変数のスコープを意識しながら、意図しないアクセスや衝突を避けましょう。

8.5 最終的なまとめ

letはモダンなJavaScriptプログラミングにおいて、柔軟かつ安全な変数宣言の選択肢です。

• varは古いコードでのみ使用し、新しいコードではletまたはconstを使うべきです。
• 動的に値が変わる場合にはlet、固定値にはconstを使うことでコードの安全性と可読性が向上します。

8.6 次のステップ

この記事で学んだ内容を活かして、実際にコードを試してみてください。また、以下のトピックも関連する内容としておすすめです。

1. JavaScriptのデータ型と型変換 – データ管理をさらに深く理解する。
2. 関数とスコープの詳細解説 – より高度なスコープ管理と関数の使い方を習得する。
3. ES6以降の新機能まとめ – モダンJavaScriptの機能を網羅する。