JavaScriptのletを完全解説！使い方とサンプルコード10選

はじめに
●JavaScriptのletとは
- ○letの基本
●letの使い方
●letの注意点
- ○再宣言の禁止
- ○未定義の参照
●letのカスタマイズ方法
- ○letとconstの使い分け
●letの応用例とサンプルコード
まとめ

はじめに

この記事を読めば、JavaScriptのletを使いこなせるようになります。

JavaScriptを学び始めたばかりの方でも、letに関する基本的な使い方や注意点、さらには応用例まで分かりやすく解説しています。

サンプルコードも10個用意しているので、実際に手を動かしながら学ぶことができます。

●JavaScriptのletとは

letは、JavaScriptにおいて変数を宣言するためのキーワードです。

letを使って宣言された変数は、ブロックスコープという範囲でのみ有効で、他のスコープからは参照できません。

○letの基本

変数を宣言する際には、letを使用し、その後に変数名を記述します。

また、初期値を設定する場合は、イコール（=）を使って値を代入します。

●letの使い方

ここでは、letを使って変数を宣言し、その使い方を3つのサンプルコードで見ていきましょう。

○サンプルコード1：変数の宣言と初期化

このコードでは、letを使って変数を宣言し、初期値を設定しています。

この例では、変数nameに”太郎”という文字列を代入しています。

let name = "太郎";
console.log(name); // 太郎

○サンプルコード2：ループ内でのletの使用

このコードでは、forループ内でletを使って変数を宣言しています。

この例では、ループの各イテレーションで変数iが新しく宣言され、0から4まで順に表示されます。

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

○サンプルコード3：ブロックスコープの利点

このコードでは、letを使ってブロックスコープを活用しています。

この例では、if文の中で宣言された変数は、そのブロック内でのみ有効であり、外部からは参照できません。

let x = 10;

if (x > 5) {
  let y = x * 2;
  console.log(y); // 20
}

console.log(y); // ReferenceError: y is not defined

●letの注意点

letを使う際には、下記の注意点を押さえておきましょう。

○再宣言の禁止

letを使って宣言された変数は、同じスコープ内で再宣言することができません。

再宣言しようとするとエラーが発生します。

下記のサンプルコードでは、同じスコープ内で変数aを再宣言しようとしているため、エラーが発生しています。

let a = 1;
let a = 2; // SyntaxError: Identifier 'a' has already been declared

○未定義の参照

letで宣言された変数は、宣言される前に参照しようとすると、エラーが発生します。

下記のサンプルコードでは、変数bを宣言する前に参照しようとしているため、エラーが発生しています。

console.log(b); // ReferenceError: b is not defined
let b = 2;

●letのカスタマイズ方法

○letとconstの使い分け

JavaScriptでは、変数宣言にletの他にconstがあります。

constは定数を宣言する際に使用され、一度代入された値を変更することができません。

letは変数の値が変更されることが想定される場合に使用し、constは値が変更されないことが確定している場合に使用します。

●letの応用例とサンプルコード

ここでは、letを使った応用例をいくつか紹介し、それぞれのサンプルコードを見ていきましょう。

○サンプルコード4：letを使ったカウンター機能

このコードでは、letを使ってカウンター機能を実装しています。

この例では、変数countを初期値0で宣言し、1ずつ増やして表示しています。

let count = 0;

function increment() {
  count++;
  console.log(count);
}

increment(); // 1
increment(); // 2
increment(); // 3

○サンプルコード5：letを使った条件付き表示

このコードでは、letを使って条件に応じて表示する内容を変える機能を実装しています。

この例では、変数ageに応じてメッセージが変わります。

let age = 18;

if (age >= 20) {
  console.log("成人です。");
} else {
  console.log("未成年です。");
}

○サンプルコード6：letを使った配列操作

このコードでは、letを使って配列の要素を操作する方法を紹介しています。

この例では、元の配列の各要素に対して2倍した値を新しい配列に格納しています。

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = [];

for (let i = 0; i < numbers.length; i++) {
  let doubled = numbers[i] * 2;
  doubledNumbers.push(doubled);
}

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

○サンプルコード7：letを使ったオブジェクト操作

このコードでは、letを使ってオブジェクトのプロパティを操作する方法を紹介しています。

この例では、オブジェクトのプロパティを変更し、新しいオブジェクトを作成しています。

let person = {
  name: "太郎",
  age: 20,
};

let updatedPerson = {
  ...person,
  age: person.age + 1,
};

console.log(updatedPerson); // { name: "太郎", age: 21 }

○サンプルコード8：letを使った関数内の変数スコープ

このコードでは、letを使って関数内で変数スコープを管理する方法を紹介しています。

この例では、関数内で宣言された変数が外部から参照できないことを示しています。

function showMessage() {
  let message = "こんにちは";
  console.log(message);
}

showMessage(); // こんにちは
console.log(message); // ReferenceError: message is not defined

○サンプルコード9：letを使ったクロージャ

このコードでは、letを使ってクロージャを実装する方法を紹介しています。

この例では、関数を返す関数によって、外部からアクセスできない変数を保持しています。

function createCounter() {
  let count = 0;

  return function () {
    count++;
    console.log(count);
  };
}

let counter = createCounter();
counter(); // 1
counter(); // 2

○サンプルコード10：letを使ったイベントリスナー

このコードでは、letを使ってイベントリスナーを実装する方法を紹介しています。

この例では、ボタンクリック時にカウンターが増加する機能を実装しています。

<button id="button">クリック</button>

let button = document.getElementById("button");
let count = 0;

button.addEventListener("click", function () {
  count++;
  console.log(`ボタンが${count}回クリックされました。`);
});