Roppongi.JS#1(2008/03/15)に参加しました

Conference

3/15(sat) - Roppongi.JS#1 jQuery Code Reading(1)のお知らせ
Roppongi.JS#1 jQuery Code Reading(1) - 反省会


オンラインの jQuery Code Reading。jQueryを使ったこともないのに＞＜参加。せっかく出たので、内容の抜書きと感想を。
今回読んだのは、1〜240行目まで。

といっても自分の参加は遅れて14時頃から。ちょうど24行目のこの辺↓をやってた。

if ( window.$ )
	var _$ = window.$;

jQueryの使い方の例

こんな感じで使います。jQueryは、このようにメソッドで返って来たオブジェクトでさらにメソッドを実行して行く、メソッドチェーンが便利。

$('div') // jQuery('div')
.addClass('baa')
.append('foo');

メソッドチェーンを実現するために、

メソッド内で

return this;   // thisは jQueryオブジェクト自身

して、jQueryオブジェクトを返しまくっています。

.init() はいきなりはむずいのでスキップ。でも一つだけ。

jQuery.prototype.init.prototype = jQuery.prototype;

549行目のこれで、.init() がコンストラクタ機能を担えるようになります。jQuery() の中で .init() することで、いちいち new せずに jQuery オブジェクトが生成できるようにしています。

.length属性を定義してるのは、Array のダックタイピングのため

この .length 属性があるおかげで、jQuery オブジェクトは、いろんなもの(例えばFirebug)から配列として扱えます。

Javascript では、.lengthがあるものは Array として扱えるらしい。知らなかったー。

.size() の存在意義がないように見えるんだけど...

.length の alias 、もしくは後方互換かなぁ?

.setArray() は破壊的に要素をセットするメソッド

145行目の

this.length = 0;
Array.prototype.push.apply( this, elems );

で、this.length = 0 にして既存の中身をチャラにしてから push しているので、破壊的。ただし、破壊前の配列の要素数が配列 elems の要素数がより多い場合は、その余り分の個数の要素は存在する(indexを直指定してgetメソッドを実行すれば取れる)。だけど、jQueryオブジェクトの length が elems の length と同じ(余り分のない数)にセットされるので、余り分は存在しないかのように扱われる。

.attr() は内部使用のためのメソッド

外からは通常使わない。

attr: function( name, value, type ) {
　...

引数が name のみの場合は get, value がある場合は set。
第三引数の type = 'curCSS' の場合は、styleの書き換えになる。このパターンは、すぐ下で定義されている .css() でのみ使われている。

.wrapAll()

超むずい。今回一番の難関。結局、自分にはよくわからなかった。

機能としては、セレクタにマッチする要素を wrap するメソッド。例えば、

<span id="id">aa</span>

上記のソースに以下のコードを適用すると、

$('#id').wrapAll("<div></div>");

こうなる↓。

<div><span id="id">aa</span></div>

メソッドのソースはこんな感じ↓

wrapAll: function( html ) {
	if ( this[0] )
		// The elements to wrap the target around
		jQuery( html, this[0].ownerDocument )
			.clone()
			.insertBefore( this[0] )
			.map(function(){
				var elem = this;

				while ( elem.firstChild )
					elem = elem.firstChild;

				return elem;
			})
			.append(this);

	return this;
},
  • clone() で既存のwrap要素があっても消えないようにして、
  • insertBefore() で場所を決めて、
  • map() で、wrapする要素(.wrapAll()の第一引数)の一番下の階層をつかまえて、
  • そのさらに下に、wrapされる要素を .append() する

という流れらしい。clone() の所がいまいちわからなかった。

感想とか

  • 初めて必要に迫られずに他人のコードを読んだけど、コードリーディングって意外に面白い。
    • 特にみんなで読むと、理解が速い。わからない時、みんながそれぞれ別の角度で考えてるから、自分が間違った方向に行ってても他の誰かが答えを見つけて軌道修正してくれる。
  • コードリーディングで4時間は長い
    • 見てチャットしてるだけのこっちはいいけど、メインの id:HolyGrailさんはものすごく疲れたはず(お疲れ様でしたm(_ _)m)。長時間なら、誰か交代要員が欲しいところ。
  • メイン会場に複数人がいるなら、一人チャット監視係を決めた方がいいと思う。
    • メイン会場で一生懸命資料を探してる間に、チャット内で疑問が解決したり、「ここは飛ばそう」とか話が進んでたりしてたので。
  • サイ本はあるなら手元に準備した方がいい。会社に置きっぱなしで泣いた(T_T)。
  • Ustream & チャット用と、コード用でモニタが2個欲しかった。今度はデスクトップとノートの両面用意しよう。