0Pricing
JavaScript Academy · レッスン

Block／Function／Module ScopeとTDZ

block、function、moduleのscopeを理解し、TDZの動作を確認して、変数の漏出を避けます。

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

導入

目標: 変数がどこに存在し、いつ使用できるのかを理解します。

  • ブロックスコープ（let/const）
  • 関数スコープ（var）
  • モジュールスコープ
  • TDZによる安全性
Block／Function／Module ScopeとTDZ — イラスト1

ブロックスコープの例

ブロックスコープは、変数を1組の中括弧の内側だけで使えるようにします。

// Block scope: let/const exist only inside the braces
let lives = 3;

if (true) {
  const bonus = 5;
  let level = 1;
  console.log("Inside block:", bonus, level);
}

console.log("Lives:", lives);
// Uncommenting next line would fail (not in scope):
// console.log(bonus, level);
Block／Function／Module ScopeとTDZ — イラスト2

varによる関数スコープ

var は関数スコープです（ブロックスコープではありません）。現代的なJSでは let/const を優先してください。

// Function scope: var is visible across the whole function
function demo() {
  if (true) {
    var x = 10; // function-scoped
  }
  console.log("x is visible here:", x); // 10
}
demo();
Block／Function／Module ScopeとTDZ — イラスト3

モジュールスコープの基本

モジュールスコープ: ESモジュールでは、トップレベルのバインディングがそのファイル内だけで有効になります。

// Module scope: top-level variables are local to the module file
const appName = "CoddyKit";
console.log("App name:", appName);

// In a real project, this would be its own file/module.
// Other files must import to access appName.
Block／Function／Module ScopeとTDZ — イラスト4

Temporal Dead Zone

TDZは、誤って宣言前に読み取ることを防ぎます。先に宣言してから使ってください。

// TDZ: using let/const before declaration throws ReferenceError
try {
  // Uncommenting would trigger TDZ:
  // console.log(mode); // ReferenceError
  let mode = "dark";
  console.log("Mode after declare:", mode);
} catch (e) {
  console.log("Caught:", e.message);
}
Block／Function／Module ScopeとTDZ — イラスト5

スコープの落とし穴

落とし穴:

  • 同じスコープ内でvarとlet/constを混在させないでください。
  • 使用箇所の近くで宣言してください。
  • 宣言行より前の値の参照は避けてください（TDZ）。
Block／Function／Module ScopeとTDZ — イラスト6

TDZクイズ

クイックチェック: TDZの動作です。

Block／Function／Module ScopeとTDZ — イラスト7

まとめ

まとめ: let/const はブロックスコープ、var は関数スコープです。モジュールには独自のファイルスコープがあり、TDZは早すぎるアクセスを防ぎます。

Block／Function／Module ScopeとTDZ — イラスト8

よくある質問

「Block／Function／Module ScopeとTDZ」レッスンは無料ですか？

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

「Block／Function／Module ScopeとTDZ」で何を学びますか？

block、function、moduleのscopeを理解し、TDZの動作を確認して、変数の漏出を避けます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Block／Function／Module ScopeとTDZ」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. let、const、varを避ける理由
  2. Block／Function／Module ScopeとTDZ
  3. 命名、可読性、よくある落とし穴
← JavaScript Academyに戻る