• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

jQuery解読作業を進めるにつれ、Javascriptの基礎が如何に分かっていないか、ほぼ毎日のように痛感させられます。その意味ではjQuery解読は無謀なチャレンジであった訳ですが、それでも誤謬を犯すマイナスを埋め合わせて遙かに余りあるプラスがあることも毎日自覚されるので、恥を忍んで引き続きjQuery解読を進めるつもりでいます。

しかし、基礎の基礎が余りに分かってない自分に嫌気が指してきてしまい、匙を投げ出すような醜態は演じたくありません。そこで、自戒を込めて敢えて誤解していたこと、理解していなかったこと、不十分な理解に留まっていたことなどについて、つらつらと記述していきたい、と思います。

thisとは何か？

「this」──Javascriptを始めたばかりの素人は、直ぐに「thisって何？」と躓きます。しかも度々、あちこちで登場するので、どうも役割がいくつかあるらしいと気がつくと共に、混乱は深まります。

半可通のままでは駄目なことを自覚させられ、やむを得ず学習を深めると

1. タグ属性に　this と記述して（記述しなくても）そこから起動した関数内で this と記述すると当該タグを指し示すこと
2. メソッドの場合に当該関数内で当該関数の起動元オブジェクトを指し示すこと
3. new 演算子とコンストラクタ関数によって生成された所謂インスタンスの場合、当該コンストラクタ関数内（入れ子関数含む）や、プロトタイププロパティで設定するインスタンス関数内において、this が当該インスタンスを指し示すこと

などが次第に分かってきます。

▲ToTop

jQuery.jsで多用される this

この「this」が jQuery.js では多用されています。「これでもか！」というくらいあちこちに登場します。従って this をきちんと理解しないと、jQuery は殆ど理解出来ません。しかしそれは決して難解なことではありません。this の定義さえしっかり踏まえれば容易なことです。

jQuery.js コード内において、第一に、インスタンスメソッド内の、つまりプロトタイプオブジェクトのプロパティ内における this は、上の3番目の定義からインスタンスを指し示すことになります。第二に、クラスメソッド内の this は上の 2番目の定義からクラスを指し示します。

jQuery.jsにおけるクラスとは、そう機能するように定義された グローバル変数 jQuery（及びそのコピーである 変数 $ ） に他なりません。

第三に、そして興味深いことは、ユーザーによる jQuery() 実行指示時においても、this を効果的に使用することが出来ることです。例えば、jQuery for JavaScript programmers から引用すれば、

//引用ブロックのテキストコンテンツを順に alert する
jQuery('blockquote').each(function(el) { alert(jQuery(this).text()) }); 

//マウスオーバー時とマウスアウト時の背景色をそれぞれ変更する
jQuery('a').hover(
　　function() {
　　　　jQuery(this).css('background-color', 'orange');
　　},
　　function() {
　　　　jQuery(this).css('background-color', 'white');
　　}
);

のように利用出来ます。

そしてどの様な場合においても、「this とはそれが指し示すオブジェクトへの参照である」ことをきちんと踏まえていれば、コードを解読する場合や記述する場合においては、this をそれが指し示すところのオブジェクトそのものであると「思いこむ」ことが手っ取り早い、現実的なthisの利用方法であると思います。

それにしても上のコードにおける jQuery(this) ってどういうこと？───と一瞬思いました。これについてはこのエントリイの末尾で触れたいと思います。

▲ToTop

jQuery()インスタンスオブジェクトを「視覚化」する

それにしても、ユーザーが入力した jQuery(･･･) に返されるインスタンスオブジェクトは、具体的にはどんな内容のものなのでしょうか？ それを知ることは決して意味のないことではありません。

なお、FireBugを使用すれば使いながら（on the fly）インスタンスオブジェクトの内容を見ることが出来ますから、敢えて表示することもない───と言うことも出来ます。しかし、ここでは敢えて学習のためにも、何はともあれインスタンスオブジェクトを表示してみたいと思い、それを行ってみました。

その方法は例えば、強引ではありますが、jQuery.js がインクルードされているサイト（勿論このエントリイでも構わない）を開いてから、FireBug を起動し、そのコンソールに次のコードを入力すれば、当該サイトの末尾に当該サイトのリンクタグ一覧を取得したばかりの、jQueryインスタンスオブジェクトのプロパティ一覧が追加されます。

また下のボタンをクリックすると下の関数を実行し、この頁の末尾に一覧を追加します。

インスタンスオブジェクトを総覧する

(function($){
  var obj =$("a"), tmp="";
　for (var i in obj)
    tmp += "<div>" +i +" : "+ obj[i]+"</div>";
  $(document.body).append(tmp);　//bodyに tmp 要素を追加する
})(jQuery);

指定した要素（上の例ではリンク要素）を取得したインスタンスオブジェクトのプロパティ一覧を見れば、当該要素が確かに１つの配列にその要素として格納されていることが分かります。上の例で言えば、それは「 0 : http://･0･･改行、1 : http://･1･･改行、・・・・」のように表示されますから、 [<a href="･0･･">, <a href="･1･･">, ・・・] のように格納されていることが分かります。勿論その他に 60 を越える数の、プロトタイプを利用して設定されたインスタンスメソッドやインスタンスプロパティが存在していることが、改めて分かります。

jQuery()インスタンスオブジェクトから指定した要素を取り出す

インスタンスオブジェクトの内容が分かったところで、次にそこから指定した要素ノードを抽出する方法を考えてみます。

それはたやすいことです。対象は配列の要素であり、init()メソッドを読めば、指定した要素オブジェクトは、連想配列ではなく単純な配列として格納されていることが分かりますので、上の例で言えば $("a")[0]、あるいは $('a')['2'] とすれば目的を達します。実際 FireBug のコンソールに $("a")[0] を入力して実行すると、当該サイトの最初のリンク要素が <a href="･･･"> と表示されます。

序でに触れれば、プロトタイプを利用して作成されたインスタンスメソッドも連想配列を利用して自在に表示出来ます。

$("a")["index"]、$()["init"]、・・・・

この件については、jQueryに学ぶJavascriptの基礎(4) インスタンスオブジェクトからの値の取得について──jQuery解読(20) で再考しました。よろしければご覧ください。

▲ToTop

jQuery(･･).meth(･･･) の meth(･･･)内で this を利用する

次に、jQuery()のインスタンスメソッドである meth()において this をどのように使うのか、その方法を考えてみます。

メソッド内の this はその定義から、そのメソッドが実行されているオブジェクト、つまり jQuery(･･) を指し示すことになります。ところで、jQuery(･･) はinit()メソッドによって、「 指定した要素ノードを要素とする配列を、そのプロパティの一部に内包しているインスタンスオブジェクト 」を返値として受け取っています。つまり meth()内の this はこのインスタンスオブジェクトを指し示すことになります。

jQuery(InsObj) を実行すると InsObj が返される

いきなりですが、jQuery(InsObj) を指示すると、init()メソッドによる初期化を経て、当該の InsObj が返値として返されます。init()を読めばそうなることは直ぐに分かりますが、次のコードを実行すればそれが視覚化されます。

※　InsObj はインスタントオブジェクトを意味します。

(function($){
　var InsObj = $();　//インスタンスオブジェクトを取得、引数はなくても問題なし
　InsObj = $(InsObj);　//それを引数として $() を実行し結果を InsObj に代入
　for (var i in InsObj) 
　　document.write ( i +" : "+ InsObj[i] + "<br />");
　document.close();
})(jQuery);

具体的な meth() 内の this 利用

改めて jQuery for JavaScript programmers から引用したコードを見てみます。（このエントリイのずっと上に表示）

jQuery('blockquote') または jQuery('a') 関数 が実行を終了した時点では、このオブジェクトは返値であるインスタンスオブジェクトを受け取っています。

そして直上の jQuery(insObj) の解明を踏まえれば、ずっと上の例におけるそれぞれの jQuery(this) はその返値として jQuery('blockquote') または jQuery('a') が受け取っているインスタンスオブジェクトを受け取っています。だからこそ jQuery のインスタンスメソッドである each() や hover() メソッド内において jQuery(this) を利用してjQueryインスタンスメソッドである text() や css() が使用出来る訳です。

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

