Roppongi.JS #12008年03月21日 21時52分

さる 3 月 15 日に開かれた Roppongi.JS の jQuery コードリーディングにオンラインで一部参加しました。途中参加に途中退室、一部こちらの都合で音声なしでの中継視聴とあわただしかったものの、jQuery のソースコードをじっくり読むいい機会になりました。

jQuery オブジェクト

今回個人的にわかったのは jQuery オブジェクト、すなわち jQuery(...) と jQuery 関数 (または $ 関数) を呼び出したときに返ってくるオブジェクトは何なのかということ。jQuery オブジェクトは配列のようなオブジェクトであり、length プロパティと 0 ~ n (n は length - 1) までの数値的な名前のプロパティを持ちます。配列としての各要素 (数値的プロパティ) は DOM ノードオブジェクトを指しています。

jQuery オブジェクト自身はは Array オブジェクトではないものの JavaScript のオブジェクト (ECMAScript でいうネイティブオブジェクト) であり、DOM ノードオブジェクト (ECMAScript でいうホストオブジェクト) ではありません。

DOM では document.getElementById("id")document.getElementsByTagName("element-name") で返ってくるオブジェクトはそれぞれノードとノードリストであり、まったく性質の異なるものです。それに対して、jQuery では jQuery("#id")jQuery("element-name") で返ってくるのはいずれも同じ性質の jQuery オブジェクトであり、違いといえば前者の (配列としての) 要素数が最大で 1 であるのに対し、後者の要素数、すなわち length プロパティの値は 2 以上になりうることぐらいです。

この、単一のノードを要素数が1の配列またはリストとして扱うという発想は、E4X の思想とよく似ています。E4X では、ある XML オブジェクトと、その XML オブジェクトのみを含む XMLList オブジェクトは、基本的にまったく同様に振舞うからです。

jQuery オブジェクトのメソッド

jQuery オブジェクトのメソッドは、何を返すかによって以下の3種類に分けられます。

  1. 自分自身 (メソッドを呼び出した jQuery オブジェクト) を返すもの。
  2. 新たに作成した jQuery オブジェクトを返すもの。
  3. jQuery オブジェクト以外の値を返すもの。

このうち、2 で作られた jQuery オブジェクトに関しては、通常の jQuery オブジェクトが持つプロパティに加え、メソッドを呼び出した jQuery オブジェクトを指す prevObject プロパティを持っています。end メソッドでこの prevObject プロパティの値を返すことにより、メソッドチェーンを柔軟につなげていくことが可能となっているのです。

雑感

今回途中参加の身で感じたのは、現在の進行状況がすぐわかるといいなということです。具体的には、現在何行目から何行目までを読んでいるのか、どこを飛ばして読み進めるのかといった情報を、逐一チャットに記録していってほしいと思いました。

また、何人かが jQuery のリファレンスへのリンクを張ってくださったのは非常に助かりました。jQuery では引数の型によって処理を分けることが多いので、どんなときにどういう処理が行われるのかをざっと知っておくだけでもずいぶん楽になります。

jQuery は非常に興味深いライブラリであり、その全貌を積極的に探っていけるこのようなイベントは貴重な存在であると感じています。主催の HolyGrail さんをはじめ、運営に携わった方々、そして参加者の皆さんに深く感謝します。