jQueryのソースコードを読むための参考サイト20選

本家サイトとソースコード

本家サイト
http://jquery.com/

最新バージョンのソースコード
(よく使うのでURLを覚えてしまいましょう)
http://code.jquery.com/jquery.js

APIリファレンス。メソッドの呼び出し方法を押さえておくのは重要です。
http://api.jquery.com/

日本語版APIリファレンス (英語が苦手な人向け)
http://semooh.jp/jquery/

Github
https://github.com/jquery/jquery

古いバージョンも参考になる

最新バージョンはコードが1万行くらいあってなかなか大変です。
読み疲れたら、古いバージョンを見て気分転換しましょう。

古いバージョンは実装がシンプルなので、全体像を把握するにはよいかもしれません。

バージョン1.0 (わずか1800行。ver1.7の5分の1です)
http://code.jquery.com/jquery-1.0.js

バージョン1.1 (2100行)
http://code.jquery.com/jquery-1.1.js

バージョン1.2 (2900行)
http://code.jquery.com/jquery-1.2.js

バージョン1.3 (4200行)
http://code.jquery.com/jquery-1.3.js

バージョン1.4 (6000行。セレクタエンジンがSizzleになりました。)
http://code.jquery.com/jquery-1.4.js

バージョン1.5 (8100行)
http://code.jquery.com/jquery-1.5.js

バージョン1.6 (8800行)
http://code.jquery.com/jquery-1.6.js

バージョン1.7 (9300行)
http://code.jquery.com/jquery-1.7.js

心がまえ

大事なことが3つあります。
1.小さい目標を持ちましょう

ソースコードを全部読破してやろうなどと意気込む必要はありません。
そんなのは無理です。
肩の力を抜きましょう。

「eachを自分で実装する」とか、
「$('#id').click() の仕組みを調べる」とか、
小さくて具体的な課題を設定してみましょう。

そうすればコードを読む目的がはっきりしますし、必要な部分だけ読めばよいので気が楽になります。

私の場合は、eachの中の"this"の仕組みを知りたいと思ったのがきっかけでした。
自分で再実装しようとしてjQueryのコードを読みました。
jQueryのeachの仕組みを徹底的にわかりやすく解説してみた。 - DQNEO起業日記
2.デバガを使って動きを追いましょう

ソースコードを静的に眺めているだけではなかなか頭に入りません。
簡単なコードを書いてみて、デバガでステップ実行しながら動きを見てみましょう。
おすすめはGoogle ChromeのDeveloper Toolsです。




だまされたと思ってやってみてください。
下記のようなHTMLファイルを作って、Google Chromeで開いてDeveloper Toolsで実行するだけです。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
debugger;   // ← ここでスクリプトが停止する

$(function(){
  debugger;   // ← ここでスクリプトが停止する

  var obj = $('#x'); // ← いったん変数に代入させるのがミソ

  obj.click(function(){
    alert(this.innerText);
  });

});
</script>
</head>
<body>
<div id="x">(`・ω・´)キリッ</div>
</body>
</html>
デモページ

スクリプトや関数内の冒頭で"debugger;"と書くのがコツです。そこで実行が停止してくれます。

何回も何回も動きを追っていると、自然とjQueryの仕組みがつかめてきます。

Developer Toolsの使い方
3.アウトプットを出すこと

ただ学んでいるだけでは記憶に定着しません。
その場ではわかったつもりになっても、すぐ忘れてしまいます。

ブログに書く、自分で再実装する、人に説明する、などしてアウトプットしてみましょう。
アウトプットすれば、記憶に残る率が格段に高まります。
理解した内容をブログに書けば、他の人の助けにもなります。

jQueryのソースコード読解を手助けしてくれる解説サイト

定番ですが紹介しておきます。

jQuery ソースコードを読むための参考資料一覧 - ess sup
とてもよくまとまっています。

jquery.jsを読み解く:第1回 jQueryライブラリ(1~171行目)|gihyo.jp ... 技術評論社
2008年の記事ですが今でも役に立ちます。

jQueryを読むために知っておきたい6つの知識 | tech.kayac.com - KAYAC engineers' blog
カヤックさんのブログは他にも役に立つ記事がいっぱいあります。

[jQueryコードリーディング] - <s>gnarl,</s>技術メモ"'<marquee><textarea>¥
2011年の記事。jQuery1.5のコードリーディング。

JavaScript言語について

jQueryは内部でトリッキーなテクニックを多用しています。
JavaScriptの言語仕様そのものを深く理解していないと、歯が立たないでしょう。
一度立ち止まって言語仕様からしっかり勉強しましょう。

下記書籍もおすすめです。
特にサイ本は、JavaScriptの言語仕様を網羅しているので重宝します。

クロージャについて

jQueryはとにかくクロージャを多用しています。
中身はクロージャばっかりです。
というかほぼ全部クロージャです。

クロージャについて一度しっかり学びましょう。
[JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記

最後に

ソースコードを読んで何の得があるのか?と思う人もいるかもしれません。
私が思うに、メリットは下記のものがあると思います。

  • jQueryの使い方に関するもやもやが解消される。(例: $.eachと$('li').eachの違い )
  • 今まで知らなかったjQueryの使い方に気づく。
  • JavaScript言語そのものへの理解が深まる。

それではEnjoy!
カテゴリ:

人気記事