jQuery解読作業を進めるにつれ、Javascriptの基礎が如何に分かっていないか、ほぼ毎日のように痛感させられます。その意味ではjQuery解読は無謀なチャレンジであった訳ですが、それでも誤謬を犯すマイナスを埋め合わせて遙かに余りあるプラスがあることも毎日自覚されるので、恥を忍んで引き続きjQuery解読を進めるつもりでいます。

しかし、基礎の基礎が余りに分かってない自分に嫌気が指してきてしまい、匙を投げ出すような醜態は演じたくありません。そこで、自戒を込めて敢えて誤解していたこと、理解していなかったこと、不十分な理解に留まっていたことなどについて、つらつらと記述していきたい、と思います。

ここでは return 値の受け取り先について、『Javascript第５版　日本語訳』における記述の曖昧さを指摘すると共に、jQuery()．ｉｎｉｔ（）メソッドにおけるreturnチェーンについてまとめたいと思います。

本稿の目的とは関係ないが・・・return の 返値

四則計算のような簡単な関数の場合、return で返される値は余りに明白です。return a*b ならば a に b を乗じた計算結果が返値になります。

またreturn Boolean の場合には true か false が返されます。そして同時に或る関数から true や false が返された場合のJavascriptの振る舞いについても、状況に応じた一定の決まり事があるようです。（status行に関するコードやタグ属性として記述されたJavascript文の場合等）

一般に、返値は数値、文字列、論理値及びオブジェクトのいずれでもあり得ます。クロージャーの場合のように関数自身を返値とすることさえある訳ですから、返値はあっさり言えばJavascriptで扱えるものならば「何でもあり」と思います。

return はそれを含む「関数の呼び出し元に返値を返す」

『Javascript第５版』には「return はそれを含む「関数の呼び出し元に返値を返す」」と書いてあります。

関数がリテラル標記されている場合で右辺の関数が無名だった場合について考えてみます。

jQuery関数もこのように無名関数として定義されていますが、例えば、var funcName = function (a,b) {return a + b }; のような場合です。

この関数は funcName(2,3) のような標記によって呼び出され returnすべき値として 5 を算出します。この場合の呼出し元は言うまでもなく funcName(2,3) です。

つまり、変数 funcName に返値 5 が代入されるのではなく、 funcName は関数オブジェクトそのものであって、alert( funcName ) の出力結果は function (a,b) {return a + b } となります。

確かに var result = funcName (2,3) とすれば変数 result に 返値 5 が代入されますが、それは呼出し元に返された return 値が変数に代入されているに過ぎません。返値を受け取る受け取り先は変数result でも、funcName関数オブジェクトでもありません。

以上は余りに当たり前のことですが後述することとの関係でまず確認のために記しました。

▲ToTop

メソッドとしての関数の場合の返り先

よく知られているように、無名関数をあるオブジェクトのプロパティ値に設定する場合、つまり或るオブジェクトのメソッドにするには obj.meth = function (a,b) {return a + b }; とします。

この場合オブジェクト obj のプロパティである meth に関数オブジェクトへの参照が代入され、実行演算子()を使って obj.meth(3,4) のように指示してこの関数が実行されます。

では、この場合の返り先はどこでしょうか？ オブジェクトobjでしょうか？

もちろんそれは違います。リテラル標記時の左辺が返り先でなかったのと全く同様に、この場合にも返値の受け取り先は obj.meth(3,4) です。

さて、ここから本題です。『Javascript第５版』では次のような一説があります。

オブジェクトを介して呼び出す関数のことをメソッドと呼びます。メソッドを呼び出したオブジェクトは暗黙的に引数として関数に渡されます。（p.123）

この文章を読むと、メソッドの場合の呼出し元は当該オブジェクトであり、他所で「関数の呼び出し元に返値を返す」と書いてあるのだから、メソッドの返値はそれを呼び出したオブジェクトに受け取られる、と理解してもおかしくありません。

しかし、オブジェクトはメソッドの呼び出し元ではありませんし、返値はオブジェクトに返される訳ではありません。オブジェクトを介して、オブジェクト上で、当該関数が実行されるだけです。

「オブジェクトを介して呼び出す」との表現と「メソッドを呼び出したオブジェクト」という表現は微妙に意味が異なります。介して呼び出された場合の呼出し元は、決して介されたオブジェクトではないのです。従ってメソッドを呼び出したオブジェクトという表現は適切さを欠くと言わざるを得ないでしょう。

この曖昧な表現故に、少なくとも私は、メソッドの場合には当該オブジェクトに返値が返される、と誤解させられたのですから。

