JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの匿名ラッパー関数(IIFE)とは?使い方を徹底解説

匿名ラッパー関数(Anonymous Wrapper Function)は、コードスニペットやJavaScriptライブラリ、個々の関数などを包み込むために使われる手法です。コードの可視性や名前空間(namespace)を制御することで、他のライブラリや外部スクリプトとの名前の衝突・競合を防ぐことができます。

この目的のために広く利用されているのが、IIFE(即時実行関数式：Immediately Invoked Function Expressions)です。IIFEは定義されたその場で即座に実行される関数式であり、関数内部で宣言された変数は外部からアクセスできないため、グローバル名前空間を汚染しません。

IIFEを使うメリット

  • グローバル変数の汚染を防止 … 変数や関数がローカルスコープに閉じ込められるため、windowオブジェクトが不要なプロパティで溢れません。
  • 他ライブラリとの競合を回避 … jQueryなど複数のライブラリを読み込む環境でも、同じ名前の変数や関数が衝突するリスクを減らせます。
  • カプセル化による安全性の向上 … 外部から触られたくない内部処理を隠蔽できます。
  • 初期化処理の自動実行 … ページ読み込み時に一度だけ実行したいセットアップ処理に最適です。

JavaScriptでの匿名ラッパー関数の実装例

以下は、IIFEを使って匿名ラッパー関数を実装した具体的なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>Anonymous wrapper functions in JavaScript</h1>
<div class="result">0</div>
<br />
<script>
    let resEle = document.querySelector(".result");
    (function () {
        resEle.innerHTML =
        "このコードはIIFE内にあるため、自動的に実行されます";
    })();
</script>
</body>
</html>

実行結果

JavaScriptの匿名ラッパー関数(IIFE)とは?使い方を徹底解説

ページを開くと、(function () { ... })() の部分が即座に評価され、画面には「このコードはIIFE内にあるため、自動的に実行されます」というメッセージが表示されます。誰もこの関数を明示的に呼び出していなくても、定義と同時に実行される点がIIFE最大の特徴です。

構文のポイント

IIFEの基本構文は以下のとおりです。

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

外側の () は「関数式として扱う」ためのもので、末尾の () がその場での呼び出しを意味します。また、ES6以降ではアロー関数を使って次のようにより簡潔に書くこともできます。

(() => {
  // アロー関数版のIIFE
})();

引数を受け渡すことも可能

IIFEには引数を渡すこともでき、jQueryとの連携でよく使われるパターンがあります。

(function ($) {
  // $ は安全にjQueryを参照できる
})(jQuery);

このように書くことで、グローバルスコープ上の $ が他のライブラリによって上書きされていても、IIFE内部では確実にjQueryを参照できます。モダンな開発ではESモジュール(import / export)によるスコープ管理が主流ですが、レガシーコードの保守や軽量スクリプトの作成において、IIFEは今なお有用なテクニックです。

  1. JavaScriptのアロー関数（太い矢印関数）とは？基本構文と使い方をわかりやすく解説

    アロー関数（太い矢印関数）とは 」という矢印のような記号を使うことから、「太い矢印関数（Fat Arrow Function）」とも呼ばれています。 従来のfunctionキーワードを使った定義と比べて記述が大幅に簡潔になるほか、thisの扱いがレキシカル（語彙的）になるという特徴があり、現代のJavaScript開発では広く使われています。 基本構文 アロー関数の基本構文は以下のとおりです。 { } 」を記述するだけです。また、処理が1行で済む場合は、波括弧（{ }）とreturn文を省略して、さらに短く書くこともできます。 a + b; サンプルコード 次のコードは、JavaScr

  2. JavaScriptで無名関数（匿名関数）に引数を渡す方法をわかりやすく解説

    JavaScriptにおける無名関数（匿名関数）は、名前を持たない関数であり、変数に代入したり、イベントリスナーのコールバックとして利用したりする際に非常に便利です。通常の関数と同様に、無名関数にも引数を渡すことができます。ここでは、具体的なコード例を通じてその方法を解説します。 無名関数への引数の渡し方 無名関数に引数を渡す基本的な方法は、関数を変数に代入し、その変数を通じて呼び出す際に引数を指定することです。以下は、ボタンをクリックすると無名関数が呼び出され、引数を受け取って計算結果を表示するサンプルコードです。 サンプルコード <!DOCTYPE html> <ht