JavaScript 匿名関数と即時実行関数式 (IIFE)

JPKODA 編集部 May 7, 2026

匿名関数（Anonymous Functions）と即時実行関数式（IIFE）は、JavaScriptにおける強力なツールです。これらはコードの組織化を強化し、名前の衝突を防ぎ、バリアブル（変数）のスコープを精密にコントロールすることを可能にします。

これらのコンセプトを理解することは、クリーンでメンテナンス性が高く、効率的なJavaScriptコードを書くために不可欠です。特に大規模で複雑なプロジェクトに取り組む際には避けて通れません。

本章では、匿名関数とIIFEの詳細を深く掘り下げ、これらを効果的に使いこなすための強固な基礎を築いていきます。

1. 匿名関数

匿名関数とは、文字通り「名前を持たないファンクション」のことです。名前を必要とする通常のファンクションデクラレーションとは異なり、匿名関数は function キーワードを使用して定義されますが、その後に識別子（名前）が続きません。

匿名関数は通常、他のファンクションに渡す引数（コールバック）として、あるいはバリアブルに代入して使用されます。

1.1 基本的な構文

匿名関数の基本的なシンタックスは以下の通りです。

function() {
  // ファンクション本体
}

注意点として、function キーワードの後に名前がありません。

1.2 匿名関数をバリアブルに代入する

匿名関数の最も一般的な用途の一つは、それらをバリアブルに代入することです。これによりファンクションエクスプレッションが作成されます。

const myFunction = function() {
  console.log("これはバリアブルに代入された匿名関数です。");
};

myFunction(); // ファンクションを呼び出す

この例では、匿名関数が myFunction というバリアブルに代入されています。その後、そのバリアブル名に括弧を付けることで、このファンクションを呼び出すことができます。

1.3 匿名関数としてのコールバック (Callbacks)

匿名関数のもう一つの主要なユースケースは、コールバックファンクションとしての利用です。コールバックとは、別のファンクションに引数として渡され、そのファンクションの処理が完了した後に実行されるファンクションのことです。

function greet(name, callback) {
  console.log("こんにちは、" + name + "さん！");
  callback();
}

greet("Alice", function() {
  console.log("コールバックファンクションが実行されました。");
});

この例では、function() { console.log("コールバックファンクションが実行されました。"); } という匿名関数が callback パラメータとして greet ファンクションに渡されています。greet は挨拶を表示した後に、このコールバックを実行します。

1.4 匿名関数のメリット

簡潔性: 別途名前付きのファンクションデクラレーションを書くことなく、インラインでファンクションを定義できます。
スコープ制御: コールバックとして使用する場合、不要なグローバルバリアブルの作成を避け、スコープをクリーンに保つのに役立ちます。
柔軟性: 引数として渡したり、バリアブルに代入したりすることが容易なため、コードに高い柔軟性をもたらします。

1.5 示例：配列メソッドでの匿名関数の活用

匿名関数は、map、filter、forEach といったアレイ（配列）メソッドと組み合わせて頻繁に使用されます。

const numbers = [1, 2, 3, 4, 5];

// map と匿名関数を使用して、各数値の二乗を計算
const squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers); // 出力: [1, 4, 9, 16, 25]

// filter と匿名関数を使用して偶数を取得
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // 出力: [2, 4]

これらの例では、匿名関数を使用してアレイ要素の変換やフィルタリングのロジックを定義しています。

2. 即時実行関数式 (IIFE)

即時実行関数式（IIFE：Immediately Invoked Function Expression、発音は「イフィー」）は、定義された直後に実行されるJavaScriptのファンクションです。IIFEは新しいスコープを作成するために使用され、これによりホイスティング（巻き上げ）を回避し、グローバルスコープの汚染を防ぐことができます。

2.1 基本的な構文

IIFEの基本的なシンタックスは、匿名関数を括弧で包み、その直後に呼び出しの括弧を付ける形式です。

(function() {
  // ファンクション本体
})();

function() { ... } の外側にある最初の括弧 () は、ファンクションを一つのエクスプレッション（式）に変える役割を持っています。末尾にある2番目の括弧 () が、そのファンクションを即座に呼び出します。

2.2 なぜ IIFE を使うのか？

カプセル化 (Encapsulation): IIFEは新しいスコープを作成します。つまり、IIFE内部でデクラレーションされたバリアブルは外部からアクセスできません。これにより名前の衝突を防ぎ、グローバルスコープをクリーンに保てます。
グローバルスコープ汚染の回避: コードをIIFEの中に封じ込めることで、意図しないグローバルバリアブルの作成を防ぎ、他のスクリプトとの衝突を回避できます。
モジュールパターン（歴史的背景）: ESモジュールが導入される前、IIFEはJavaScriptでモジュールパターンを実装するためによく使われていました。プライベートなバリアブルやメソッドを作成する手段を提供していたのです。

2.3 示例：基本的な IIFE

(function() {
  var message = "IIFE からの挨拶！";
  console.log(message);
})();

// console.log(message); // エラーになります。'message' はグローバルスコープで定義されていないため。

この例では、バリアブル message はIIFE内部で定義されており、外部からアクセスすることはできません。

2.4 IIFE へのパラメータの受け渡し

通常のファンクションと同様に、IIFEにも引数を渡すことができます。

(function(name) {
  console.log("こんにちは、" + name + "さん！");
})("Bob"); // "Bob" をパラメータとして渡す

この例では、文字列 "Bob" が引数としてIIFEに渡され、コンソールに "こんにちは、Bobさん！" と表示されます。

2.5 IIFE からの戻り値

IIFEは値を返すこともでき、そのリザルトをバリアブルに代入することが可能です。

const result = (function() {
  const x = 10;
  const y = 20;
  return x + y;
})();

console.log(result); // 出力: 30

2.6 示例：IIFE によるバリアブルの保護

var counter = 0;
function incrementCounter() {
  counter++;
}
incrementCounter();
incrementCounter();
console.log(counter); // 出力: 2

// IIFE を使用してプライベートなカウンターを作成
const increment = (function() {
  let privateCounter = 0;
  
  function changeBy(val) {
    privateCounter += val;
  }

  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };
})();

increment.increment();
increment.increment();
console.log(increment.value()); // 出力: 2
// console.log(privateCounter); // エラーになります。privateCounter は外部スコープから見えないため。

この例では、IIFEを使用して外部から直接アクセス・修正できないプライベートカウンターを作成しています。操作は返却された特定のメソッドを通じてのみ行われます。

2.7 IIFE の現代的な代替案

現代のJavaScriptにおいてESモジュール (ES Modules) が導入されたことで、IIFEの必要性は以前より減少しました。ESモジュールはコードをカプセル化し、グローバルスコープの汚染を防ぐための標準的な仕組みを提供しているからです。

しかし、古いコードベースの保守や、即席で独立した一時的なスコープを作成したい場合など、IIFEは依然として有用なテクニックであり続けています。