「メソッドを呼び出したオブジェクト」は原典では「When a function is invoked on an object, the function is called a method, and the object on which it is invoked is passed as an implicit argument of the function.」(アンダーライン部が「メソッドを呼び出したオブジェクト」と訳された箇所）です。アンダーライン部を直訳すれば「それ（メソッド）がその（オブジェクト）上で呼び出されたオブジェクト」はとなり「メソッドを実行したオブジェクト」と表現した方が、「呼出し元」なる表現との差異を明確にするためにも適切ではないか、と思います。

呼出し元が或るオブジェクト上（あるいは「内」）の1つのプロパティである、メソッド関数を実行し、その結果が呼出し元に返されるのですから。

一方「return文が指定されていれば、関数の実行はここで中断され、式の値（もしあれば）が呼び出され呼出し元へ返されます（p.124）」は原典では「it causes the function to stop executing and to return the value of its expression (if any) to the caller.」です。callerは訳すと確かに「呼出し元」となります。

つまり call と invoke をそれぞれ異なる適切な言葉で表現すべきであって、共に「呼び出す」と訳していることが読者に混乱を招いている、と思います。

▲ToTop

以上のことをjQueryの this.init() で呼び出された init() メソッドでチェックしてみます

＜1＞
	55:	this[0] = tmp;
	56:	this.length = 1;
	57:	return this;
＜2＞
	65:	return new jQuery( context ).find( selector );
＜3＞		
	72:	return this.setArray([ selector ] );

init() メソッド内には this を直接返す場合（＜1＞）、新たなインスタンスを返す場合（＜2＞）、this.setArray() メソッドを返す場合（＜3＞）など様々な return 値があり大変勉強になります。

まずreturn値の返り先について。

下記コードの進行過程を具に解析する作業を通じて返値を解析してみます。

var jQuery = function (a,c){
	return  this instanceof jQuery ? this.init(a,c) : new jQuery(a,c)
}

1. ユーザーが jQuery(x、y) を実行する。
2. インクルードされている jQuery.js 内の jQuery(x,y){・・・} が呼び出され実行される。
3. この時 this は window オブジェクトを指しているから、3項演算子で条件分岐されて new jQuery(x,y) が実行される。つまり new 演算子によって jQuery インスタンスオブジェクトとして新しい空オブジェクトが生成され、かつ、今度は jQuery(x,y) がコンストラクタ関数として呼び出され、その中で使われる this は 仕様上当該のインスタンスオブジェクトを指すことになる。
4. コンストラクタ関数として呼び出された jQuery(x,y) では、今度は this instanceof jQuery == true となるので、条件分岐されて this.init() が実行される。
5. ところでその先が興味深い点である。 return this.init()とcoding されているから、ここから呼び出し元を逆順に辿って順次返値が返されていく。さてその最終の受け取り先は？
6. その受け取り先こそ、ユーザーが記したjQuery(x,y)に他ならない。そもそもユーザーが記述したコードによって起動された jQuery.js内のjQuery(x,y)関数 が、その内部処理を経て return 値をユーザー側の入力 API に返すからこそ、メソッドチェーンと言われている、jQuery(●,■).×××().△△() のような連鎖的なAPIが可能となるのである！

因みに、jQuery()は var jQuery = function(){・・・return this.init()} というリテラル形式関数ですから、先に見たように無名関数から返された return 値はこの式内では受け取れません。受け取り先はこの関数を呼び出したもの、つまりユーザーが入力した jQuery(x,y) に他なりません。

また蛇足ながら、returnチェーンこそがメソッドチェーンを実現している「 秘策 」に他なりません。

▲ToTop

各々のケースの解読

＜1＞return this

55行：this[0]にtmpが代入されます。つまりインスタンスの最初の要素がtmpとなります。

56行：次にその配列の要素数が1とされます。これによりもし要素数が2以上であった場合であっても強制的に1となります。

57行：最後にこうして加工された this、つまりインスタンスが jQuery()関数に 返され、最終的にユーザー入力 API に返されます。

実は、jQueryではインスタンスがjQuery()関数に返されるシーンは結構沢山あります。それこそがjQuery.jsの神髄とも言えるメソッドチェーンを実現するために、こうした仕様となっているのでしょう。

＜2＞return Instance

これは細かく説明するまでもなく、new 実行後の新たなインスタンスがjQuery()関数に返され、それがユーザー入力 API に返されることになります。

＜3＞return this.setArray

この場合には setArray() メソッドを分析すれば、Array.prototype.push.apply( this, a ) によって、取得されたエレメントノードを要素とする配列がインスタンスオブジェクトに返され、それが init() からの返値となり、結局それがユーザー入力 API に返されることになります。

＜結論＞

以上から、全ての場合においてインスタンスオブジェクトが init() メソッドから返され、それが jQuery() 関数の連鎖を通じて、ユーザー入力 API に返されることになります。

見えないインスタンス

以上のように、this キーワードと return が組み合わされて使用されると、一見複雑に見えます。jQueryでは生成されるインスタンスを明示的に固有の変数に代入しませんので、インスタンスオブジェクトが直接変数としてコード内に出現することはありません。、それは常に this によって指し示されるだけであり、このことがコードの理解をより一層分かりにくくしているのではないか、と痛感しています。この見えないインスタンスに散々苦労させられたのは、私自身に他なりませんから（苦笑）。

▲ToTop

それにしても記憶先はどこか？

変数に代入されない return 値は一体どこに記憶されるのでしょう？

もちろん物理的にはメモリ上ですが、Javascriptにおいてどこに保存されるのでしょうか？

裏返せば変数に代入されない返値を参照する何らかの方法はあるのでしょうか？

関数が定義されるとCallオブジェクトが生成され、そのプロパティに引数やローカル変数に格納されるそうですので、このオブジェクトの中に返値も保存され、変数が代入先として用意されていれば、Callオブジェクトのプロパティとして記憶された返値が、当該変数に代入されるのでしょうか？

このCallオブジェクトのプロパティに返値が保存される、という考えは全くの推測に過ぎませんが、他に考えようがありません。

無名関数の返値を変数に代入しないで参照する

次のようにして全く変数に代入されない返値 98 を取得することが可能です。
　　　var ret= (function() {return arguments[0] + arguments[1]; })(20,78)

また決して好ましい方法とは思いませんが、徒に複雑にしただけの以下のようなクロージャーを使っても同様に返値を取得することが出来ます。

(function () {
  var r=arguments;
  return function() {return r[0]+r[1]; };   
})(20,78)()　//これを実行すると 20 + 78 のreturn値である 98 が取得できる。

上のコードでは、まず無名関数 function () の引数に 20と78を代入して無名関数を実行し【(20,78)】、更にその返値として返される関数を実行【最後の()】して計算させ返値を求めています。

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

$.find() メソッドの解読に時間を要している・・・

$.find() メソッド解読を始めてから数週間が経過したような気がします。それだけ長い時間を掛けてもまだその全容解読に至っていません。それは言うまでもなく私の非力故なのですが 、$.find() メソッドが jQuery において Selector と呼称されている、 css や DOM を縦横に利用したドキュメント内検索のための根幹のメソッドであって、 $.find() メソッドを解明するためには、検索条件に関連する部分のjQueryコードの全てを解読する作業を同時に行わなければならないからに他なりません。

CSS style属性の全て、id属性やclass属性の他、HTML要素の諸々の属性名称と属性値、DOM の子孫要素、兄弟要素等々、様々な条件によってHTMLドキュメント内を横断的に検索する、その検索ツールが $.find()メソッドなのですから、そう易々と全貌は見えないのかも知れません。

それでも、一人悶々と思案する過程を通じて、jQueryへの理解は格段に深まり、またJavascriptに関する基礎的な知識も、日に日に深化していることを実感しています。やはり思い切ってjQuery解読に踏み込んで良かった、と痛感するこの頃です。

それにしても jQuery を使ってこそ！

解読作業ではひたすらコード進行を追いかけるのですから、jQueryをあれこれと使ってHTML文書を自由に操作することは余りありません。しかし、それでは何かおかしい、使ってこそのjQueryであり、使いつつ解読することが相互作用的に学習効果を高めるのではないか、と思い始めました。

そんな訳で、手始めに Slide Toggle Button を関連する各エントリイに設置してみました。

紙幅を要する抜粋されたコード部分について、エントリイ表示時には初期設定として隠蔽しておき、ボタン操作でコード掲載部分を表示したり、隠したりするようにしたのです。これまでならばDOMを使って直接コードを書いていたのですが、ここでは jQuery APIを意識的に使用してコードを書いてみました。

▲ToTop

Slide Toggle Button 説明

HTML文　

HTMLの表示/隠蔽

<!--表示/隠蔽用のボタンとその操作対象となる PRE タグを包含する div タグ
　を設け、その class 名を "togglePRE" として、ボタンと PRE タグのセットを
　全て取得する。
-->
　<div class="togglePRE">
　　<button style="dicplay:block;">ボタン説明文字列</button>
　　<pre style="display:none;">表示/隠蔽内容</pre>
　</div>

スクリプトコード　

コードの表示/隠蔽

(function(){
 1:　var togglePRE = $(".togglePRE");
　//当該クラス要素がない場合には何もしない。
 2:　if (togglePRE.length == 0) return;
　　　 //個々のクラス対象毎にイテレート
 3:　togglePRE.each(function(n){
　　　 //子要素の pre タグを抽出し、変数 pre に代入
 4:　　var pre = $(this).children("pre");
　　　 //それを非表示にする。
 5:　　pre.css("display","none")
　　　　//ボタンタグを選び、その disabled 属性を「有効」に変更し、
 6:　　 .end().children("button").attr("disabled","")
　　　  //ボタンがクリックされたら pre タグを slideToggle 操作する。
　　　　//同時にクリック時に背景色を変更／初期化するように設定
11:　　 .click( function(){ pre.slideToggle(); } )
12:　　 .mousedown(function(){this.style.backgroundColor='lightgreen'})
13:　　 .mouseup(function(){this.style.backgroundColor=''});
14:　　});
15:})();

以上のコードによりトグルボタンと表示/隠蔽要素の挙動を設定しました。言うまでもなく、上記コードの表示/隠蔽にもこのコードが適用されています。

さて、ここでは jQuery の特徴を踏まえないと間違いやすいコード作成上のポイントを自戒のために記しておきたいと思います。

• 要素の存在チェックに関して

  或るクラス名の要素があるかどうかを調べる方法として、それが存在しない場合には $(".togglePRE") == false になると思っていました。ところが togglePRE クラスが存在しなくても、$(".togglePRE") == true となってしまいます。何故ならば $(".togglePRE") は該当要素が存在しない場合には $(document) を返すため、togglePRE クラスがなくても、$(".togglePRE") == true となってしまうのでした。

  ですから、或る条件に合致する要素の存在有無をチェックするには該当要素の数をカウントさせる必要があります。つまり、$("条件").size() > 0 になるならば条件に合致した要素があったことになります。

  試行錯誤の末にこのことを理解しました。

  なお敢えてメソッドを使わなくても配列の length プロパティでも同様のチェックが可能であり、むしろこの方がすっきりしているかも知れません。

• 効率的なコード進行のために

  複数回使用するjQueryインスタンスは変数に代入して、繰り返し検索・作成しないようにしました。

• Google Addsence 対策

  エントリイ表示モードではない時、例えば検索結果を一覧で表示する場合や月別表示などの場合において、Google Addsence は３つ以上のエントリイにおいては表示されない仕様となっているようです。仕様というよりも複数のアドセンスが１つのページに表示されることを前提としたコードになっていないのでしょう。そこで３つ以上のエントリイを一覧表示すると、アドセンスのコード内でスクリプトエラーが発生してしまい、slideToggle ボタンも無効となってしまいます。

  そこで非エントリイモードの時にはスライドトグルボタンを無効にしてしまって、表示対象を非表示から表示に変更して最初から表示してしまうようにしました。

  むしろ、Google Addsenceを エントリイモードの時だけしか表示しないようブロック変数で制限するのが賢明というものでしょう。ですからそのように変更して、非エントリイモード時のエラー発生を排除し、それにより非エントリイモード時の特殊な対応（トグルボタンの無効化と表示対象の最初からの表示）をやめることとしました。

• Toggle対象要素について

  toggle対象要素となる pre タグには、初期値としてdisplay:none;を設定しました。そうしないとエントリイ表示モードではこの要素が一旦表示されてから、隠蔽されるからです。

• .end()メソッドの活用

  pre.end().children("button") で end メソッドを使ってみました。変数 pre は var pre = $(this).children("pre") と定義したので、$(this)をゲットするために end() メソッドを使って children("pre") を解除しました。こうして $(this) を改めて取得せず、取得済みのそれを利用して $(this).children("button") を実行させています。

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

jQuery解読エントリイ一覧 (10) 表にしてjQuery.jsの挙動を追跡する 2007/11/18 (9) jQuery().find()メソッド解読のためのjQuery.map()メソッド解読 2007/11/14 (8) jQuery().find()メソッド解読(2) 2007/11/14() (7) jQuery().find()メソッド解読(start) 2007/11/14 (6) jQuery.clean()メソッド解読(2) 2007/11/13 (5) jQuery.clean()解読のためのjQuery.each()解読 2007/11/13 (4) init()メソッドにおけるjQuery固有の拡張されたプロパティとメソッドの相互呼応 2007/11/07 (3) jQuery.extend()及びjQuery.prototype.extend() 2007/11/06 (2) インスタンスプロパティ・メソッドとクラスプロパティ・メソッド 2007/11/03 (1) インスタンスの初期化：init() 2007/10/31 インクルード時の挙動 2007/10/29 jQueryの全体的な構造と特徴 2007/10/17 ロードマップ 2007/10/10 スタート 2007/10/03

このエントリイはこちらに統合しました。

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

jQuery解読の合間に・・・・

jQuery 1.2.1 版及び UI の登場してから約２ヶ月が経過しました。そして今、jQueryの評判はますます高まっているのではないか、と勝手に推測しています。

そんな訳で改めてjQuery関連サイトをサーフィンしてみました。確かに一部のサイトでは動きがあるようで最新版を対象として記述を更新したサイトも見つかりました。

有名どころ、と思ったjQuery関連サイト

決して推奨順に並べた訳ではありません。これまでお世話になった順でもあり、またより総合的なサイトを優先して並べたと言うことも可能です。

特筆すべきは古籏一浩氏がずっとVer1.0.3版をベースにしたリファランスを掲載していましたが（1.）、新たに Ver1.2.1 や UI を取り上げた Web 頁を作成したことでしょう。（2.）

なお、私はリファランスには興味がなく、個人的なお勧めは、1.及び2.よりも IBM のWebサイト（5.）です。また3.の開発者向けメモは日本語化の努力成果として大いに歓迎すべきでしょう。

1. jQuery リファレンス
2. jQuery入門 (ver 1.2.1)（Last update:2007/10/4 AM 1:00）
3. jQuery 開発者向けメモ
4. jQueryの基礎知識 - Emotional Web
5. jQuery を使って Ajax 開発を単純化する
6. ウノウラボ Unoh Labs: JavaScriptライブラリといえば jQuery（入門編）

▲ToTop

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

このエントリイでは、jQuery.init()メソッド内の53行で呼び出されるjQuery().find(selector)メソッドを解読する手始めとして、jQuery().find()メソッドの最初に登場するjQuery.map()クラスメソッドの解読を行います。

このエントリイのjQuery.js 1.2.1における対象箇所

コードの表示/隠蔽

225: find: function(t) {
226: 　var data = jQuery.map(this, function(a){ return jQuery.find(t,a); });
227: 　return this.pushStack( /[^+>] [^+>]/.test( t ) || t.indexOf("..") > -1 ?
228: 　　jQuery.unique( data ) : data );
229: },
　　　・・・・・
987: map: function(elems, fn) {
988: 　// If a string is passed in for the function, make a function
989:　 // for it (a handy shortcut)
990: 　if ( typeof fn == "string" )
991: 　　fn = eval("false||function(a){return " + fn + "}");
992:
993:　 var result = [];
994:
995: 　// Go through the array, translating each of the items to their
996: 　// new value (or values).
997: 　for ( var i = 0, el = elems.length; i < el; i++ ) {
998: 　　var val = fn(elems[i],i);
999:
1000: 　 if ( val !== null && val != undefined ) {
1001:　　　if ( val.constructor != Array ) val = [val];
1002:　　　result = result.concat( val );
1003:　　}
1004:　}
1005:
1006:　return result;
1007: }

全く知りませんでしたが、「map」とはプログラミング界では一般的な専門用語のようです。ある関数の引数として別の関数を受け取る関数を「高階関数（higher-order function）」と呼ぶらしい。その結果、ある配列の各要素を対象として順番にそれを操作した結果を返す関数を作ることが出来る、ということらしい。

C言語やPerlなどでは一般的なようですが、Javascriptの場合実装されてないため、each()メソッドと同様に、フレームワークで色々と工夫されている模様です。

cf.　こちらに数少ないJavascriptの高階関数の説明があります。
第2回　JavaScriptの関数をマスターしよう − ＠IT

さてその map 関数ですが、要所は998行の val = fn(elems[i],i); にあると思います。元の関数の第二引数である関数の、その第一引数に、元の関数の第一引数である配列の各要素を渡しています。後はこのvalを元の配列回数分だけ集めて新たな配列としてまとめればよい訳で、まとめ上げられたその配列は、呼出し元の関数の返値となって目的が達せられています。

$.map()の例

まずjQuery.js 1.1.4の解説にあった例題を掲載します。

• $.map( [0,1,2], function(i){ return i + 4; }); //result [4, 5, 6]
• $.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; }); // result [2, 3]
• $.map( [0,1,2], function(i){ return [ i, i + 1 ]; }); //result [0, 1, 1, 2, 2, 3]

