jQueryのソースコードを読むための参考サイト２０選
古いバージョンも参考になる
最新バージョンはコードが1万行くらいあってなかなか大変です。読み疲れたら、古いバージョンを見て気分転換しましょう。
古いバージョンは実装がシンプルなので、全体像を把握するにはよいかもしれません。
バージョン1.0 (わずか1800行。ver1.7の５分の１です)
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
心がまえ
大事なことが３つあります。１．小さい目標を持ちましょう
ソースコードを全部読破してやろうなどと意気込む必要はありません。
そんなのは無理です。
肩の力を抜きましょう。
「eachを自分で実装する」とか、
「$('#id').click() の仕組みを調べる」とか、
小さくて具体的な課題を設定してみましょう。
そうすればコードを読む目的がはっきりしますし、必要な部分だけ読めばよいので気が楽になります。
私の場合は、eachの中の"this"の仕組みを知りたいと思ったのがきっかけでした。
自分で再実装しようとしてjQueryのコードを読みました。
jQueryのeachの仕組みを徹底的にわかりやすく解説してみた。 - DQNEO起業日記
２．デバガを使って動きを追いましょう
ソースコードを静的に眺めているだけではなかなか頭に入りません。
簡単なコードを書いてみて、デバガでステップ実行しながら動きを見てみましょう。
おすすめは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の使い方
- Chrome Developer Tools の使い方 02 - Scripts パネルを使ってみよう!! | TM Life
- Google Chrome Developer Tools入門 in DevFestX Sapporo
３．アウトプットを出すこと
ただ学んでいるだけでは記憶に定着しません。
その場ではわかったつもりになっても、すぐ忘れてしまいます。
ブログに書く、自分で再実装する、人に説明する、などしてアウトプットしてみましょう。
アウトプットすれば、記憶に残る率が格段に高まります。
理解した内容をブログに書けば、他の人の助けにもなります。
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 - MDN (Mozilla Developer Network)
- JSRef - Alternative MDN javascript Documentation viewer
下記書籍もおすすめです。
特にサイ本は、JavaScriptの言語仕様を網羅しているので重宝します。
クロージャについて
jQueryはとにかくクロージャを多用しています。中身はクロージャばっかりです。
というかほぼ全部クロージャです。
クロージャについて一度しっかり学びましょう。
[JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記
最後に
ソースコードを読んで何の得があるのか？と思う人もいるかもしれません。私が思うに、メリットは下記のものがあると思います。
- jQueryの使い方に関するもやもやが解消される。(例: $.eachと$('li').eachの違い )
- 今まで知らなかったjQueryの使い方に気づく。
- JavaScript言語そのものへの理解が深まる。
それではEnjoy!
カテゴリ:
jQuery
JavaScript