jQueryの基本的な書き出し比較とまとめ

2015/11/17 JavaScript/jQuery  このエントリーをはてなブックマークに追加
社内でJavaScript職人の地位が確立されてきた僕です。
元々コーディング大好きマンなので楽しい限りです。
PHPを忘れそうですがw

今回は後輩(デザイナー)から、jQueryの書き出し(書き始め方?)が色々あってよくわからないと言われたので、比較とまとめをしていきます。
おそらく、後輩に限らず、デザイナーやコーダーの方がよく使うものは下記辺りではないかと。印象も参考までに載せておきます。


1)$(function(){...});←多分1番使う

2)$(document).ready(function(){...});←次によく使う

3)jQuery(function($){...});←あまり使わないけど、検索したら見かける

4)jQuery(document).ready(function($){...});←WordPressでよく見る

5)(function($){...})(jQuery);←使わないけどプラグインの中に書いてある


こんな感じらしい。
おそらく日常的に使っている人でも、正確に比較と説明ができるという方は少ないかもしれません。わからなくても書けますし。順に解説します。

1)$(function(){...});

おそらく1番よく使われているし、1番見かける形式。
プラグインの解説ページでも見かけますし、省略されている場合は、大体これで囲めば動きます。

「clickとかの動作をこの中に書いておけば動く!」
「jQueryはこの中に書いておけばOK」
「プラグインの読み込みをここで行えば良いんだよね?」

くらいの捉え方をしている人も多いのではないでしょうか。
それで大丈夫です。コピペできるようにどこかにメモしておくか、辞書登録でもしておくと良いでしょう。


2)$(document).ready(function(){...});

実はこれ、(1)の$(function(){...});と同じ意味です。
どっちで書いてもOKです。好きな方でどうぞ。

「じゃあ何でそんな書き分けが横行してるんだ?」「両方使ってるサイトもあるじゃないか」という話になるんですが、これはもう趣味としか言い様がないです。

たまに「$(function(){...});には、click等の動作のイベントを書くところで、$(document).ready(function(){...});にはページを読み込んだ時の処理を書くためのものだ」と解説されているページがありますが、どちらも「ready関数を使用します。DOMが操作・解析が可能になったタイミングで実行します。」という意味なので、その解釈は間違いです。

ただ、これはメンテナンス効率と運用的には良いと個人的には思います。
複数人でメンテナンスをする場合、clickやhover等の動作イベントとページ読み込み時に反映される処理を全て$(function(){...});に書いていると、「どれが最初に行われているかわかりにくい」「どこを見ればいいかわからない」という質問が出がちです。

なので、ページ読み込み時に反映されるものだけ$(function(){...});に書くように私もしています。まぁ、先述の通り趣味ですよね。


3)jQuery(function($){...});
4)jQuery(document).ready(function($){...});

意味は(1)の$(function(){...});と同じです。
(4)は(2)の$(document).ready(function(){...});と同じだと言う方がわかりやすいでしょうか。

function($)は$=jQueryにしますよ、という命令なので、function(jx)としたら、jx=jQueryになるため、$('p').toggle();はjx('p').toggle();と書けるようになります。

この書き方はどこで登場するのかというと、例えばjQueryとPrototype.jsを共存させる場合です。この囲った中のコードがjQueryなのか、それともPrototype.jsなのかを区別するためには、この書き出しが必須です。WordPressでjQueryを使う場合の書き方でよく見かけるのはこのためです。
$(function(){...});の省略前の形なので、知っておいて損はないでしょう。


5)(function($){...})(jQuery);

プラグイン内でよく見かける形式。
いわゆる即時関数と呼ばれるもので、$(function(){...});が「DOMが操作・解析が可能になったタイミングで実行します」という意味だったのに対し、こちらは「DOMとか関係なく、読み込まれた時点で即実行します」という意味です。

この処理がbodyタグより前で行われる場合、この中に$('p').toggle();とか書いても動きません。何故ならまだDOM(pタグ)が読み込まれていないからです。動かなくて当然です。

「どうしてもこの中に$('p').toggle();を書きたいの!」という場合は、(function($){$(function(){ $('p').toggle(); });})(jQuery);とか、内側に(1)の形式を追加すると動きます。


以上です。
長々と解説しましたが、簡単に言えば

(1)〜(4)の形式のどれかでjQueryは囲むのだ

と覚えておけば、大体のことには対応できます(大雑把)
(function($){...})(jQuery);とか、プラグインやfunctionを作る人は必須でしょうが、制作されたプラグインを利用する側の人は、覚えても必要とする場面がないかもしれない……作ると勉強になるので、おすすめなんですけどね。

コメント

*
*

<< Chart.jsの棒グラフ(Bar)で、数値(data)を常時表示にする方法 | 合同勉強会in大都会岡山2015 #gbdaitokai に行ってきた >>