JavaScript Academy · レッスン

モジュールパターン（IIFE）

Q: 「モジュールパターン（IIFE）」で何を学びますか？

即時実行関数でコードをカプセル化します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

即時実行関数でコードをカプセル化します。

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

モジュールパターンが解決すること

ESモジュールが登場する前は、モジュールパターンによって、関連する状態と振る舞いをまとめながら内部をprivateにし、すっきりしたpublic APIを公開できました。このパターンはクロージャを基盤としています。

IIFE

IIFE（即時実行関数式）とは、定義された瞬間に実行される関数です。関数を括弧で囲んで呼び出すと、privateなスコープをすぐに作成できます。

const result = (function () {
  return 42;
})();
console.log(result); // 42

すぐに実行する理由

IIFEを使うと、名前付き関数を残さずに、一度だけ使うprivateなスコープを作成できます。内部のすべてがグローバル名前空間から隔離されます。

(function () {
  const temp = "not global";
  console.log(temp);
})();
// temp is unreachable out here

public APIを返す

モジュールパターンは、オブジェクトを返すIIFEです。そのオブジェクトのメソッドはprivateな変数を取り込んだクロージャであり、publicなインターフェースを形成します。

const counter = (function () {
  let count = 0; // private
  return {
    inc: () => ++count,
    value: () => count
  };
})();
counter.inc();
console.log(counter.value()); // 1

privateとpublic

内部で宣言されていても返されないものは、すべてprivateのままです。返されたオブジェクトに設定したものだけがアクセス可能になります。

const calc = (function () {
  const pi = 3.14159; // private constant
  return {
    area: (r) => pi * r * r
  };
})();
console.log(calc.area(2)); // 12.56636
console.log(calc.pi);      // undefined

privateなヘルパー

ヘルパー関数をモジュール内に置き、publicなメソッドから使うことができます。ただし、外部には公開されません。

const validator = (function () {
  const clean = (s) => s.trim().toLowerCase(); // private
  return {
    isEmail: (s) => clean(s).includes("@")
  };
})();
console.log(validator.isEmail(" A@B.com ")); // true

Revealing Module Pattern

よく使われる派生形では、すべての関数をprivateに定義し、その後でpublicな関数への参照を「公開する」オブジェクトを返します。末尾にpublic APIの一覧をまとめられるため、構成が分かりやすくなります。

const store = (function () {
  let items = [];
  function add(x) { items.push(x); }
  function count() { return items.length; }
  return { add, count }; // reveal
})();
store.add("a");
console.log(store.count()); // 1

シングルトン

IIFEは一度だけ実行されるため、モジュールは実質的にシングルトンです。つまり、privateな状態を1組だけ持つインスタンスが正確に1つ存在します。

const config = (function () {
  let settings = { theme: "dark" };
  return {
    get: (k) => settings[k],
    set: (k, v) => { settings[k] = v; }
  };
})();
config.set("theme", "light");
console.log(config.get("theme")); // "light"

依存関係を渡す

グローバル変数や他のモジュールをIIFEの引数として渡せます。これにより依存関係が明示的になり、安全なミニファイも可能になります。

const mathUtils = (function (M) {
  return { roundUp: (n) => M.ceil(n) };
})(Math);
console.log(mathUtils.roundUp(4.1)); // 5

グローバル汚染を避ける

目的は、ばらばらの変数を何十個も作るのではなく、モジュールという1つのグローバル名だけを使うことです。これにより、スクリプト間での名前の衝突を防げます。

ESモジュールとの関係

現在は、import/exportによって言語レベルで真のモジュールスコープを利用できるため、このパターンはほぼ置き換えられています。ただし、IIFEモジュールを理解するとプライバシーとカプセル化の仕組みが明確になり、レガシーコードで目にする機会もあります。

クイックチェック

モジュールパターンとIIFE

まとめ

モジュールパターンはIIFEを使ってprivateなスコープを作り、隠された状態を取り込んだメソッドを持つオブジェクトを返します。内部はprivateのままで、返されたメンバーだけがpublicになります。Revealing Module Patternのような派生形ではAPIが分かりやすくなり、モジュールはシングルトンとして動作します。現在はESのimport/exportがこのパターンに取って代わっていますが、基本となる考え方は同じです。

よくある質問

「モジュールパターン（IIFE）」レッスンは無料ですか？

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

「モジュールパターン（IIFE）」で何を学びますか？

即時実行関数でコードをカプセル化します。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「モジュールパターン（IIFE）」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← JavaScript Academyに戻る