JavaScript 即時実行関数（IIFE: Immediately Invoked Function Expression）

1. IIFEの基本構文

IIFEは、定義と同時に実行されるJavaScriptの関数です。以下が基本的な構文です。

(function () {
    console.log("This function runs immediately!");
})();

2. IIFEを分解して理解する

以下の例を見て、IIFEの構造を分解して考えましょう。

// 1. 通常の無名関数
function () {
    console.log("IIFE!");
}

// 2. 無名関数を丸括弧で囲む
(function () {
    console.log("IIFE!");
})

// 3. 即時実行のためにもう一つの括弧を追加
(function () {
    console.log("IIFE!");
})();

3. 必要最小限に注目する

IIFEは以下の2つのカッコに注目すると覚えやすいです。

• 外側の括弧: 関数全体を「式」に変換
• 内側の括弧: 関数を即時実行

4. 実践例で練習

スコープを分ける

IIFEを使って変数のスコープを限定できます。

(function () {
    let temp = "Temporary Variable";
    console.log(temp); // "Temporary Variable"
})();

console.log(typeof temp); // "undefined"

引数付きのIIFE

IIFEに引数を渡すこともできます。

(function (name) {
    console.log(`Hello, ${name}!`);
})("Alice");

モダンな書き方

アロー関数を使うとスッキリ書けます。

(() => {
    console.log("Hello, modern IIFE!");
})();

5. 練習問題

問題1

IIFEを使って”Hello, World!”を出力してください。

(function () {
    console.log("Hello, World!");
})();

問題2

引数付きIIFEを作り、2つの数を足した結果を出力してください。

(function (a, b) {
    console.log(a + b);
})(3, 4);

6. 記憶のコツ

「(関数)実行するよ！」と覚えるとわかりやすいです。

// 覚えやすい流れ
(function() { console.log("実行するよ！"); })();

7. 実際に手を動かす

コードを自分で書いて慣れることが一番重要です。上記の問題を試してみましょう！