JavaScript letの使い方完全ガイド - 初心者が陥る3つの罠と解決法

こんにちは、とまだです。

JavaScriptで変数を宣言するとき、「var、let、const...結局どれを使えばいいの？」と悩んでいませんか？

私もプログラミングスクールで講師をしていた頃、この質問を本当によく受けました。実は、受講生の約7割がこの部分で混乱していたんです。

今回は、その経験を活かして、JavaScript letの正しい使い方と、初心者が陥りやすい罠を回避する方法を、日常的な例えを使いながら分かりやすく解説します。

JavaScript letとは？「箱」に例えて理解しよう

letを理解するには、まず「変数は箱」だと考えてみてください。

プログラミングでは、データを一時的に保存しておく「箱」が必要です。この箱に名前をつけて、中身を出し入れするわけですね。

let myBox = "りんご";
console.log(myBox); // "りんご"が表示される

myBox = "みかん"; // 中身を入れ替える
console.log(myBox); // "みかん"が表示される

letは、中身を入れ替えられる箱を作るための命令です。

ただし、同じ名前の箱を2つ作ることはできません。これは、部屋に同じ名前のダンボール箱が2つあったら混乱するのと同じです。

let fruit = "りんご";
let fruit = "みかん"; // エラー！同じ名前の箱は作れない

なぜ今、letを学ぶ必要があるのか

「varでも変数は作れるのに、なぜletを使うの？」

これも本当によく聞かれる質問です。

実は、varには予期せぬバグを生む危険性があるんです。それを解決するために生まれたのがletなんですね。

varの問題点：部屋の外まで声が聞こえる

varの最大の問題は、「スコープ」という概念にあります。

スコープを部屋に例えると、varで宣言した変数は「声が部屋の外まで聞こえてしまう」ようなものです。

function myRoom() {
  if (true) {
    var message = "部屋の中の会話"; // varで宣言
  }
  console.log(message); // なんと、ifの外でも聞こえる！
}

これは、秘密の話が外に漏れるようなものです。プログラムが大きくなると、どこで何が変更されているか分からなくなり、バグの温床になります。

letの解決策：防音室のような安全性

一方、letは「防音室」のようなものです。

function myRoom() {
  if (true) {
    let message = "部屋の中の会話"; // letで宣言
  }
  console.log(message); // エラー！外からは聞こえない
}

ブロック（{}で囲まれた部分）の中で宣言したletは、その中でしか使えません。これにより、変数の影響範囲が明確になり、バグを防げるんです。

varとletの決定的な3つの違い

ここで、varとletの違いを整理してみましょう。

1. スコープの違い：部屋 vs 家全体

// varの場合：家全体に響く
function house() {
  if (true) {
    var sound = "テレビの音";
  }
  console.log(sound); // "テレビの音" - 家中どこでも聞こえる
}

// letの場合：部屋の中だけ
function house() {
  if (true) {
    let sound = "テレビの音";
  }
  console.log(sound); // エラー！部屋の外では聞こえない
}

2. 再宣言の可否：同じ名前の問題

// varは同じ名前で何度でも宣言できる（危険！）
var pet = "犬";
var pet = "猫"; // エラーにならない
console.log(pet); // "猫"

// letは同じ名前で再宣言できない（安全！）
let animal = "犬";
let animal = "猫"; // エラー！

3. 巻き上げ（ホイスティング）の違い

これは少し難しい概念ですが、簡単に言うと「宣言前に使えるか」の違いです。

// varの場合
console.log(myVar); // undefined（エラーにならない）
var myVar = 5;

// letの場合
console.log(myLet); // エラー！まだ宣言されていない
let myLet = 5;

letの方がより直感的で安全な動作をします。

letとconstの使い分け：「変わる箱」と「変わらない箱」

「letとconstはどう違うの？」という質問もよく受けます。

簡単に言うと：

• let：中身を変えられる箱（再代入可能）
• const：中身を変えられない箱（再代入不可）

