jQuery ソースコードを読むための参考資料一覧

JavaScript 勉強会

2010/09/26(日) に京都で Kanasan.JS jQuery コードリーディング #2 が行われる(告知ページ)。みんなで jQuery のソースコードを読むイベントで、今回が2回目だ。参加者募集中です。

jQuery はファイル1つだけのライブラリなのですごい環境とかもってなくても大丈夫なんだけど、読むうえで参考になるサイトとかをまとめてみた。この辺の準備をしておくと理解が深まると思う。

ソースコード

http://code.jquery.com/jquery-1.4.2.js
http://github.com/jquery/jquery

まずは jQuery のソースコードを取ってこないと始まらない。今回はバージョン 1.4.2 を使用する。jQuery の公式サイトから圧縮していないコードをダウンロードしよう。

それと、jQuery ソースコードは Git で管理されてる。Git が使える人はソースツリーを取ってくるといろいろできて便利。

% git clone git://github.com/jquery/jquery.git
# バージョン 1.4.2 に移動
% git checkout 1.4.2

src の下に分割されたソースコードがいっぱいはいってて、git log とか git blame で見れる。結合したいときは make, rake, ant のどれかで dist/jquery.js ってとこにソースコードができあがる。

あと、 test ディレクトリの下に test/unit/core.js とかテストコードがあって参考になる。

Git 使えない人でも GitHub にリポジトリがあるのでブラウザからログとか見れるよ。

リファレンスマニュアル

コードを読むときにリファレンスマニュアルもあわせて参照すると便利。その関数が何をするものなのか、とか呼び出し方の例とかが書いてあって参考になる。

公式のリファレンスマニュアル。何はともあれ、このページが一番詳しいし信用できる。

日本語リファレンスもある。これは 1.4.2 に対応してるのでいい感じ。

これは別の日本語リファレンス。うさぎがヌーヌー言ってるやつ。バージョン 1.3.2 対応のもようでちょっと古い。

チケット管理

http://dev.jquery.com/

jQuery のソースコードを読んでると、こんな感じで #xxxx みたいな数字がコメントに書いてあることがある。

// 例えば 452 行目
// aren't supported. They return false on IE (#2968).

これはバグ管理システムのチケット ID で、「この部分はバグとして登録されてるよ」ってことを表してる。

登録されたチケットの詳細は jQuery の Bug Tracker ページから参照できる。チケット ID が分かってる場合は http://dev.jquery.com/ticket/2968 みたいな感じで「/ticket/チケットID」形式の URL を開くとそこが詳細ページになってる。あと、「Search Tickets」の欄に「#2968」とかチケット ID を入力すると詳細ページに移動できるので、そっちでも OK。

チケット詳細ページを見ると「どんな問題があったのか」、「どうやって修正するか」とかの議論が見れる。「IE の場合は XXX でムキー!」とか書いてあるので参考になる。

コーディング規約

http://docs.jquery.com/JQuery_Core_Style_Guidelines

jQuery にもコーディング規約がある。まあインデントスタイルとかは読む分には関係ないんだけど、大事そうなところを挙げておく。

'==', '!=' ではなくて '===', '!==' を使用する。

'==', '!=' はいろいろキモい動きをするので、代わりに '===', '!==' を使う。でも == null っていうのは === null または === undefined っていう意味で便利なので、この場合は '==' とか '!=' を使う。

for/in の hasOwnProperty チェックはしない

Object を for/in でぐるぐるループさせて連想配列として使うことがある。

// 素朴な書き方
for (name in obj) {
  // 何か処理
}

でも、もし Object.prototype を拡張してたらそいつまで for/in に出てきてしまってうまく動かなくなる。それを防ぐために hasOwnProperty でチェックするっていうテクニックがよく使われる。

// 行儀のいい書き方
for (name in obj) {
  if (obj.hasOwnProperty(name) {
    // 何か処理
  }
}

jQuery のコードでは一つ目の素朴な書き方で書いてる。Object.prototype を拡張してしまったらちゃんと動かなくなるけど、そんな邪悪な環境はサポートしないそうだ。

型チェック

型をチェックする方法も書いてある。
チェック方法は以下。

  • String, Number, Boolean, Object

typeof object === "string" など

  • Plain Object, Function, Array

それぞれ jQuery.isPlainObject(object), jQuery.isFunction(object), jQuery.isArray(object)

  • Element

object.nodeType

  • null

object === null

  • null または undefined

object == null

  • undefined
    • グローバル変数の場合 : typeof variable === "undefined"
    • ローカル変数の場合 variable === undefined
    • オブジェクトのプロパティの場合 : object.prop === undefined

Plain Object ってのは、何か継承したのじゃない単なるオブジェクトのこと。要するに {} 形式で書いたやつ。

正規表現

正規表現を使う場合、.test() と .exec() を使う。string.match() は使わない。理由は書いてないので分からない。単にどっちかに統一したかっただけなのかもしれない。

その他の参考記事

jQuery ソースコードを読む連載記事。バージョンは 1.2.2 で古いけど、詳しい解説があって参考になる。

ソースコードを読むための基礎知識。

jQuery のソースコード ビューアー。メソッド名を入れると対応するコードが表示される。メソッドがどこで定義されてるのかわかんないときに見る。

この辺を押さえておくとだいぶコードが読みやすくなると思うので、是非コードリーディングに挑戦してみてください。