これらの例によって、$.map()を使って、単純に配列要素に加算したり、条件づけて配列要素数さえ増減させたり、自在に加工出来ることがよく分かります。

そこで$.map()の定義を踏まえて独自のサンプルを作ってみます。

$.mapの定義から、引数となる関数には２つの引数（元の配列の各要素とインクリメント値）を渡していますので、jQuery.js1.1.4のサンプルではなかった2つの引数を取る場合を作成してみました。

$.map( [5,10,-2], function(b,a){ 　return (a+1).toString() +"番目は" + (b + 4).toString()+"です。"; });　//返値は ["1番目は9です。","2番目は14です。","3番目は2です。"] となります。

$().find()において$.map()はどの様に使われているのか

以上を踏まえて本題に戻ります。IEやOperaにおける id 値による DOM 操作時に、同一のname値をもつ要素を拾ってしまった場合の対処として、jQuery().find(a)が起動され、その結果$.map()メソッドがよびだされたのでした。

呼び出されたmapメソッドは具体的には次のようになっています。

var data = jQuery.map(this, function(a){ return jQuery.find(t,a); });

つまり、配列 this の各要素に対して、jQuery.find(t,thisの要素) を適用し、その結果の配列を data に代入しています。ここに this は $.map()が jQuery().find（）から呼び出されたのですから jQuery() インスタンスの返値である配列になっているはずです。

ところで上の内容を知るためには、次に進まなければなりません。 jQuery.find() メソッドを解明しなければなりません。

--------------------------------------------------------

ということで、次は愈々長大な $.find()メソッドの解読です。

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

• 初稿：2007/11/14
• 改訂：2007/11/21……jQuery.js の挙動を FureBug により追跡し、表にまとめた。
• 改訂：2008/02/03……抜本改訂（上の表は削除した）

jQuery.find() クラスメソッドは何をするのか？

直前のエントリイで jQuery( args ).find( selector, context ) について概観しました。$().find() メソッドは僅か５行しか記述がありませんが、その僅かの記述の中に、 $.map()、$.find()、$().pushStack()、$.unique() 及び $.data()メソッドと、４つの jQuery クラスメソッドと１つのインスタンスメソッドを呼び出しています。ここで最重要なメソッドは jQuery.find( selector,elem ) クラスメソッドで、find の具体的な検索処理はこのクラスメソッドが全部請け負います。

そこでこのエントリイでは、この長大な jQuery.find() クラスメソッドの解読を行います。