// letの場合
let age = 20;
age = 21; // OK！誕生日が来たら年齢は変わる

// constの場合
const birthYear = 2000;
birthYear = 2001; // エラー！生まれ年は変わらない

実践的な使い分けルール

私が指導していた時に伝えていたのは、**「基本はconst、変更が必要な時だけlet」**というルールです。

// 設定値や定数はconst
const TAX_RATE = 0.1;
const API_URL = "https://api.example.com";

// ループカウンタや累積値はlet
let total = 0;
for (let i = 0; i < 10; i++) {
  total += i;
}

// 条件によって変わる値はlet
let message = "";
if (isLoggedIn) {
  message = "ようこそ！";
} else {
  message = "ログインしてください";
}

初心者が陥りやすい3つの罠と解決法

罠1：forループでのvar使用

これは本当によくある間違いです。

// 間違い：varを使うと...
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 全部3が表示される！
  }, 100);
}

// 正解：letを使うと...
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 0, 1, 2が表示される
  }, 100);
}

解決法：ループ変数は必ずletを使いましょう。

罠2：グローバル変数の汚染

// 間違い：varはwindowオブジェクトを汚染する
var globalData = "データ";
console.log(window.globalData); // "データ"

// 正解：letは汚染しない
let safeData = "データ";
console.log(window.safeData); // undefined

解決法：グローバルスコープでもletかconstを使いましょう。

罠3：ブロックスコープの誤解

// よくある間違い
let x = 1;
if (true) {
  let x = 2; // 別の変数として扱われる
  console.log(x); // 2
}
console.log(x); // 1（外側のxは変わらない）

これは間違いではありませんが、意図しない動作の原因になることがあります。

解決法：ブロック内では別の変数名を使うか、外側の変数を直接操作しましょう。

let x = 1;
if (true) {
  x = 2; // 外側のxを変更
  console.log(x); // 2
}
console.log(x); // 2

実践！letを使った簡単なプログラム

理論ばかりでは面白くないので、実際にletを使った簡単なプログラムを作ってみましょう。

カウントアップアプリ

// カウンターの初期値
let count = 0;

// カウントアップ関数
function countUp() {
  count += 1;
  console.log(`現在のカウント: ${count}`);
}

// 3回カウントアップ
countUp(); // 現在のカウント: 1
countUp(); // 現在のカウント: 2
countUp(); // 現在のカウント: 3

簡単な買い物カート

let cart = [];
let totalPrice = 0;

function addToCart(item, price) {
  cart.push(item);
  totalPrice += price;
  console.log(`${item}を追加しました。合計: ${totalPrice}円`);
}

addToCart("りんご", 100);     // りんごを追加しました。合計: 100円
addToCart("バナナ", 150);     // バナナを追加しました。合計: 250円
addToCart("オレンジ", 200);   // オレンジを追加しました。合計: 450円

まとめ：letマスターへの道

ここまで読んでいただき、ありがとうございます。

letの重要なポイントをおさらいすると、このようになります。

1. letはブロックスコープを持つ（varより安全）
2. 再宣言はできない（同じ名前の変数を作れない）
3. 基本はconst、必要な時だけletを使う

最初は混乱するかもしれませんが、大丈夫です。私が教えてきた受講生も、最初は皆さん同じように悩んでいました。

でも、実際にコードを書いていくうちに、必ず理解できるようになります。

次のステップへ

JavaScriptの変数宣言をマスターしたら、次は本格的なプログラミング学習に進みましょう。

もし体系的に学習したい方は、私が作成したLearning Next Schoolのカリキュラムもチェックしてみてください。

月額約2,000円で、JavaScriptだけでなくTypeScriptやReactまで学べます。特に「JavaScript基礎を1ヶ月で学習！初心者が確実に身につく学習法」の記事では、今回のletも含めた基礎文法を体系的に解説しています。

プログラミング学習は山登りと同じです。一歩一歩進めば、必ず頂上にたどり着けます。

あなたのJavaScript学習を、心から応援しています！