5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

(function() {...})();って?無名関数・即時関数とスコープ - jQueryを書けるようになりたい(2)

Last updated at Posted at 2019-10-15

jQueryのプラグインでよく見かけるこの記述。

(function() {
    // 何らかの処理
})();

プラグイン全体をこれで囲っていることが多いのでどういう意味なのか調べてみました。
また他の書き方も見かけるのでそちらも少し紹介します。

この記述の意味とメリット

(function() {
    // 即実行される処理
})();

これは即時関数もしくは無名関数と呼ばれるものです。その名の通り読み込まれると中の処理がすぐ実行されます。実行タイミングとしては素のままで書くのと同じです。
(私が調べた範囲では即時関数と書いてあったり無名関数と書いてあったりしましたが、おそらく意味的にはどちらも正しいと思います。即時関数かつ無名関数。)

なぜこの書き方をするのかというと、スコープを汚染しないためです。
唐突に出てきた「スコープ」ですが、ひとことでいうと「変数の有効範囲」です。
スコープについては分かりやすい説明をしてくれているサイトがあったのでこちらを参考にしてください。

こうしてプラグイン内で使われている変数を隔離することで、色んなプラグインを同時に使っても変数名の重複が起こらないようになっています。

さらに安全な即時関数の定義

(function($) {
    // 即実行される処理
})(jQuery);

こういった書き方もよく見かけると思います。
これは即時関数の引数にjQueryオブジェクトを渡しています。引数にオブジェクトを渡す・・・?安心してください、私もよく分かっていません。
これは後ろのカッコにあるjQueryを、関数の中では$で扱うことができるというものです。
特に明示しなくてもjQuery内では$=jQueryなんですが、あえてこう書くことで、javascriptを使った他のライブラリとの衝突を防ぐことができます。

:arrow_up: @j5c8k6m8さんに補足していただきましたのでちょっと訂正!

特に明示しなくてもjQueryを読み込むと
$=jQuery
として定義されています。しかしこれは「スコープ」のところで出てきた「グローバルスコープ」に定義されている「グローバル変数」です。
jQueryを読み込んだ後で、$をグローバル変数として定義している別のライブラリを読み込むと、$が上書きされてしまい、$=jQueryとして利用できなくなってしまいます。
即時関数を使って上記のように書くと、即時関数の中では安心して$=jQueryとして利用することができます。
これについては@j5c8k6m8さんのコメントもぜひ参考にしてください!

参考になったサイト・ブログなど

5
1
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?