jQuery.find() の構造と各種サブルーチンメソッドの役割

jQuery.find() クラスメソッドは、1445-1635 行までの約 200 行もある長大なコードです。そこでまずその構造と各種サブルーチンの役割を概観しておきます。

下の表は$().find()から呼び出される各種のサブルーチンメソッドを登場順に一覧したもので、……より右の文章はそれぞれのサブルーチンメソッドの役割を簡潔に記したものです。

├init()
│ ｜
│ ├$(context).find(selector)
│ │ ├$.map(this,fn(elem){})……this 配列（＝$(context)のインスタンス）の
│ │ │　　　　　　　　　　 各要素 elem を fn 関数で指定した内容に変換する
│ │ │└$.find(selector,elem)……elem の中から selector にマッチする要素を抜き出す
│ │ │  ├$.trim(selector)……selector の最初と最後にある空白を削除
│ │ │  ├$.data(elem)……elem に 固有 id 番号（uuid） を振る
│ │ │  ├$.trim()
│ │ │  ├$.merge(a,b)……a, b２つの配列を合体する
│ │ │  ├$.isXMLDoc(elem)……elem が XML要素かどうかを判定する
│ │ │  ├$.merge()
│ │ │  ├$.classFilter(r,m)……r 配列の中から m というclass名のelemを抽出/除外する
│ │ │  ├$.filter(t,r)……r 配列の各要素に t 文字列によるフィルタを適用する
│ │ │  │ ├$.parse……各種のフィルタを検索するための正規表現文字列の配列
│ │ │  │ ├$.filter()……再帰呼び出し
│ │ │  │ ├$(elem).not(sel)……sel に該当する要素を elem 配列から除外する
│ │ │  │ ├$.classFilter()
│ │ │  │ ├$.props……各種属性値の名称統一化のためのオブジェクト
│ │ │  │ ├$.attr……各種属性値を処理する
│ │ │  │ ├$.data
│ │ │  │ ├$.expr……":"に続く文字列などによるフィルタリングを行うためのオブジェクト
│ │ │  │ └$.grep(arr,fn(){})……関数で指定した条件に合う要素をarr配列から抽出する
│ │ │  ├$.trim()
│ │ │  └$.merge()
│ │ └$(args).pushStack(elem)……新たにjQuery(elem)のインスタンスを作り、そのプロ
│ │ 　　│パティ値に今のインスタンスを格納してから新インスタンスを$(args)関数に返す
│ │ 　　└$.unique(arr)……arr配列の要素で重複があれば重複をなくしその結果を受け取る。
│ │ 　　　　└$.data()

上に見られるように、$.find() の中では、沢山の jQuery クラスメソッド等がサブルーチンとして処理を請け負い、役割分担して、context から selector に該当するエレメント等を検索することになります。

jQuery.find() メソッド全行解読

長大なコードなので内容に応じて適宜分節しながら解読を進めます。

1. 初期処理

コードとその説明の表示／隠蔽

