(function($) {})(jQuery);って何？って思ったからいろいろ試してみた記録

どうでもいい話なのですが、inputタグのautocomplete属性について先日はじめてちゃんと知った気がしました（今更

それと日記見返すと、昔の方が雑記的だなぁと思った。。
うーん、そう考えるとローカルのもったいないメモは多そうだ。
今度書き出せたらいいなぁ。。

で本題ですが、先日jQueryを使っているプラグインのコードを見てて「(function($) {})(jQuery);」ってどういう意味？て思ったので、調べたりとかしてました。
謎って思ったのはおおまかに３つ。

• 何故全体を括弧で囲む必要があるのか。
• function($)の「$」って何？
• ２個目の括弧の中の「jQuery」って何？

これ、ほぼ「(function($) {})(jQuery);」の全てが謎っていってるようなものですねw

http://q.hatena.ne.jp/1226297257
上記のURL先を参考になんとなく理解してみたのでまとめてみる。
しかしちゃんとした解決はしていないと思うw
まぁ一応記録ということで。。

何故全体を括弧で囲む必要があるのか。

無名関数にしてコードを外部と分離して使うため。
大まかにいうとこんな感じなのだろうか？
確かに全部functionの中になるから、関数名やらがかぶる心配を考慮しなくていいのかも？と思いました。
でも中で完結させてるのに外でも使えるってなんだかすごい。。

function($)の「$」って何？

上記URL中にある、下記のコードを実行してみたらわかりました。

(function (x){ alert(x); })("hoge");

"hoge"が来ました。
どうやら２個目の括弧の中身が引数として渡されているものよう。
ってことは「$」は「jQuery」ってことか。なるほど。

２個目の括弧の中の「jQuery」って何？

２個目の括弧の中身自体は、その関数への"handle"らしいです。
それをかくことによって無名関数が使えるようになる？どういうことだろう？
とりあえず２個目の括弧がどういう挙動をするのかを確認してみる。

(function (a){a})(console.log("aa"));
(function (a){console.log(a)})("aaa");
(function (a){console.log("hoge")})(console.log("aaaa"));

結果

aa
aaa
aaaa
hoge

1個目がなんかおかしく感じる。２回「aa」て表示されてもいいと思ったんだけどなぁ。
３個目はどっちも吐かれてるのに・・。まぁいいか。（何
とりあえずまぁ引数みたいなものだなと思っとくことにする。
しかしこうなると、「jQuery」はどこからきてるのだろう・・。
http://hisasann.com/housetect/2008/06/jquery_1.html
と、上記のサイトを発見。jQueryにアクセスする方法が書いてある。

var jQuery = window.jQuery = window.$ = function (ele) {

どうやらこれで外でも使えるようになってるらしい？

(function(hoge) {console.log(hoge('#test'))})($);

ほう。。
windowオブジェクトに突っ込めばつかえるのか・・。var jQueryにわざわざつっこむ理由はなんだろうか・・と思ったがそこは今は関係ないのでスルー。

(function() {window.hoge = "aaaa"})();
(function(huga) {console.log(huga)})(hoge);

結果

aaaa

おぉ。使える。。
var なしの変数に入れるのとどう違うんだろう？なんてちょっと思ってみたり。。（何

自分なりなまとめ

• 何故全体を括弧で囲む必要があるのか。

　→無名関数にして中のコードを外部と分離して使うため。

• function($)の「$」って何？

　→２個目の括弧の中身（つまりjQuery）

• ２個目の括弧の中の「jQuery」って何？

　→windowオブジェクトにつっこまれてるjQueryっていうオブジェクト(?)

とまぁ、こんな感じ？でした！
なんとなくモヤモヤも晴らせたし、いろいろ試せて楽しかったです！