Frontend Academy · レッスン

変数: let、const、varとスコープ

let、const、varで変数を宣言します。ブロックスコープと関数スコープ、そして多くの場合constが推奨される理由を理解します。

「変数: let、const、varとスコープ」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

なぜ変数を使うのでしょうか？

変数には値を保存できるため、再利用や更新ができ、意味のある名前を付けられます。JavaScript には変数を宣言する方法が 3 つあります。var（古い方法）、let（現代的で再代入可能）、const（現代的で束縛を変更しない）です。

const — デフォルトの選択肢

変数に再代入しない場合は const で宣言します。これにより意図が明確になり、誤った再代入を防げます。ただし、const が防ぐのは再束縛であり、オブジェクトや配列が不変になるわけではありません。

const name = 'Alice';        // can't reassign
const PI = 3.14159;

const user = { age: 25 };    // object is mutable
user.age = 26;               // OK — property change, not rebinding
// user = {};               // Error — can't reassign const

let — 再代入が必要な場合

値が変化する場合は let を使います。たとえば、ループカウンター、累積値、状態を表す変数などです。let にはブロックスコープがあり、最も近い外側の { } の中でのみ存在します。

let score = 0;
score = score + 10;  // OK

for (let i = 0; i < 3; i++) {
  console.log(i);     // 0, 1, 2
}
// console.log(i);   // ReferenceError — i is out of scope

var — レガシーな宣言

var にはブロックスコープではなく関数スコープがあり、その関数の先頭にホイスティングされます。これが微妙なバグの原因になります。現代の JavaScript では var を避け、const と let を優先してください。

function example() {
  if (true) {
    var x = 5;   // function-scoped, not block-scoped
  }
  console.log(x); // 5 — still accessible here!
}

スコープ: 変数が存在する場所

グローバルスコープ: 関数やブロックの外側で宣言され、どこからでもアクセスできます。関数スコープ: 関数内で宣言され、その関数内からのみアクセスできます。ブロックスコープ: { } 内の let/const に適用され、そのブロック内からのみアクセスできます。

ホイスティング

ホイスティングとは、コンパイル時に宣言がスコープの先頭に移動したかのように扱われる仕組みです。var の宣言はホイスティングされ、undefined で初期化されます。let と const もホイスティングされますが初期化されないため、宣言前にアクセスするとTemporal Dead Zoneエラーが発生します。

変数の命名

説明的な名前を使ってください。変数と関数には camelCase（userName）、定数には UPPER_SNAKE_CASE（MAX_RETRIES）、クラスには PascalCase（UserProfile）を使います。ループ内の i や j などを除き、1 文字の名前は避けてください。

複数の変数を宣言する

1 つの文で複数の変数を宣言できますが、通常は変数ごとに 1 つの宣言を使うほうが明確です。カンマで区切る形式は、スコープや型を分かりにくくすることがあるため避けてください。

// Less clear:
let a = 1, b = 2, c = 3;

// Preferred:
const MAX = 10;
let count = 0;
const label = 'Score';

Temporal Dead Zone（TDZ）

コード内で let または const の変数を宣言前に参照すると、ReferenceError が発生します。ブロックの開始から宣言までの領域を TDZ と呼びます。

console.log(value); // ReferenceError: Cannot access 'value' before initialization
const value = 42;

配列やオブジェクトでのconst

const は変数への再代入を防ぎますが、参照先の値は変更できます。浅い不変オブジェクトには Object.freeze() を使い、深い不変性が必要な場合はイミュータブルなパターンを使ってください。

const items = [1, 2, 3];
items.push(4);       // OK — mutates the array
items = [];          // Error — can't reassign const

const config = Object.freeze({ maxAge: 30 });
config.maxAge = 99;  // Silently fails in non-strict mode

なぜletよりconstを優先するのでしょうか？

デフォルトで const を使うと、コードを理解しやすくなります。その変数が別の場所で再代入されないと分かるためです。実際に再代入が必要になった場合だけ let に変更してください。この習慣によりバグが減り、可読性が向上します。

クイックチェック

let と var の主な違いは何ですか？

まとめ: 変数とスコープ

再代入しない値には const を優先してください。変更可能な値には let を使います。var は避けてください。ブロックスコープ（let/const）によって変数がブロック内に限定されます。ホイスティングでは、var は undefined で初期化され、let/const は早すぎるタイミングでアクセスすると TDZ エラーになります。

よくある質問

「変数: let、const、varとスコープ」レッスンは無料ですか？

はい。「変数: let、const、varとスコープ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「変数: let、const、varとスコープ」で何を学びますか？

let、const、varで変数を宣言します。ブロックスコープと関数スコープ、そして多くの場合constが推奨される理由を理解します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「変数: let、const、varとスコープ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

変数: let、const、varとスコープ
データ型: string、number、boolean、null、undefined
関数: 宣言、式、アロー関数
制御フロー: if、else、switch、for、while

← Frontend Academyに戻る