1445: find: function( t, context ) {
1446: // Quickly handle non-string expressions
1447: if ( typeof t != "string" )　// tが文字列でない場合には
1448: 　return [ t ];　　　　　　　// 配列[t]をリターンして処理を終える。
1449:
1450: // check to make sure context is a DOM element or a document
　　　// contextが要素ノードでもdocumentでもない場合には空配列を返して処理を終える。
1451: if ( context && context.nodeType != 1 && context.nodeType != 9)
1452: 　return [ ];
1453:
1454: // Set the correct context (if none is provided)
1455: context = context || document;　//context がなければ document を代入する
1456:
1457: // Initialize the search　検索処理用変数定義
1458: var ret = [context], done = [], last, nodeName;
1459:

2. 検索開始・前処理：（1460-1469）

コードとその説明の表示／隠蔽

1460: // Continue while a selector expression exists, and while
1461: // we're no longer looping upon ourselves
　/* 1462 行の while は 1620 行まで 159 行も続く長いフレーズである。
　 * この中で文字列 t を様々に分解しながら切り取り、様々なフィルターに掛けて
　 * それにヒットするかどうかを検証し、対象を抽出する。
　 * そのための初期処理が 1463-1468 行である。
　 */
1462: 　while ( t && last != t ) {
1463: 　　var r = [];　// 検索結果の要素ノードを格納する配列を準備
 // while 終了準備処置　これ以降の行で t の値が変更されれば last != t となるから 
 // while 処理が継続され、つまり以下の検索が反復される。
1464: 　　last = t;
1465: 　　// tの先頭と末尾にある空白文字を削除
1466: 　　t = jQuery.trim(t);
1467:　　 // 検索結果有無を示すフラグを「ナシ」とする
1468: 　　var foundToken = false;
1469:

3-1. 検索ケースＡ：　子要素 "> chars" 検索（1470-1487）

コードとその説明の表示／隠蔽

　/* "> 任意の文字列"形式による検索を行う箇所である｡
　 * つまり子要素指定が有る場合の抽出作業である。
　 * 但し、検索対象文字列 t の先頭文字が > の場合を探しているので、selector
　 * 文字列において、既に別の検索が処理された後の二度目以降の検索処理を行う箇所となる。
　 */
1470: 　　// An attempt at speeding up child selectors that
1471: 　　// point to a specific element tag
　　　　　// 先頭文字が > でこれに何らかの文字列が続く場合の正規表現文字列
　　　　　//（1356行で定義済み）を re に代入
1472: 　　var re = quickChild;
1473: 　　var m = re.exec(t);　// 検索対象 t に re が含まれるかチェック
1474:
1475: 　　if ( m ) {　// 検索対象 t に re が含まれれば...
　　　　　　//m[1] は quickChild の定義から chars＝何らかの文字列 を指す
1476: 　　　nodeName = m[1].toUpperCase();
1477:
　/* 検索対象 ret 変数の各対象毎に巡回し、
　 * 更に ret[i]の第一子要素を初期値とし、その兄弟要素を巡回する。
　 * ノードタイプが要素エレメントで、それが何らかの要素名か、あるいは
　 * quickChild 検索で抽出済みのノードネームに等しければ
　 * その子要素を r 配列に格納する。
　 */
1478: 　　　// Perform our own iteration and filter
1479: 　　　for ( var i = 0; ret[i]; i++ )
1480: 　　　　for ( var c = ret[i].firstChild; c; c = c.nextSibling )
1481: 　　　　　if ( c.nodeType == 1 && (nodeName == "*" || c.nodeName.toUpperCase() == nodeName) )
1482: 　　　　　　r.push( c );
1483:
　/* 取得した検索結果配列を ret に代入する。これにより検索対象配列 ret が
　 * 検索結果配列に置換される｡
　 * 一方、検索文字列 t から 今検索した文字列＝「>何らかの文字列」を削除する｡
　 * 直前検索文字列削除後の t に空白が含まれれば検索を続ける｡
　 */
1484: 　　　ret = r;
1485: 　　　t = t.replace( re, "" );
1486: 　　　if ( t.indexOf(" ") == 0 ) continue;
1487: 　　　foundToken = true;　// 検索結果有無フラグをtrue、つまり検索結果ありとする。

3-2. 検索ケースＢ：　子要素 "> [0-9A-z_]" 検索（1488-1521）

ケースＢでは、(1)先頭に>があり、(2)その後に空白文字が 0 個以上あって、かつそれに(3)数字かアルファベットかアンダースコアが続くような検索文字列であるかどうかをチェックする。

ケースＡでは、数字/アルファベット/アンダースコアではない文字、例えば：、,、#、$などが含まれていても構わなかったが、ケースＢではこれらの文字は対象とされない｡

コードとその説明の表示／隠蔽

　/* 正規表現文字列 /^([>+~])\s*(\w*)/iは次のことを意味する｡
　 * 先頭文字が>、+ あるいは ~ のいずれか（第一部分文字列）であって
　 * その後に空白文字が 0 個以上あり、
　 * 数字/アルファベット/アンダースコアが0個以上続く文字列を
　 * 大文字小文字の区別なく探す
　 */
1488: 　　} else {
1489: 　　　re = /^([>+~])\s*(\w*)/i;
1490:　　　 //t に対する re 正規表現文字列の検索結果を m に代入し、それが空でなければ
1491: 　　　if ( (m = re.exec(t)) != null ) {
1492: 　　　　r = [];　//空配列 r を準備（検索結果受け取り用）
1493:
1494: 　　　　var merge = {};　//空オブジェクト merge を準備（id照合用）
1495: 　　　　nodeName = m[2].toUpperCase();　// \w* に該当する文字列を大文字にして
1496: 　　　　m = m[1];　// m に第一部分文字列（>、+ あるいは ~ のいずれか）を代入
1497:
　　　　　　　// 検索対象ノードを巡回する。
1498: 　　　　for ( var j = 0, rl = ret.length; j < rl; j++ ) {
　/* 第一部分文字が ~ か + ならば（つまり兄弟要素を探す場合には）
　 * ret[j].nextSiblingを、また第一部分文字列が > の場合には
　 * ret[j].firstChild（第一子要素）を、それぞれ n に代入する｡
　 */
1499: 　　　　　var n = m == "~" || m == "+" ? ret[j].nextSibling : ret[j].firstChild;
　　　　　　　　　// その n 要素の兄弟要素を順に巡回し
　 　 　　　　　　//そのノードタイプが要素ノードならば、それに uuid 番号を振って id に代入｡
1500: 　　　　　　for ( ; n; n = n.nextSibling )
1501: 　　　　　　　if ( n.nodeType == 1 ) {
1502: 　　　　　　　　var id = jQuery.data(n);
1503:
　/* 第一部分文字が ~ で（つまり兄弟要素を探していて）既に id 番号が振られた
　 * 要素がある場合（正確に言えば既に 1507行で merge[id}==true が与えられて
　 * いる場合）には、兄弟要素を検索するループから抜け出す｡
　 */
1504: 　　　　　　　　if ( m == "~" && merge[id] ) break;
1505:
　/* nodeName がないか、n の nodeName が先に求めた nodeName と等しい時に
　 * 第一部分文字が ~ ならば、merge[id] に true を代入してから
　 * 当該の n 要素を r 配列に格納する。
　 * またもし 第一部分文字が + だった場合には（直近の兄弟要素を見つけるのだから）
　 * 1つ見つかればもう探す必要はないので、兄弟要素を探すループから抜け出す｡
　 */
1506: 　　　　　　　　if (!nodeName || n.nodeName.toUpperCase() == nodeName ) {
1507: 　　　　　　　　　if ( m == "~" ) merge[id] = true;
1508: 　　　　　　　　　r.push( n );
1509: 　　　　　　　　}
1510:
1511: 　　　　　　　　if ( m == "+" ) break;
1512: 　　　　　　　}
1513: 　　　　}
1514:
　/* 見つかった要素が入った配列 r を、検索対象要素が代入されている配列 ret に代入
　 * し、検索文字列のｔから re に代入された部分検索用文字列部分を消去し、かつその
　 * 後の t 文字列の先頭と末尾にある空白文字を削除してから、t を更新する。
　 * この節の最後に、検索対象有無を示すフラグを true とする。
　 */
1515: 　　　　ret = r;
1516:
1517: 　　　　// And remove the token
1518: 　　　　t = jQuery.trim( t.replace( re, "" ) );
1519: 　　　　foundToken = true;
1520: 　　　}
1521: 　　} //END OF 1488 else
1522:

4. 検索Ｃ：子要素検索ではない検索

以上の検索に引っかからない場合（つまり子要素を探すのではない場合）、次の検索処理が 1525 行から 1611 行までで行われる。この節での検索は selectors による複数条件指定、.className 指定、#idName 指定の場合が処理される。

1523: 　　// See if there's still an expression, and that we haven't already
1524: 　　// matched a token
1525: 　　if ( t && !foundToken ) {
　：　　　　　･････
1611: 　　}

4-1. 先頭文字がカンマである場合の検索前処理（1527-1539）

まず t が存在していて、検索結果有無フラグが false の時、1526-1539行でカンマを t から削除する処理が行われる。なおここでは検索そのものは行わない。

コードとその説明の表示／隠蔽

1526: 　　　// Handle multiple expressions
1527: 　　　if ( !t.indexOf(",") ) {　// t の先頭文字が "," の場合
　/* そもそも、検索文字列にカンマが入るのは 
　 * jQuery(context).find( selector1,selector2,････,selectorN ) が履行されている時
　 * である。
　 * さて、ret 配列には 対象要素エレメントの集合である context が代入されている。
　 * もし、ret 配列（それは [context] に等しい）の最初の要素が context そのものに
　 * 等しいならば、元々 context に１つの要素しかなかったことになる。
　 * つまり１つの要素ノードを対象として複数のパターンのセレクターを指示していること
　 * になる。この時にはdoneに２つの空要素を代入することによって、jQuery.find() から
　 * の返値を「なし」としている。
　 */
1528: 　　　　// Clean the result set
　　　　　　　// context が１つの要素しかない場合、retを空白配列とする
1529: 　　　　if ( context == ret[0] ) ret.shift();
1530:
1531: 　　　　// Merge the result sets
　　　　　　　// 空配列を第一要素とし、それにret（これも空配列）が続く配列を done に代入する｡
　　　　　　　// つまり done == [ [], [] ] とする。
1532: 　　　　done = jQuery.merge( done, ret );
1533:
1534: 　　　　// Reset the context
　　　　　　　// r と ret に [context]配列を代入
1535: 　　　　r = ret = [context];
1536:
1537: 　　　　// Touch up the selector string
　　　　　　　// 検索文字列 t の先頭文字（これはカンマである）を削除し、替わりに
　　　　　　　// 半角スペースに置き換える。これにより別の節での検索対象としている。
1538: 　　　　t = " " + t.substr(1,t.length);
1539:

次の検索処理は、いくつかの前処理が行われてから行われる。

4-2-1. "nodeName#idName" 検索の場合の検索前処理

コードとその説明の表示／隠蔽

1540: 　　　} else {
1541: 　　　　// Optimize for the case nodeName#idName
　　　　　　　// 文字通り「ノードネーム#idネーム」の文字列を探す
1542: 　　　　var re2 = quickID;　// 1357行で定義されている正規表現文字列
1543: 　　　　var m = re2.exec(t);　//検索結果を m に代入
1544:
1545: 　　　　// Re-organize the results, so that they're consistent
　　　　　　　// m があればその要素を次のように並び替える。
　　　　　　　// [ 0, "#", idName, nodeName ]
1546: 　　　　if ( m ) {
1547: 　　　　　m = [ 0, m[2], m[3], m[1] ];
1548:

4-2-2. 先頭文字が "." か "#" の場合の検索前処理

コードとその説明の表示／隠蔽

1549: 　　　　} else {
1550: 　　　　　// Otherwise, do a traditional filter check for
1551: 　　　　　// ID, class, and element selectors
1552: 　　　　　re2 = quickClass;　// 先頭文字に "." または "#"が１個以下ある場合の正規表現文字列
1553: 　　　　　m = re2.exec(t);　// t を re2 正規表現文字列でチェックしその結果を m に代入
1554: 　　　　}
1555:

4-2-3. 4-2-1及び4-2-2の場合の更なる検索前処理

コードとその説明の表示／隠蔽

1556: 　　　　m[2] = m[2].replace(/\\/g, "");　//chars文字列内から \ を削除
1557:
1558: 　　　　var elem = ret[ret.length-1];　//elem に検索対象要素配列の最後の要素を代入
1559:

4-3. やっと検索開始

コードとその説明の表示／隠蔽

　/* 検索文字配列 m の２番目の値が "#" の場合の検索を行う。
　 * 変数 oid にgetElementByIdメソッドの結果を代入する。
　 */
1560: 　　　　// Try to do a global search by ID, where we can
1561: 　　　　if ( m[1] == "#" && elem && elem.getElementById && !jQuery.isXMLDoc(elem) ) {
1562: 　　　　　// Optimization for HTML document case
1563: 　　　　　var oid = elem.getElementById(m[2]);
1564:
　/* IE と Opera において発生するバグ（ form要素内のname属性の値をid値と誤って
　 * 認識するバグ）に対する対策を施す。
　 * XPathにおいて「@id は id という名前のアトリビュートを選択する」ことを指すから
　 * 1569 行によって、elem 内から id 属性値として m[2] を持つ要素が正しく選別される。
　 */ 
1565: 　　　　　// Do a quick check for the existence of the actual ID attribute
1566: 　　　　　// to avoid selecting by the name attribute in IE
1567: 　　　　　// also check to insure id is a string to avoid selecting an element with the name of 'id' inside a form
1568: 　　　　　if ( (jQuery.browser.msie||jQuery.browser.opera) && oid && typeof oid.id == "string" && oid.id != m[2] )
1569: 　　　　　　oid = jQuery('[@id="'+m[2]+'"]', elem)[0];
1570:
　/* oid が見つかった場合に、m[3]がない、つまりセレクタ文字列が nodeName#idName 
　 * 型ではなかった時か、あるいは nodeName#idName 型の時には oid のノードネームが
　 * m[3] つまり nodeName に一致すれば [oid]を、そうでなければ空配列を、
　 * それぞれ ret と r に返す。ここに空配列とはこの検索ルーチンでは目的の要素が
　 * 見つからなかったことを意味する。
　 */
1571: 　　　　　// Do a quick check for node name (where applicable) so
1572: 　　　　　// that div#foo searches will be really fast
1573: 　　　　　ret = r = oid && (!m[3] || jQuery.nodeName(oid, m[3])) ? [oid] : [];

4-4. 全ての子孫要素を対象とした検索

コードとその説明の表示／隠蔽

　// 全ての子孫要素 (all descendant elements) を対象とした巡回検索を行う。
1574: 　　　　} else {
1575: 　　　　　// We need to find all descendant elements
1576: 　　　　　for ( var i = 0; ret[i]; i++ ) {
　/* 最初の文字が "#" で nodeName が有れば、その nodeName 名を tag に代入し、
　 * そうでない場合、"." があるか m[0] が空白ならば（つまり quickID にも quickClass
　 * にもヒットしなかった場合）"*"を tag に代入し、以上のいずれでもない場合には chars
　 * 文字列を tag に代入する。
　 */
1577: 　　　　　　// Grab the tag name being searched for
1578: 　　　　　　var tag = m[1] == "#" && m[3] ? m[3] : m[1] != "" || m[0] == "" ? "*" : m[2];
1579:
　// tag が "*" で、ノードネームが object だったら tag に "param" を代入する。
1580: 　　　　　　// Handle IE7 being really dumb about <object>s
1581: 　　　　　　if ( tag == "*" && ret[i].nodeName.toLowerCase() == "object" )
1582: 　　　　　　　tag = "param";
1583:
　// これまでの r 配列に対して、検索対象内のタグ名が「tag」である要素を追加する。
1584: 　　　　　　r = jQuery.merge( r, ret[i].getElementsByTagName( tag ));
1585: 　　　　　}
1586:

4-5. class 名による検索

コードとその説明の表示／隠蔽

1587: 　　　　　// It's faster to filter by class and be done with it
1588: 　　　　　if ( m[1] == "." )
　// classFilterメソッドを利用して r 要素内から m[2] の条件に該当する要素を抽出する
1589: 　　　　　　r = jQuery.classFilter( r, m[2] );
1590:

4-6. ID名による検索

コードとその説明の表示／隠蔽

1591: 　　　　　　// Same with ID filtering
1592: 　　　　　　if ( m[1] == "#" ) {
1593: 　　　　　　　var tmp = [];
1594:
1595: 　　　　　　　// Try to find the element with the ID
1596: 　　　　　　　for ( var i = 0; r[i]; i++ )
　　　　　　　　　　　// id 属性値が m[2] と等しければ
1597: 　　　　　　　　if ( r[i].getAttribute("id") == m[2] ) {
1598: 　　　　　　　　　tmp = [ r[i] ];　//tmpにその要素ノードを要素とする配列を代入
1599: 　　　　　　　　　break;　//1596行の for ループを中断
1600: 　　　　　　　　}
1601:
1602: 　　　　　　　r = tmp;　// r にヒットした要素ノードが入った配列を代入
1603: 　　　　　　}
1604:

4-7. この分節での検索終了措置

コードとその説明の表示／隠蔽

1605: 　　　　　　ret = r;　//検索対象ノード配列に検索結果を上書き代入
1606: 　　　　} //END OF 1574行のelse
1607: 　　　　// re2（quickID 又は quickClass正規表現文字列）に該当する文字列を
　　　　　　　// 検索文字列 t から削除する。
1608: 　　　　t = t.replace( re2, "" );
1609: 　　　}　//END OF 1540行の else
1610:
1611: 　　}　//END OF 1526行の if
1612:

5. 最後の検索処理

子要素でもid名でもclass名でもない検索の場合、filter クラスメソッドを活用して検索を行う。

この filter クラスメソッドもまた長いコードなので、これについては別のエントリイで詳述する。

コードとその説明の表示／隠蔽

　// これまでの検索を終えてもなお、t に文字列が残っている場合
1613: 　　// If a selector string still exists
1614: 　　if ( t ) {
1615: 　　　// Attempt to filter it
　　　　　　// 検索対象要素 r に t 文字列によるフィルタを適用し結果を val 配列に代入。
1616: 　　　var val = jQuery.filter(t,r);
1617: 　　　ret = r = val.r;　// 配列 valから要素ノードを抽出して ret と r に代入
1618: 　　　t = jQuery.trim(val.t);　// 配列 val から検索文字列を取りだして t に代入
1619: 　　}
1620: 　}
1621:

