JavaScript 即時関数の使い方：基本の書き方から現代の開発での活用シーンまで解説

2026年5月17日

関数

JavaScriptの開発において、関数を定義すると同時に実行する「即時関数（IIFE）」という手法は、長年多くのエンジニアに重宝されてきました。

現代のJavaScriptモジュールシステム（ES Modules）が標準となった現在でも、特定のスコープを限定したい場合や、非同期処理を即座に開始したいシーンにおいて、即時関数は非常に有効な手段です。

本記事では、即時関数の基礎的な書き方から、2026年現在の開発環境における具体的な活用シーンまで、エンジニアが知っておくべき知識を詳しく解説します。

目次 [ close ]

即時関数（IIFE）とは何か

即時関数とは、英語で「Immediately Invoked Function Expression」と呼ばれ、その頭文字をとってIIFEと略されます。

これは名前の通り、関数を定義した直後にその場で実行されるJavaScriptの構文を指します。

通常の関数は、一度定義してから別の場所で関数名を呼び出すことで実行されます。

しかし即時関数は、定義と実行を一つの式として記述するため、プログラムの中で一度きりの処理を行う際に非常に適しています。

また、即時関数の最大のメリットは、関数内部に変数を閉じ込めることでグローバルスコープを汚染しないという点にあります。

即時関数の基本構文

即時関数の最も一般的な書き方は、関数全体をグループ化演算子である括弧で囲み、その後に実行のための括弧を付ける形式です。

JavaScript

// 基本的な即時関数の書き方
(function() {
    const message = "即時関数が実行されました";
    console.log(message);
})();

実行結果

即時関数が実行されました

この構文において、最初の括弧 (function() { ... }) は、関数を「宣言」ではなく「式」として評価させる役割を持っています。

そして末尾にある () が、その評価された関数を即座に実行するトリガーとなります。

もし最初の括弧がない場合、JavaScriptエンジンはそれを通常の関数宣言と見なしてしまい、構文エラー（SyntaxError）が発生してしまいます。

そのため、関数を式として扱うための括弧は必須であることを覚えておきましょう。

アロー関数による即時関数

モダンなJavaScript開発では、function キーワードの代わりにアロー関数を使用した即時関数も頻繁に利用されます。

アロー関数を用いることで、より簡潔に即時関数を記述することが可能になります。

JavaScript

// アロー関数を用いた即時関数の書き方
(() => {
    const tech = "Modern JavaScript";
    console.log(`${tech}の即時関数です`);
})();

実行結果

Modern JavaScriptの即時関数です

アロー関数の場合も、関数全体を () で囲むルールは共通です。

ただし、アロー関数には this のバインディングが周囲のスコープを継承するという特性があるため、従来の関数式とは挙動が異なる場合がある点に注意が必要です。

即時関数が必要とされる主な理由

なぜ、わざわざ定義してすぐに実行するという特殊な形式をとる必要があるのでしょうか。

その主な理由は、「変数のスコープを限定し、外部からの干渉を防ぐこと」にあります。

グローバルスコープの汚染防止

大規模なアプリケーション開発において、すべての変数をグローバルスコープに定義してしまうと、変数名の競合が発生するリスクが高まります。

例えば、複数のライブラリを読み込んでいる場合に、同じ temp という変数名が使われていると、意図しない値の上書きが発生してしまいます。

即時関数を使用すると、その内部で宣言された変数は関数の外部からは一切アクセスできなくなります。

JavaScript

(function() {
    var privateValue = "外部からは見えません";
    console.log(privateValue);
})();

// 以下のコードはエラーになります
try {
    console.log(privateValue);
} catch (e) {
    console.log("エラー: privateValueは定義されていません");
}

実行結果

外部からは見えません
エラー: privateValueは定義されていません

このように、一時的な処理のために変数を使い捨てにしたい場合、即時関数は非常に強力なツールとなります。

プライベート変数の実現（クロージャの活用）

即時関数は、特定の変数を外部から隠蔽しつつ、特定のメソッド経由でのみ操作を許可する「カプセル化」を実現するためにも使われます。

これは、即時関数の戻り値として関数を返すことで、内部の状態を保持し続ける「クロージャ」の仕組みを利用したものです。

JavaScript

const counter = (() => {
    let count = 0; // この変数は外部から直接書き換えられない

    return {
        increment: () => {
            count++;
            return count;
        },
        getValue: () => count
    };
})();

console.log(counter.increment());
console.log(counter.increment());
console.log(counter.getValue());

実行結果

1
2
2

この例では、count 変数は即時関数のスコープ内に閉じ込められており、外部から counter.count = 10 のように直接操作することはできません。

データの完全性を守るためのデザインパターンとして、今でも有用なテクニックの一つです。

即時関数に引数を渡す方法

即時関数は通常の関数と同様に、実行時に引数を渡すことができます。

