JavaScriptの即時実行関数（IIFE）とは？基本から使いどころまで徹底解説

JavaScriptにおける**即時実行関数（IIFE：Immediately Invoked Function Expression）**は、関数を定義すると同時に実行するための書き方です。
スコープを限定したり、変数の衝突を防ぐために使われる重要なテクニックです。

この記事では、IIFEの基本から実践的な使いどころまで、初心者でも理解できるように丁寧に解説します。

即時実行関数（IIFE）とは

即時実行関数とは、関数を定義したその場で実行する構文のことです。

通常の関数は、定義してから呼び出す必要がありますが、IIFEではその手順を一度に行います。

// iife-basic.js
(function () {
  console.log("IIFEが実行されました");
})();

このコードは、関数が定義された直後に実行されます。

IIFEの基本構文

IIFEは以下のような形で記述します。

// iife-syntax.js
(function () {
  // 処理
})();

ポイント

• 関数を ()で囲む
• 最後に ()をつけて実行

関数を囲む理由は、JavaScriptに「関数式」として認識させるためです。

なぜIIFEが必要なのか

IIFEは主にスコープを限定するために使われます。

JavaScriptでは、変数のスコープ管理が重要です。
特に、グローバルスコープに変数が増えると、意図しない上書きやバグの原因になります。

関連記事として、スコープの理解を深めるとより効果的です。
→ JavaScriptのスコープとは？var・let・constの違いを解説

IIFEによるスコープの分離

IIFEを使うことで、変数を外部から隔離できます。

// iife-scope.js
(function () {
  const message = "外部からアクセスできない";
  console.log(message);
})();

// console.log(message); // エラーになる

このように、IIFE内の変数は外からアクセスできません。

引数を渡すIIFE

IIFEは引数を受け取ることも可能です。

// iife-args.js
(function (name) {
  console.log(`こんにちは、${name}さん`);
})("JavaScript");

実行結果：

こんにちは、JavaScriptさん

戻り値を利用するIIFE

IIFEは戻り値を返すこともできます。

// iife-return.js
const result = (function () {
  return 10 + 20;
})();

console.log(result); // 30

このように、計算結果を変数に格納することも可能です。

アロー関数で書くIIFE

IIFEはアロー関数でも書くことができます。

// iife-arrow.js
(() => {
  console.log("アロー関数のIIFE");
})();

より簡潔に書けるため、近年はこちらの書き方がよく使われます。

関連記事：
→ JavaScriptのアロー関数とは？基本から使い方まで徹底解説

IIFEの代表的な使いどころ

変数の汚染を防ぐ

// iife-prevent-global.js
(function () {
  const counter = 0;
})();

グローバルスコープを汚さずに変数を扱えます。

初期化処理の実行

// iife-init.js
(function () {
  console.log("初期化処理を実行");
})();

ページ読み込み時などに一度だけ実行したい処理に適しています。

プライベート変数の実現

// iife-private.js
const counterModule = (function () {
  let count = 0;

  return {
    increment: function () {
      count++;
      console.log(count);
    },
  };
})();

counterModule.increment(); // 1
counterModule.increment(); // 2

外部から直接アクセスできない変数を作ることができます。

IIFEとクロージャの関係

IIFEはクロージャと組み合わせて使われることが多いです。

クロージャを理解すると、IIFEの理解もより深まります。
→ JavaScriptのクロージャとは？仕組みと使い方を基礎から徹底解説

IIFEの注意点

可読性が下がる場合がある

IIFEを多用すると、コードが読みにくくなることがあります。

// iife-nesting.js
(function () {
  (function () {
    console.log("ネストされたIIFE");
  })();
})();

過度な使用は避けるのがポイントです。

現代では使用頻度が減っている

現在は let や const によるブロックスコープや、モジュール機能（ES Modules）の登場により、IIFEの出番は減っています。

ただし、古いコードの理解や特定の用途では今でも重要です。

まとめ

即時実行関数（IIFE）は、以下の特徴を持つ便利な構文です。

• 関数を定義と同時に実行できる
• スコープを限定できる
• グローバル変数の汚染を防げる
• 初期化処理やモジュールパターンに使える

現在では使用頻度はやや減っていますが、JavaScriptの基礎理解として重要な概念です。

関連記事

• JavaScriptのスコープとは？var・let・constの違いを解説
• JavaScriptのクロージャとは？仕組みと使い方を基礎から徹底解説
• JavaScriptのアロー関数とは？基本から使い方まで徹底解説
• JavaScriptの関数とは？基本と使い方を徹底解説