即時実行関数（IIFE） — (function(){})(); / (() => {})()
JavaScript では 即時実行関数 (IIFE: Immediately Invoked Function Expression) という書き方があります。
これは「関数を定義してすぐに実行する」ためのテクニックです。スコープを閉じ込めて変数を外に漏らさないのに便利です。
基本のコード例
通常の関数式を即時実行
(function() {
console.log("IIFE 実行！");
})();
// → "IIFE 実行！"
アロー関数を即時実行
(() => {
console.log("アローIIFE 実行！");
})();
- ポイント:
(function(){ ... })()のように 関数を括弧で囲み、すぐ後ろに()を付ける。- これで「定義」と「実行」を同時に行う。
よく使うテンプレート集
一度だけ実行する初期化処理
(function() {
const msg = "初期化完了";
console.log(msg);
})();
スコープを閉じ込める
(function() {
let secret = "これは外から見えない";
console.log("内部:", secret);
})();
console.log(secret); // エラー: secret is not defined
値を返すIIFE
const result = (() => {
let a = 5;
let b = 3;
return a + b;
})();
console.log(result); // → 8
例題: ページ読み込み時に一度だけ設定
<script>
(() => {
const user = "Aki";
console.log(`ようこそ ${user} さん！`);
// ここで初期化処理をまとめて書ける
})();
</script>
- 効果: ページが読み込まれた瞬間に一度だけ実行される。
- メリット: 変数
userは外から触れられないので安全。
実務でのコツ
- グローバル汚染防止: IIFE を使うと変数が外に漏れない。昔のコードではよく使われた。
- モジュールの代替: ES Modules (
import/export) が普及する前は IIFE がよく使われた。 - 初期化処理: ページロード時や一度だけ必要な処理に便利。
- アロー関数でもOK: 短い処理なら
(() => {})()が読みやすい。
ありがちなハマりポイントと対策
- 括弧を忘れる:
function(){}は文として解釈されるためエラー。- 対策:
(function(){})()のように必ず括弧で囲む。
- 外から変数を使いたい:
- IIFE 内の変数は外から参照できない。必要なら戻り値を返す。
練習問題（カウンターをIIFEで作る）
const counter = (() => {
let count = 0;
return () => ++count;
})();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
- 効果: IIFE 内の
countは外から見えないが、返された関数が覚えている。 - ポイント: クロージャと組み合わせると「プライベート変数」を作れる。
直感的な指針
- IIFE = 「関数を作ってすぐ実行」
- 変数を外に漏らさないためのテクニック。
- 昔はグローバル汚染防止に必須、今はモジュールが主流。
- 初心者は「初期化処理」や「カウンター作成」で試すと理解しやすい。
これを覚えれば「一度だけ実行する処理」「外から触れられない変数」を作れるようになり、コードの安全性と整理がぐっと向上します。