これを利用することで、グローバルオブジェクトをエイリアス（別名）で扱ったり、外部の値を安全に内部に持ち込んだりすることが可能になります。

JavaScript

((global, name) => {
    console.log(`${name}さん、こんにちは。現在のURLは ${global.location.href} です。`);
})(window, "ユーザー");

このコードでは、第1引数に window オブジェクトを、第2引数に文字列を渡しています。

関数の内部では global という名前で window にアクセスできるため、コードの可読性が向上し、さらにミニファイ（圧縮）した際にも変数名が短くなるというメリットがあります。

現代のJavaScript開発における即時関数の活用シーン

2026年現在の開発では、ES Modules (import/export) が標準となり、ファイル単位でスコープが分離されるようになりました。

そのため、以前ほど「スコープを分けるためだけ」に即時関数を使う機会は減っています。

しかし、現代的な開発特有の課題を解決するために、依然として即時関数が活躍する場面がいくつか存在します。

非同期処理（Async/Await）の即時実行

最も頻繁に見かけるケースは、トップレベル以外の場所で await を使用したい場合です。

多くの環境でトップレベル await がサポートされていますが、関数内部やスクリプトの中ほどで非同期処理をまとめたい場合には、非同期即時関数（Async IIFE）が非常に便利です。

JavaScript

(async () => {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log("データ取得成功:", data);
    } catch (error) {
        console.error("エラーが発生しました:", error);
    }
})();

このように記述することで、複数の非同期処理を一つのブロックにまとめ、その実行結果を待機する処理を簡潔に書くことができます。

特に、スクリプトの初期化時にAPIから設定値を取得するような場面では欠かせないパターンです。

複雑な初期化ロジックの整理

変数の宣言を const で行いたいが、その初期値を決めるためのロジックが複雑な場合、即時関数が役立ちます。

条件分岐が多い初期化処理を即時関数の中に閉じ込めることで、コードの可読性を保ちつつ const を活用できます。

JavaScript

const config = (() => {
    const environment = process.env.NODE_ENV;
    if (environment === 'production') {
        return { debug: false, endpoint: 'https://prod.example.com' };
    } else if (environment === 'staging') {
        return { debug: true, endpoint: 'https://stg.example.com' };
    } else {
        return { debug: true, endpoint: 'http://localhost:3000' };
    }
})();

console.log(`現在のエンドポイント: ${config.endpoint}`);

即時関数を使わない場合、config を let で宣言して後から値を代入する必要がありますが、即時関数を使えば再代入不可な定数として定義できるため、バグの混入を防ぐことができます。

サードパーティ製スクリプトの影響遮断

広告タグや解析ツールなど、外部から読み込むサードパーティ製のJavaScriptを作成する場合、即時関数は必須の技術です。

外部スクリプトが導入先のサイトのグローバル変数を汚染したり、逆に導入先のサイトの変数によって動作が破壊されたりすることを防がなければならないからです。

すべての処理を一つの巨大な即時関数で包み込むことで、既存の環境に一切影響を与えない安全なスクリプトを提供することが可能になります。

即時関数を使用する際の注意点

即時関数は非常に便利ですが、乱用するとコードの複雑性を高める原因にもなります。

使用するにあたって、以下のポイントに注意してください。

セミコロンの欠如による不具合

即時関数の直前の行にセミコロンがない場合、予期せぬ実行エラーが発生することがあります。

JavaScriptエンジンが、前の行の末尾と即時関数の開始括弧を繋げて解釈してしまうためです。

JavaScript

const user = "Alice" // ここにセミコロンがない
(() => {
    console.log("Hello");
})();

このコードは、"Alice"() という関数呼び出しとして解釈され、"Alice" is not a function というエラーになります。

この問題を回避するために、即時関数の前にセミコロンを付ける慣習（;(() => { ... })();）も存在します。

デバッグの難易度

名前のない即時関数（匿名関数）を多用すると、ブラウザのデバッガーやエラーログのスタックトレースにおいて、エラー箇所が単に (anonymous) と表示されてしまいます。

これを防ぐためには、即時関数に名前を付ける「名前付き即時関数」を利用することが推奨されます。

JavaScript

(function initializeApp() {
    // 処理内容
    console.log("アプリを初期化します");
})();

名前を付けておけば、エラーが発生した際に関数名が表示されるため、原因の特定が容易になります。

即時関数とESモジュールの比較

現代のJavaScriptにおいては、多くの「即時関数で解決していた課題」が他の機能で置き換えられています。

目的	即時関数での解決策	現代の推奨される解決策
スコープの分離	即時関数で全体を囲む	ES Modules (ファイル単位のスコープ)
プライベート変数	クロージャを利用する	クラスのプライベートフィールド (#)
一時的なブロック	即時関数で囲む	ブロックスコープ ({ let x = … })
非同期処理の待機	Async IIFE	Top-level await