GitHubはじめに毎日新しいJavaScriptライブラリが登場していると思いますが、それらがどういう実装になっているかを知ることはライブラリを使う以上に大事かもしれません。ソースを全部読めば分かるかもしれませんが、それをやるには時間が足りません。JavaScriptに限った話では無いですが、今回はJavaScriptを例に”特定の機能はどうやってるんだろ?”という事を調べる方法についてです。探す前にドキュメントに載ってないかを見るのが手間がなくて一番よいですが、書いてない場合は実装を見ます。Vue.js今回はVue.jsというAngularJSやKnockoutのようなViewとModelのデータバインディグを行うライブラリを例に、データバインディグはどうやっているのかを2つの方法で調べてみたいと思います。コードをステップで見ていくこれはよく見る方法で皆さんもやったことがあると思います。しながら目的の実装を探すという単純な方法です。なってるので、Vueコンストラクタの実装を見ていけばいいことがわかります。Vueの部分にブレークポイントを貼るだけで準備完了です。後は、デバッガーのステップ実行しながら、怪しい関数等を見ていくだけです(今回ならObserveとかbindingとかの用語を見ていけば多分見つかるはずです)以下は実際に見ていった動画です勘であてるもう一つ短時間で探す方法として、その機能(今回はデータバインディグ)に使われそうなメソッドや名前で検索してしまう方法です。今回はデータバインディグがキーワードです。Supportを見るとES5サポートしている事が前提となってることがわかります。supported.ここで、ピンと来る人もいると思いますが他のところもチェックすると、サンプルコードを見てもknockout.jsのように値の変更を監視するためにラッパーをかぶせたりはしていないように見えます。ようなラップが必要になります。Qiitaこの情報から推測するとJavaScriptネイティブのgetter/setterを使ってるんじゃないかと気付きます。getter/setterを設定(他にも方法はありますが)するObject.definePropertyはES5からサポートされているので、ES5をサポートしてないブラウザはサポート外になってるんじゃないかという感じですね。探すポイントは推測できたので実際に検索してみます。(こっから先、普通に文字列検索してもいいと思うので若干蛇足気味です)普通にgrep的な検索でもいいですが、JavaScriptを例にしたのでgraspを使ってみます。(多分このケースだと普通に文字列検索した方が楽です...)graspは単純な文字列検索ではなくて、JavaScriptの構文を元に検索/置換が出来るコマンドラインツールです。以下でも軽く紹介してるので見てみるといいかもしれません。graspでインストールしておきます。descriptor)のような構文なので、上記のように呼び出してる場所を検索したいと思います。descriptor)に該当するものを検索する場合、graspでは以下のように書くことが出来ます。Queryを使うというオプションです。いうのが引数の数(3つ)あることがわかります。みたいな感じ?正規表現と違って、ホワイトスペースや改行等余計な事を意識しなくても書くことが出来ます。その結果を見ると幾つか使ってる箇所がわかります。後は、見つけた場所を実際に見ていくといった感じです。は長いのでライブラリの内部では以下のようなエイリアスを貼って使っているかもしれません。いうのも検索出来ます。正規表現でも出来そうに見えますが、以下のようなコードだと結構難易度が上がります。Object.defineProperty;graspだと、以下のようにして検索することが出来ます。test.js結果を見るとちゃんと該当する部分を検索出来てる事がわかります。いうのは、CSSセレクタをイメージすると分かりやすいです。ASTの要素の事を言っています。いう要素(var-dec)に該当します。マッチするものを検索しています。1の部分)この辺はコードをパースした結果を見比べて見るといいかもしれません。QueryというCSSセレクタ的なものもあるので、こちらを使った場合は直感的では無いですが以下のように書くことが出来ます。test.js今回はES5サポートというキーワードを元に安全で効率も良いgetter/setterを使ってると推測して検索しましたが、キーワードが絞れない場合は実際にステップ実行を見ていったほうが楽だと思います。古いIEをサポートしてるなら他の方法が幾つかありそうでキーワードから考えるのは中々難しい。checkingというやり方をしている等やり方的に幾つかでてくると思うので、ステップ実行やドキュメントから探したりした方が効率が良さそうです。今回紹介した方法以外にも、最近のライブラリならある程度モジュールでファイルが別れてるはずなので、ファイル名をヒントに探すとか、GithubやStackOverFlowで検索するとかやり口はいくらでもあります。今回ターゲットにしたVue.jsもCommonnJSで書かれていて、componentを使ってファイルをビルド出来るようにしてました。pluginであるgulp-componentを使ったりしてた)おわりにこの記事では、JavaScriptのライブラリの実装を見ていく2つの方法について書きました。デバッガーを使ってステップ実行をして中身を見ていく方法graspを使ってキーワードから探していく方法JavaScriptでは公開されてるライブラリも含め、普通のウェブサイトでもソースコードが見られてので、実際に動いてるソースが探せば見つけやすい世界です。Webkit/Chrome/Firefox(27〜)のDevToolsではJavaScriptの整形表示機能もあったりします。ソースコードから学べることも多いので、興味があるものは色々読んでみるといいかもしれません。タグ:CodeReadingjavascriptlibraryお知らせ欄JavaScriptに関する最新情報は週一でJSer.infoを更新しています。efcl/efcl.github.ioからご意見下さい関連記事コメントを。