6. find() クラスメソッドの終了処理

コードとその説明の表示／隠蔽

　// ここまで来ても t が残っていたらエラーが起こったはずなので、空配列を ret に代入
1622: 　// An error occurred with the selector;
1623: 　// just return an empty set instead
1624: 　if ( t )
1625: 　　ret = [];
1626:
　// ret がありかつ context が ret の第一項値に等しければ、retを空配列にする
1627: 　// Remove the root context
1628: 　if ( ret && context == ret[0] )
1629: 　　ret.shift();
1630:
　// done に ret を併合し、その結果を return する。
1631: 　// And combine the results
1632: 　done = jQuery.merge( done, ret );
1633:
1634: 　return done;
1635: },

return 連鎖がもたらす階層性

上述の第二のケースの場合、65行により新たなjQuery(context)インスタンスが生成され、上述の一連の流れを経てinit()メソッドが終了します。この流れではjQuery()インスタンスが二度作成されるため複雑な動きをします。

そこでインタープリターがどの様に各種メソッドを呼び出しているのかを Firebug を使って追跡・解読してみました。解読結果を以下に図示します。

なお、ここで行った追跡は、次のようなセレクタとメソッドを指定して、ローカルパソコン上のHTMLファイル上で行いました。追跡に使ったセレクタとメソッドは jQuery("p > a").size()です。

1. jQuery.js がインクルードされるとグローバル変数 jQuery 及び $ 並びにこれら の prototype オブジェクトが生成され、定義されている各種 prototype プロパティが設定される。こうしてinit()メソッドの返値が配列であることも設定される。
2. ユーザーが jQuery("p > a") の実行をインタープリタに指示する。ここに第一引数の expr は「<･･･>付きの html タグ名でもなく、# 付きの id 名称だけでもない文字列」となる。
3. 指示されたインタープリタは jQuery()関数の定義に従い、(1)new 演算子を起動して空オブジェクトを生成し、それへの参照をキーワード this に与え、jQuery.prototype.init("p > a").prototypeを生成するする。
4. ここに 既に 526 行（jQuery.prototype.init.prototype = jQuery.prototype;）により init.prptotype は jQuery.prototype に等しくなっているから、jQuery.prototype.init("p > a").prototype は jQuery.prototype.init("p > a") の実行となる。
5. init("p > a")は jQuery("p > a") は init("p > a") の返値を受け取り、かつ 1. により init() の返値は配列とされているから jQuery("p > a") のインスタンス（＝this）の型も配列となる。
6. 指示を受けたインタープリタは、 jQuery("p > a") メソッドを実行し、jQuery.js に記述されているコードに従って、return new jQuery( context ).find("p > a"); を実行しようとする。
   しかし、context は与えられていないから、新たに init() コンストラクタが呼び出され、新たなインスタンスの生成が始まる。この時 this の参照先はそれまでの参照先を捨て init( context )コンストラクタによるインスタンスとなる。
