モジュールパターン（名前空間） — const My = (()=>{ return { fn(){} } })()
JavaScript では昔から「モジュールパターン」という書き方がありました。
これは 即時実行関数 (IIFE) を使って「名前空間」を作り、外から触れられない変数や関数を閉じ込めつつ、必要なものだけ公開するテクニックです。ES Modules (import / export) が普及する前によく使われていましたが、今でも「簡易的な名前空間」として理解しておくと便利です。
基本のコード例
const My = (() => {
// 内部の変数（外から直接は触れられない）
let secret = 42;
// 外に公開する関数や値を return で返す
return {
fn() {
console.log("秘密の値:", secret);
},
add(x) {
secret += x;
}
};
})();
My.fn(); // → "秘密の値: 42"
My.add(8);
My.fn(); // → "秘密の値: 50"
- 即時実行関数 (IIFE) でスコープを作る。
return { ... }で公開したい関数や値だけ外に出す。- 外から直接
secretにアクセスできない → カプセル化。
よく使うテンプレート集
ユーティリティ名前空間
const Utils = (() => {
function add(a, b) { return a + b; }
function sub(a, b) { return a - b; }
return { add, sub };
})();
console.log(Utils.add(2, 3)); // 5
console.log(Utils.sub(5, 2)); // 3
状態を持つモジュール
const Counter = (() => {
let count = 0;
return {
inc() { count++; },
get() { return count; }
};
})();
Counter.inc();
Counter.inc();
console.log(Counter.get()); // 2
プライベート変数を隠す
const Bank = (() => {
let balance = 1000;
return {
deposit(amount) { balance += amount; },
withdraw(amount) { balance -= amount; },
show() { console.log("残高:", balance); }
};
})();
Bank.deposit(500);
Bank.show(); // 残高: 1500
例題: 簡易ログモジュール
const Logger = (() => {
let logs = [];
return {
log(msg) {
logs.push(msg);
console.log("LOG:", msg);
},
showAll() {
console.log("=== 全ログ ===");
logs.forEach(l => console.log(l));
}
};
})();
Logger.log("アプリ起動");
Logger.log("ユーザーがログイン");
Logger.showAll();
- 効果:
logsは外から直接触れられないが、logとshowAllを通じて操作できる。
実務でのコツ
- グローバル汚染防止: 変数をモジュール内に閉じ込めることで、他のスクリプトと衝突しない。
- 公開/非公開の切り分け:
returnで返すものだけが外から使える。 - ES Modulesが主流: 現代では
export/importを使うのが基本。ただし古い環境や簡易スクリプトではモジュールパターンが役立つ。
ありがちなハマりポイントと対策
- returnを忘れる: 外に公開したい関数を返さないと使えない。
- プライベート変数にアクセスできない: 設計通り。必要なら公開用の getter を作る。
- モジュールが大きくなる: 名前空間を分けて整理する。
練習問題（Todoリストモジュール）
const Todo = (() => {
let items = [];
return {
add(task) { items.push(task); },
list() { console.log("Todo:", items); },
clear() { items = []; }
};
})();
Todo.add("買い物に行く");
Todo.add("勉強する");
Todo.list(); // Todo: ["買い物に行く", "勉強する"]
Todo.clear();
Todo.list(); // Todo: []
- 効果:
itemsは外から直接触れられないが、公開関数を通じて操作できる。
直感的な指針
- モジュールパターン = IIFE + return で名前空間を作る。
- 外に出すものだけ return、内部変数は隠せる。
- 古い環境では必須、今は ES Modules が主流。
- 初心者は「カウンター」「ログ」「Todoリスト」を作ってみると理解しやすい。
これを覚えれば「グローバル変数を汚さない」「プライベート変数を持つ」「名前空間を整理する」といった場面で役立ちます。