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

No face, No name By: Leandro Martinez

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

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

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

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

無名関数の基本

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

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

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

無名関数の処理の順番

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

Source
console.info('開始');
(function() {
    console.info('無名関数内の処理');
})();
console.info('終了');
Result
function1
結果はこの通り、通常の処理と同じように上から下へ流れていきました。無名関数内も普通に実行されるため、関数の有り無しで処理の順番が変わることはありません。

無名関数のスコープ範囲

Source
var a = 'a';

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

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

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

Source
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);
Result
function3

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

(function() {
    var 変数1;
    var 変数2;
    func1(){
        // 関数1の処理   
    }
    func2(){
        // 関数2の処理
    }
})();
このように処理を作っておけば、複数のプラグインを読み込んだ場合でも変数や関数の重複エラーを避けることが出来ます。

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

引数の指定

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

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

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

function4

応用例

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

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

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

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

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

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

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

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

無名関数のメリット

ここまでで、無名関数の概要はわかったと思いますので、簡単に無名関数のメリットをまとめて見ました。
1.スコープ範囲の限定化により、変数・関数の重複を避けられる

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

 

2.名前を付ける必要がないため、関数名での重複は起こらない

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

 

3.コードのブロック化が出来るため、別の処理にそのまま組み込むことが可能

グローバルスコープを侵さないため、無名関数内の処理をそのまま別のシステムやプラグインに持っていき利用ができます。

 
 

divider

Trackback URL

http://webnonotes.com/javascript-2/function/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>