即時関数（IIFE）とモジュール化

即時関数とは、関数を定義すると同時に、その場ですぐに実行される関数。 Immediately Invoked Function Expression（IIFE）アイフィー

(function() {
  // 処理
})();

( ... )：無名関数全体をカッコで囲み、これにより、JavaScriptエンジンは「関数の宣言（文）」ではなく、「値として評価できる式」として認識する。()：最後にカッコをつけることで、その「式（関数）」を即座に実行（呼び出し）する。

グローバルスコープ（どこからでもアクセスできる領域）の汚染防止

関数内で宣言された変数や関数はローカルスコープ（その関数の外からはアクセスできない）に閉じ込められるため、外部のグローバル変数と名前が衝突する事故を防ぐ。

初期化処理のカプセル化とスコープ閉塞

アプリケーション起動時やページ読み込み時に実行される「1度限りの初期化処理（Setup / Initialization）」を即時関数（IIFE）の内部にカプセル化（集約）する設計手法。関数スコープの特性を利用し、処理に必要な識別子を外部空間から完全に遮断（閉塞）する。
・スコープ汚染の物理的防止（Scope Contamination Prevention） 初期化に必要な一時変数（ループカウンタ、要素取得用の定数、内部関数など）をすべて即時関数の内部スコープに閉じ込める。これにより、実行後にグローバル名前空間（window オブジェクト）へ識別子が残存・漏洩するリスクをゼロにする。
・意図しない再実行・不正アクセスの遮断 初期化ロジックそのものが「名前を持たない関数（無名関数）」として実行・消去されるため、外部の別スクリプトから後から初期化関数を不正に再呼び出し（再実行）される事故を防ぐ。
・メモリ効率の向上（ガベージコレクションの促進） 即時関数の実行終了に伴い、内部で定義されたローカル変数や一時的な参照へのアクセスパスが消滅する。これにより、JavaScriptエンジン（V8等）のガベージコレクタ（不要メモリ自動回収機能）が効率的にメモリを解放しやすい状態を作る。

モジュール化（Modularization）

モジュール化とは、ソフトウェアシステム全体を相互に独立した構成要素（モジュール）へと分割・抽象化し、再利用性、可読性、および保守性を向上させる設計手法を指す。プログラムの各機能を独立した単位として扱うことで、依存関係の結合度（Coupling）を下げ、凝集度（Cohesion）を高めることができる。
トップレベルに記述された<script> タグ内のコードは、グローバルスコープ（window オブジェクト）に展開され、即時関数（IIFE）を使用して、カプセル化して、初期化して、カプセル化することにより、グローバル名前空間の汚染（Name Collision）をシャットアウトする。
複数のクラス名に出力しても、即時関数を使うことは、データ保護（クロージャ）の意味から有用。
コンポーネント：UI がある　モジュール：スクリプト

モジュール化の定義

即時関数（IIFE）によるカプセル化と初期化

・カプセル化（スコープの閉塞）：変数および関数の可視性を関数スコープ内に制限し、グローバル名前空間の汚染（Name Collision）をシャットアウトする。

・初期化処理の隔離：スクリプト読み込み時に必要な初期化コードをその場で1回のみ実行し、処理完了後に一時的な内部変数をスコープ外へ開放（メモリ解放の補助）する。

クロージャ（Closure）による状態保持とデータ保護

複数のクラス要素（.class-name）に対して描画・出力処理を行う場合であっても、処理基盤を即時関数で構築することには大きな技術的意義がある。

即時関数の内部構造によって形成されるクロージャのメカニズムにより、内部状態（データ構造や計算ロジック）に対する外部からの直接的な参照・改ざんを物理的に遮断できる。これにより、不正な値の再代入や意図しない副作用（Side Effect）からデータを安全に保護し、プログラムの健全性とデータの整合性を維持することが可能となる。

JavaScript上の識別子（変数・定数・関数名など）

JavaScript側の識別子（変数名や関数名）は消え去り、出力結果（DOMの更新）だけが画面に安全に残る。

複数のクラス要素（.class-name）に対して描画・出力処理を行う場合に、処理基盤を即時関数で構築することには大きな技術的意義があり、即時関数が終了した瞬間にスコープから外れ、外部からは絶対にアクセスできなくなる（消滅・保護される）。

即時関数の内部で document.querySelector などを使ってDOM操作を行い、HTML要素に id="header" や class="active" などの属性を付与した場合、その見た目やDOM上の構造は画面に残る。ただし、それを操作するためにJS内で定義した「変数（const myHeader = ...）」自体は外部に残らず消滅する。

3-16.即時関数（IIFE）とモジュール化