jquery.jsを読み解く

第1回 jQueryライブラリ(1~171行目)

この記事を読むのに必要な時間:およそ 6 分

バージョン

0103:   // The current version of jQuery being used
0104:   jquery: "1.2.2",
0105: 

104行目は,バージョン情報を定義しています。

size()

0106:   // The number of elements contained in the matched element set
0107:   size: function() {
0108:     return this.length;
0109:   },
0110:   
0111:   // The number of elements contained in the matched element set
0112:   length: 0,
0113: 

length と size は,それぞれ要素の個数とその個数を返す関数です。

get()

0114:   // Get the Nth element in the matched element set OR
0115:   // Get the whole matched element set as a clean array
0116:   get: function( num ) {
0117:     return num == undefined ?
0118: 
0119:       // Return a 'clean' array
0120:       jQuery.makeArray( this ) :
0121: 
0122:       // Return just the object
0123:       this[ num ];
0124:   },
0125: 

116行目は,get(n)でn番目の要素を取得する関数を定義しています。もし,引数nが渡されなかった場合は,makeArray関数(次回以降で説明します)によって返されるクリーンな配列を返します。

pushStack()

0126:   // Take an array of elements and push it onto the stack
0127:   // (returning the new matched element set)
0128:   pushStack: function( elems ) {
0129:     // Build a new jQuery matched element set
0130:     var ret = jQuery( elems );
0131: 
0132:     // Add the old object onto the stack (as a reference)
0133:     ret.prevObject = this;
0134: 
0135:     // Return the newly-formed element set
0136:     return ret;
0137:   },
0138: 

便利なスタック機能を実現している部分です。新しいjQueryオブジェクトのprevObjectというプロパティに現在のオブジェクトを格納して返します。

endメソッドが呼ばれた場合に,この格納しておいたprevObjectが使われます。

setArray()

0139:   // Force the current matched set of elements to become
0140:   // the specified array of elements (destroying the stack in the process)
0141:   // You should use pushStack() in order to do this, but maintain the stack
0142:   setArray: function( elems ) {
0143:     // Resetting the length to 0, then using the native Array push
0144:     // is a super-fast way to populate an object with array-like properties
0145:     this.length = 0;
0146:     Array.prototype.push.apply( this, elems );
0147:     
0148:     return this;
0149:   },
0150: 

142行目のsetArrayメソッドは,選択された要素の強制的に初期化します。lengthに0をセットし,JavaScript標準のArray pushを使って初期化します。コメントにもあるようにスタックに格納していたオブジェクトも破棄されます。

each()

0151:   // Execute a callback for every element in the matched set.
0152:   // (You can seed the arguments with an array of args, but this is
0153:   // only used internally.)
0154:   each: function( callback, args ) {
0155:     return jQuery.each( this, callback, args );
0156:   },
0157: 

154行目にて定義されているeachメソッドは,JavaScriptでいわゆるイテレータを実現するためのものです。選択された要素に対して,順番にcallback関数を適用していきます。ここは紛らわしいのですが,別の場所(709行目)で定義されているjQuery.eachメソッドを実行します。なお,第2引数のargsは内部的に利用するためのもので,ドキュメントにも書かれておらず外部からは利用するべきではありません。

index()

0158:   // Determine the position of an element within
0159:   // the matched set of elements
0160:   index: function( elem ) {
0161:     var ret = -1;
0162: 
0163:     // Locate the position of the desired element
0164:     this.each(function(i){
0165:       if ( this == elem )
0166:         ret = i;
0167:     });
0168: 
0169:     return ret;
0170:   },
0171: 

選択された要素の中で,ある要素が何番目に出てくるのかを返す関数です。先ほど出てきたeachメソッドを利用して,ある要素が見つかればそのインデックスを,みつからなければ-1を返します。

いかがだったでしょうか。第1回はjQueryを理解する上で重要な処理が多かったため,最初の171行までしか説明できませんでした。しかし,ここまで見ただけでもとても興味深いライブラリだということが分かっていただけたのではないでしょうか。

それでは,次回は172行目以降を説明していきます。お楽しみに!

著者プロフィール

山下英孝(やましたひでたか)

大学を卒業後,大手SIerに就職し,電機メーカーの研究所勤務を経て,ウノウに入社。1年半に渡ってWebサイトの開発,ディレクション,運用を経験した後に独立。2008年2月よりフリーエンジニアとして活動中。好きな言語はJavaScriptとPythonで,Linuxサーバ運用管理も得意。

ブログWeboo! Returns.