社内 IRC の #javascript チャンネルで盛り上がったのがきっかけで、社内の有志数名で JavaScript ソースコードリーディング勉強会をやった。この前予習した Raphael Sketchpad のソースコードを読んだ。
前に Rails勉強会@東京で yugui さんが bundler のソースコードリーディングをやるセッションに参加したことがあり、そのスタイルを踏襲してやってみた。言いだしっぺのおれがノート PC を会議室のでかいディスプレイにつないでブラウザで github のページを開き、解説、というよりは実況しつつ読み進めていく、という感じ。たまによくわかんないところとか、「ここは参考になりそう」と思ったところは参加者に話を振ってみたりして雑談を交えつつ。一応事前に予習してきて全体像がつかめていたので、途中で大ポカせずにまぁまぁのペースで進めたかなと思う。1時間とってあって、全部読めると思っていたんだけど、お喋りがすぎたのか半分くらいまでしか進まなかった。
以下、覚えてる範囲で、終わったあと書きなぐったメモ。
- window.Raphael を受け取る（コンストラクタ）
- raphael.sketchpad = function() で自分自身を追加（グローバルのスコープを汚さない）
- setter/getter
- 両方あるやつ
function(value) {
if (value !== undefined) { // getter
} else {
}
}
- プライベート変数を隠蔽？
function hoge() {
return _hoge;
}
- jQuery.extend でオプション値の継承、デフォルト値を設定
- 外部からコールバック処理関数を上書きする
var _change_fn = function(){};
self.change = function(fn){
_change_fun = fun;
}
function _fire_change(){
_change_fn();
}
-
- デフォルトでは空の関数を登録しておき、外部から関数をセットできる。
- 特定の処理が終わったあと _fire_change() でコールバック関数を呼び出し。
- マウスでキャンバス領域をドラッグしたときテキスト選択の反転が出ないようにする工夫
- disable_user_select, enable_user_select (CSS + IE 独自イベント）
- self.animate()
- 再帰処理
- function animate() のなかで setTimeout(animate, ms) と自分自身を読んでいる
- マウスイベントを捕捉する範囲
- （mouseup イベントはキャンバス領域の外までドラッグしてボタンを放す場合も捕捉したいので document に対して bind/unbind する）
- iPhone Safari の特別なイベントオブジェクト
- （touchend のときは mouseup と同様に広い範囲でイベントを捕捉する）
- JavaScript の型判別（末尾にユーティリティ関数群）
次回、続きを読むので、次へつなげるための KPT を。
Keep
- 開催できた（有言実行）
- JavaScript コードを書くときの「お作法」的なものを学べた（名前空間的なものとか setter/getter の作り方とかコールバック関数を登録する仕組みとか）
- 大きな枠組を把握するために「浅く読む」スタンスを維持できた（わからないところに固執して停滞しなかった）
Problem
- 思ってたより時間がかかりすぎた（一回で読みきりたかった）
- おればっかりが喋っていた（もっと参加者全員が深くコミットできる仕組みにしないと集まってやる意味がなくなる）
- 読み方が浅かったのでちょっと込み入ったところはわからないままになってしまった
Try
- 次回でこのライブラリを読み終える
- 次々回からは一回で読みきれるお題を選ぶ（もうそういうコンパクトなやつを読むと決まってるけど一応あげておく）
- いま出てるぶんのお題を読みきるくらいの回数は開催し続ける（あと三回で達成見込み）
