先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで『即時実行関数』ってよく聞くけど、何ですか？どうして使うんですか？」

先生

「即時実行関数、正式には『IIFE（イーフィー）』と言います。これは作った関数をすぐに実行しちゃう方法です。」

生徒

「どういうときにすぐ実行するんですか？普通の関数と何が違うの？」

先生

「普通は関数を作って、あとで呼び出します。でもIIFEは『作ったその場でパッと実行』します。例えば変数の名前が他の部分とぶつからないようにしたい時や、初期設定の処理をすぐにしたい時に便利なんですよ。」

1. IIFE（即時実行関数）とは？

IIFEは「Immediately Invoked Function Expression」の略で、日本語では「即時実行関数式」と言います。簡単に言うと、関数を作ってすぐに実行する方法のことです。

普通の関数は、あとから名前を呼んで実行しますが、IIFEは名前をつけずに（またはつけても）、その場で動かしてしまいます。


(function() {
  console.log("この関数はすぐに実行されます！");
})();

このように、関数を丸括弧で囲んで、最後に () をつけることで、関数を作った瞬間に実行できます。

2. なぜIIFEを使うの？メリットは？

JavaScriptは昔、変数の管理が難しいことがありました。変数がグローバル（全体）に広がってしまい、別のコードとぶつかることがよくあります。

IIFEを使うと、関数の中だけで使う変数を隠すことができるので、名前がかぶるトラブルを防げます。これを「スコープを作る」と言います。

また、ページの読み込み時に1回だけ初期化処理を実行したいときにも便利です。

3. IIFEの基本の書き方

IIFEは次のように書きます。


(function() {
  // ここに処理を書く
})();

ポイントは、関数を丸括弧 () で囲むことと、最後に () をつけて「すぐ実行する」ことです。

アロー関数でも書けます。


(() => {
  console.log("アロー関数のIIFEもできます");
})();

4. IIFEの活用例①：変数の名前の衝突を防ぐ

たとえば、複数のプログラムが同じ名前の変数を使うとバグの原因になります。IIFEで囲むと、その中だけで変数を使うので、外には影響しません。


var name = "グローバルの名前";

(function() {
  var name = "IIFEの中の名前";
  console.log(name);  // IIFEの中の名前
})();

console.log(name);  // グローバルの名前

このように、同じ名前の変数でもIIFEの中と外で別々に管理できます。

5. IIFEの活用例②：初期設定や1回だけ実行したい処理

ページの読み込み時に一度だけ実行したいコードをIIFEで囲むと、スッキリ書けます。


(function() {
  // ページ読み込み時の初期設定
  console.log("ここで初期化処理をしています");
  // 例えばイベントの登録など
})();

この処理はページが読み込まれた瞬間に1回だけ実行されます。

6. IIFEで外部から値を渡す方法

IIFEの中に外部の値を渡したい場合は、関数の引数として渡せます。


var message = "こんにちは";

(function(msg) {
  console.log(msg);
})(message);  // こんにちは

このようにすると、IIFEの中で外の値を使えます。

7. IIFEの注意点

ES6以降はブロックスコープ（letやconst）が使えるので、IIFEの必要性は少し減りました。
しかし、即時実行で処理をまとめたいときや、古いブラウザ対応のコードではまだ使われます。
読みやすさのために使いどころを考えてください。

8. ポイント整理

JavaScriptのIIFE（即時実行関数）は、作った関数をすぐに実行して、変数のスコープを作ったり初期処理をまとめたりする便利なテクニックです。

丸括弧で関数を囲み、すぐに実行する () を付けるのが基本の書き方です。

古いコードや複雑な処理で今でもよく使われているので、意味を理解して使いこなせるとJavaScriptがもっと楽になります。

まとめ

JavaScriptの即時実行関数であるIIFEは、関数を宣言してすぐに実行するという特徴を持ち、コードの安全性や見通しを整えるためにとても役立つ仕組みです。今回の記事では、IIFEの基本的な書き方や活用例、メリットなどを段階的に確認しました。内容を振り返ると、IIFEは単に「早く実行できる関数」というだけではなく、スコープを限定して変数の衝突を避けたり、初期化処理を整理したりするための大切な構文であることがよく分かります。とくに、JavaScriptの古い仕様では変数が意図せずグローバルになる問題が発生しやすく、異なるスクリプト同士が干渉してしまう状況が少なくありませんでした。IIFEはそうした問題を避ける役割を果たし、安全にコードを管理できるメリットがあります。今ではletやconstを利用したブロックスコープが一般的になり、IIFEの使用頻度は少し下がったとはいえ、複雑な処理の整理や初期化の一度きりの実行など、多くの場面で今も利用価値があり続けています。また、IIFEはアロー関数でも表現できるため、現代的なJavaScriptの記法とも相性がよく、コード全体の構造をすっきりとまとめるときにも非常に便利です。外部の値を引数として渡しながら実行できる点も大きな特徴で、設定値やメッセージを受け取りながら一度だけ実行したい処理をまとめる際には特に効果を発揮します。さらに、IIFEは読み込み時の初期設定をまとめるためにも適しており、画面の準備やデータの初期化、イベント登録などをひとまとまりにして記述することで、後からコードを読む際にも流れを追いやすくなります。複数の機能が混在する大規模なスクリプトでも、IIFEを使うことで必要な処理を整理し、役割ごとに分けて管理しやすくなります。以下に今回学んだ内容を総合的に確認できるサンプルコードをまとめています。記事内で触れた基本的な書き方や、スコープの分離、初期化処理、引数の受け渡しなど、一つ一つの要素を思い出しながら読み返してみると、IIFEの利便性がさらに深く理解できます。

サンプルプログラムまとめ


// 基本のIIFE
(function() {
  console.log("これはすぐ実行されるIIFEです");
})();

// アロー関数のIIFE
(() => {
  console.log("アロー関数のIIFEも実行されました");
})();

// 変数の衝突を防ぐIIFE
var globalName = "外側の名前";

(function() {
  var globalName = "内側の名前";
  console.log(globalName);
})();

console.log(globalName);

// 初期化処理としてのIIFE
(function() {
  console.log("初期設定を実行中です");
  // ここに一度だけ行いたい処理を書く
})();

// 外部値を渡すIIFE
var message = "外から渡したメッセージ";

(function(msg) {
  console.log(msg);
})(message);

先生と生徒の振り返り会話

生徒

「先生、今回の学習でIIFEの仕組みがすごく分かりやすくなりました。関数をそのまま実行するだけじゃなくて、スコープを閉じ込める役割があることにも驚きました。」

先生

「その理解はとても大事ですね。IIFEは昔からJavaScriptの安全なコードの書き方として重宝されてきました。スコープを作ることで、思わぬ変数の上書きを防げるんですよ。」

生徒

「ページの読み込み時に初期化をまとめて書けることも便利ですね。コードが分かりやすくなりそうだと思いました。」

先生

「そのとおりです。初期化処理を一か所にまとめられるので、読みやすさもぐっと良くなります。外部の値を引数として渡す方法も覚えておくと応用の幅が広がりますよ。」

生徒

「アロー関数版のIIFEも書けるのもいいですね。今後のコードで活かしていけそうです。」

先生