JavaScript letの使い方

  • JavaScript
  • 変数
最終更新日:

この記事のポイント

  • JavaScriptのlet｜ブロックスコープ変数宣言の基本
  • 再宣言禁止による安全なコーディング
  • varとの違いと適切な使い分け

目次

JavaScriptのletとは？

JavaScriptのletは、ES2015(ES6)で導入された変数宣言のキーワードです。ES2015(ES6)とは、JavaScriptの標準規格であるECMAScriptの第6版になります。

letは、それまで使われてきたvarと比較されることが多いです。Varとの大きな違いは、letではブロックスコープを持つことになります。この特徴は、変数が宣言されたブロック（{}で囲まれた部分）内でのみ有効であることを意味するでしょう。

letを使う最大のメリットは、変数の有効範囲を限定できることです。この利点により、同じ名前の変数が異なるブロックで使われても混乱が生じにくくなり、コードの予測可能性が向上します。また、letで宣言した変数は同じスコープ内で再宣言できません。意図しない変数の上書きも防止できるでしょう。

letには「一時的なデッドゾーン(TDZ)」という特性があり、宣言前に変数を使用するとエラーになります。この特性は、変数使用のタイミングに関する問題を早期発見するうえで役立つものです。

近年のモダンなJavaScript開発では、varよりもlet（および定数宣言のconst）の使用が推奨されています。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

JavaScriptのletキーワードを使った変数宣言の基本構文は、とてもシンプルです。以下のように記述しましょう。

let 変数名; // 宣言のみ let 変数名 = 初期値; // 宣言と同時に初期化 let 変数名1, 変数名2; // 複数の変数を一度に宣言 let 変数名1 = 値1, 変数名2 = 値2; // 複数の変数を宣言して初期化

基本的な使用例は以下のとおりです。

// 変数宣言と初期化 let animal = "イヌ"; console.log(animal); // イヌ // 値の再代入 animal = "ネコ"; console.log(animal); // ネコ

letには、同じスコープ内での再宣言はエラーになる特徴があります。一方で値の再代入は可能です。

let count = 1; // let count = 2; // エラー：同じスコープ内での再宣言はできない count = 2; // OK：値の再代入は可能

letで宣言した変数はブロックスコープを持つため、ブロック外からアクセスすることはできません。この特性をうまく活用すると、変数の有効範囲が適切に制限されることで、より安全なコードが書けるでしょう。

実用例

JavaScript開発において、letキーワードはさまざまな場面で活躍します。このセクションでは、実際のコード例を通して、letの活用方法を見ていきましょう。これらの例は実際の開発シーンを想定したものです。特にブロックスコープの概念を活かした使い方にぜひ注目してください。

各例ではコードの挙動を確認するための出力結果も含めています。letをうまく活用することで変数の管理が容易になり、バグの少ない堅牢なコードが書きやすくなるはずです。また、従来のvarによる変数宣言と比較しながら、letならではのメリットも確認していきましょう。

各コード例は、実際の開発環境に実装可能です。実装をしてコードに触れるなかでは、想定外の出力結果やエラーに直面することもあると思います。しかし、この想定外やエラーへの対処は、JavaScriptプログラミングのスキル全体を高めるうえでも不可欠なものです。

失敗を恐れず、さまざまなトライアンドエラーを経験してみましょう。

ブロックスコープの活用

ブロックスコープはletの最も重要な特徴です。letを使った構文では、ブロック内外で同じ名前の変数を使用しても、それぞれが独立した変数として扱われることになります。それはつまり、変数名の衝突を回避できるということでしょう。

let animal = "イヌ"; console.log(animal); // イヌ { let animal = "ネコ"; console.log(animal); // ネコ } console.log(animal); // イヌ







出力結果：
イヌ
ネコ
イヌ
配列と組み合わせた処理
配列の要素に対して処理を行う場合、letで宣言した一時変数を活用することで、各要素に対する操作を明確に表現できます。

  
let animals = ["イヌ", "ネコ", "ウサギ"];
let favorites = [];
for (let i = 0; i < animals.length; i++) {
    favorites.push(animals[i] + "さん");
}
console.log(favorites);

  


  







出力結果:
['イヌさん', 'ネコさん', 'ウサギさん']
ループでの活用
forループ内でletを使用すると、各反復で新しい変数が作成されます。非同期処理でも想定通りの結果を得られる点は、大きな特徴でしょう。

  
for (let i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log(`インデックス ${i}: ${["イヌ", "ネコ", "ウサギ"][i]}`);
    }, 100);
}

  


  







出力結果:
インデックス 0: イヌ
インデックス 1: ネコ
インデックス 2: ウサギ
条件分岐での変数管理
条件に応じて異なる値を持つ変数を宣言する場合、以下のようにletを使うことで変数のスコープを制限し、コードの意図を明確にできます。

  
let weather = "雨";
let animal;
if (weather === "晴れ") {
    animal = "イヌ";
} else {
    animal = "ネコ";
}
console.log(animal);

  


  







出力結果:
ネコ
関数内での一時変数
関数内で一時的に使用する変数をletで宣言すると、グローバルスコープを汚染することがありません。それはつまり、関数の外部に影響を与えないテクニックといえるでしょう。

  
let globalAnimal = "イヌ";
function changeAnimal() {
    let localAnimal = "ネコ";
    return localAnimal;
}
console.log(globalAnimal); // イヌ
console.log(changeAnimal()); // ネコ

  


  







出力結果:
イヌ
ネコ
オブジェクト操作での活用
オブジェクトのプロパティを処理する際にも、letは役立ちます。一時変数のスコープを制限することで、コードの可読性と保守性が向上するでしょう。

  
let zoo = {mammals: ["イヌ", "ネコ"], birds: ["ワシ", "スズメ"]};
let allAnimals = [];
for (let category in zoo) {
    allAnimals = allAnimals.concat(zoo[category]);
}
console.log(allAnimals);

  


  







出力結果：
['イヌ', 'ネコ', 'ワシ', 'スズメ']
非同期処理での変数管理
非同期処理でletを使うと、クロージャに関連する一般的な問題が回避されます。それはつまり、各処理が独立した変数を参照するように保証できるということです。

  
let animals = ["イヌ", "ネコ", "ウサギ"];
for (let i = 0; i < animals.length; i++) {
    setTimeout(() => {
        console.log(`${i+1}番目: ${animals[i]}`);
    }, i * 500);
}

  


  







出力結果（0.5秒ごとに表示）:
1番目: イヌ
2番目: ネコ
3番目: ウサギ
まとめ
JavaScriptのletは、ブロックスコープを持つ変数宣言方法として、モダンなコーディングに欠かせない要素といえます。従来のvarとは異なり、変数の有効範囲を限定できる特徴があるため、意図しない変数の上書きを防ぎ、コードの安全性を高めることを可能とするでしょう。
特にループや条件分岐内での変数宣言、非同期処理での使用において、letの特性が大きく活きてきます。varに代わる選択肢として、今後のJavaScript開発ではletやconstの使用を積極的に取り入れていくとよいでしょう。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript letの使い方