Web’Notes

jQueryの無名関数「(function(){})()」の使い方

No face, No name By: Leandro Martinez

javascriptのサンプルソースで無名関数「(function(){})()」が使われていることが良くあります。

いつ実行されるのか？どのように使うのか？最初に見たときは何に使うのかがまったくわかりませんでした。

今回は、この無名関数について調べた結果を紹介します。

1. 無名関数の基本
2. 無名関数の処理の順番
3. 無名関数のスコープ範囲
4. 無名関数に引数を指定する方法
5. 無名関数のメリット

無名関数の基本

まず、基本的な無名関数の形を紹介します。このように、function(){}で囲い{}内に処理を記述します。

カッコが多くてわかりずらいですが、基本形として覚えて置いてください。

(function() {
    // 処理
})();

無名関数の処理の順番

処理の実行順序を確認してみます。

console.info('開始');
(function() {
    console.info('無名関数内の処理');
})();
console.info('終了');

結果はこの通り、通常の処理と同じように上から下へ流れていきました。無名関数内も普通に実行されるため、関数の有り無しで処理の順番が変わることはありません。

無名関数のスコープ範囲

var a = 'a';

(function() {
    var b = 'b';
    console.info(a);
    console.info(b);
})();

console.info(a);
console.info(b);

スコープ範囲はこの通り、関数の外で定義した変数は関数内で使用可能となるが、関数内で定義した変数のスコープ範囲は関数内のみとなるため最後の「console.info(b);」でエラーとなります。

グローバル変数で「a」「b」を定義し、無名関数内で同名のローカル変数を定義することも出来ます。

var a = 'a';
var b = 'b';

(function() {
    var a = 'a2';
    var b = 'b2';
    console.info(a);
    console.info(b);
})();

console.info(a);
console.info(b);

この方法を使用すれば、無名関数内での定義が他のスクリプトに影響を及ぼすことがありません。そのため、jQueryのプラグインなどでは良く、以下のような作りになっています。

(function() {
    var 変数1;
    var 変数2;
    func1(){
        // 関数1の処理   
    }
    func2(){
        // 関数2の処理
    }
})();

無名関数に引数を指定する方法

無名関数には、以下の様に引数を指定することも出来ます。

var a = 'a';
var b = 'b';

(function(a, b) {
    console.info(a);
    console.info(b);
})(a, b);

この引数の指定をする方法でよく利用される記述に以下のものがあります。

(function($) { 
    // DOMの準備が完了した後、処理を実行
    $(function() { 
        // 処理 
    }); 
})(jQuery); 

「$(function()」は「jQuery(document).ready(function(){})」の省略形で、DOMの準備が完了後に処理を実行してくれます。

これだけでも良いのですが、例えば以下のように記載されているとエラーとなってしまうため、「jQuery」のオブジェクトを引数として渡し、「$ = jQuery」として利用できるようにしています。

var $ = 'テスト' //$を変数として利用

// $は変数のためエラーとなる
$(function() { 
    // 処理 
}); 

また、変数名は任意のためjQueryオブジェクトを「$」以外で使用したければ以下のように記述することも出来ます。

// abc = jQueryとする
(function(abc) { 
    // DOMの準備が完了した後、処理を実行
    abc(function() { 
        // 処理 
    }); 
})(jQuery); 

無名関数のメリット

「無名関数のスコープ範囲」に書いた通り、スコープ範囲が関数内となるため重複を回避できるようになります。

「無名関数」はその名前の通り、関数名が不要なため、名称を考える手間が要らず、また名前が無いため関数名での重複も起こりえません。