7. init()コンストラクタの引数は39行から documentとなり、42-45行により init（）には[document]が返される。
8. this.setArray(context) が実行されると、jQuery(context) インスタンスは context を唯一の要素とする配列 [context] を生成し、return this.setArray(context) によって当該配列が init(expr,context) メソッドの返値となる。
9. ところで、この init(expr,context) は return this.init(expr,context) 行より呼び出されたのであるから、当該init()メソッドの返値は、jQuery( context ).find( expr ) コンストラクタに返される。
10. かくして、やっと .find(expr) メソッドが開始される。

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

• 初稿：2007/11/14
• 改訂：2008/02/03……抜本改訂

jQuery().find() が登場する箇所

jQuery().find() メソッドはjQuery()関数の初期化メソッドである init() メソッド内に２箇所登場します。

init() メソッドとその中の find() メソッドのコード表示/隠蔽

29: // A simple way to check for HTML strings or ID strings
30: // (both of which we optimize for)
31: var quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/;
32: 
33: // Is it a simple selector
34: var isSimple = /^.[^:#\[\.]*$/;
35:
36: jQuery.fn = jQuery.prototype = {
37: 　init: function( selector, context ) {
38: 　// Make sure that a selection was provided
39: 　selector = selector || document;
40:
41: 　// Handle $(DOMElement)
42: 　if ( selector.nodeType ) {
43: 　　this[0] = selector;
44: 　　this.length = 1;
45: 　　return this;
46:
47: 　// Handle HTML strings
48: 　} else if ( typeof selector == "string" ) {
49: 　　// Are we dealing with HTML string or an ID?
50: 　　var match = quickExpr.exec( selector );
51:
52: 　　// Verify a match, and that no context was specified for #id
53: 　　if ( match && (match[1] || !context) ) {
54:
55: 　　　// HANDLE: $(html) -> $(array)
56: 　　　if ( match[1] )
57: 　　　　selector = jQuery.clean( [ match[1] ], context );
58:
59: 　　　// HANDLE: $("#id")
60: 　　　else {
61: 　　　　var elem = document.getElementById( match[3] );
62:
63: 　　　　// Make sure an element was located
64: 　　　　if ( elem )
65: 　　　　　// Handle the case where IE and Opera return items
66: 　　　　　// by name instead of ID
67: 　　　　　if ( elem.id != match[3] )
68: 　　　　　　return  jQuery().find( selector );
69:
70: 　　　　　// Otherwise, we inject the element directly into the jQuery object
71: 　　　　　else {
72: 　　　　　　this[0] = elem;
73: 　　　　　　this.length = 1;
74: 　　　　　　return this;
75: 　　　　　}
76:
77: 　　　　else
78: 　　　　　selector = [];
79: 　　　}
80:
81: 　　// HANDLE: $(expr, [context])
82: 　　// (which is just equivalent to: $(content).find(expr)
83: 　　} else
84: 　　　return  new jQuery( context ).find( selector ) ;
85:
86: 　// HANDLE: $(function)
87: 　// Shortcut for document ready
88: 　} else if ( jQuery.isFunction( selector ) )
89: 　　return new jQuery( document )[ jQuery.fn.ready ? "ready" : "load" ]( selector );
90:
91: 　return this.setArray(
92: 　　// HANDLE: $(array)
93: 　　selector.constructor == Array && selector ||
94:
95: 　　// HANDLE: $(arraylike)
96: 　　// Watch for when an array-like object, contains DOM nodes, is passed in as the selector
97: 　　(selector.jquery || selector.length && selector != window && !selector.nodeType && selector[0] != undefined && selector[0].nodeType) && jQuery.makeArray( selector ) ||
98:
99: 　// HANDLE: $(*)
100:  [ selector ] );
101: },

第一は 53: if ( match && (match[1] || !context) ) の時、つまり、

1. (1)selector が文字列型で（48行）、
2. (2)31行で定義された quiclExpr にマッチし、
3. かつ (3)m[1] が存在し、
4. 更に(4)context が付与されていない場合において、
5. (5)selector 文字列が "#id" の形式の場合に、

jQuery().find( selector ) として登場します。（68行）

第二は文字列 selector が "･･<･･･>･･" でもなく、また "#id" でもない場合の new jQuery(context).find(selector) です（84行）。

どちらにも共通していることは、jQuery() 関数を再帰呼び出しすることであり、異なる点は new 演算子の有無です。どちらの場合においても jQuery 関数を再帰呼び出しするのですから、その定義から新しいインスタンスが作成されることに相違はありません。では何故 new 演算子の有無の別があるのか、興味深いところですが解明できていません。

new 演算子が有る jQuery 再帰呼び出しの場合には、二重に new 演算子が作用してしまうのではないかと考えますが、本当にそうなるのか、またその作用の意味は何か、解明できていません。

init() メソッドから呼び出される jQuery(context).find(selector) はどう動くのか

init() から呼び出される jQuery(context).find(selector) インスタンスメソッドは次のようになっています。

jQuery(context).find(selector) コードの表示/隠蔽

284: find: function( selector ) {
285: 　var elems = jQuery.map(this, function(elem){
286: 　　return jQuery.find( selector, elem );
287: 　});
288:
289: 　return this.pushStack( /[^+>] [^+>]/.test( selector ) || selector.indexOf("..") > -1 ?
290: 　　jQuery.unique( elems ) :
291: 　　elems );
292: },

再帰呼び出しされる前者の jQuery().find("#id") では、DOM ツリー全体を対象として find("#id") メソッドが実行され、後者では新たなインスタンスを生成した上で context（ context が与えられていなければ document 全体）を対象として find( selector ) インスタンスメソッドが実行されます。以下にその挙動の概要をまとめますが、find( selector ) インスタンスメソッドから呼び出される jQuery.find( selector, context )クラスメソッドの挙動の仕組みは別途解明することとし、それに先立ちこのクラスメソッドを利用する jQuery(context).find(selector) インスタンスメソッドの挙動を概観しておきます。

1. jQuery(context).find(selector) インスタンスメソッドの挙動概観

1. jQuery.map(this,fn(elem){}) メソッド起動
2. context 内の各々の要素 elem を対象として jQuery.find( selector, elem ) 実行
3. そのリターン値を elems に代入
4. 次に selector 文字列に対して、(1) "a b"（ ＋ でもなく＞でもない a 及び b （共に１文字）の間にスペースがある文字列）があるかどうか、あるいは、(2) ".." を含む文字列かどうかをチェック
5. この検証にヒットすれば jQuery.unique( elems ) を起動してその結果を返す。
6. ヒットしなければ elems を返す。

こうして context 内の selector に適合する要素が jQuery.find( selector, context ) クラスメソッドによって抽出され、これが jQuery( context ).find( selector ) に return されます。

2. $("#id") → $().find("#id") 呼び出しの場合の挙動

1. new 演算子がない $().find("#id") が呼び出されると、$() 呼び出しによって直ぐに 19 行で新たなインスタンスが生成され init() が起動されます。すると $ に引数はありませんから、init() 関数の第一引数には document が代入され、インスタンスは 45 行から [document] となりこれが 19 行から $() に return されます。
2. 次に、$().find("#id") つまり [document].find("#id") メソッドから呼び出される 285 行の map() メソッドにおいて、this は [document] を指し示し、第二引数の elem は map() メソッドの定義から document 内の個々の要素エレメントを意味します。こうして document 内の各要素に対して 286 行のクラスメソッド $.find( selector, elem ) が適用されます。ここで第一引数には当然 "#id" が渡されます。つまり、
   var elems = jQuery.map([document], function(elem){ return jQuery.find("#id", elem) })
   です。
3. elems 取得後には、 "#id" 文字列に対して、(1) "a b"（ a も b も ＋ でもなく＞でもない１文字で間にスペースがある文字列 ）があるかどうか、あるいは(2) ".." を含む文字列かどうかがチェックされます。
4. この検証にヒットすれば jQuery.unique( elems ) を起動してその結果が返されますが、 "#id" 文字列の場合その内容からこの検証にはヒットしません。
5. こうして "#id" に適合する要素 elems が jQuery.find( "#id", [document][i] ) クラスメソッドによって抽出され、これが $().find("#id") に return され、更に $("id") に返されて目的が達成されます。

3. new jQuery(context).find(selector) 呼び出しの場合の挙動

これについては既に 1. で述べたことと全く同一になるので省略します。

次のエントリイでは...

jQuery.find() クラスメソッドを解読します｡