Kanasan.js#2に参加しました。

javascript prototype.js

12/8(土)、Kanasan.jsに参加してきました。
随分遅れての報告です。


今回は朝９時から２１時までの長丁場に関わらず
総勢24人の参加者という盛況っぷり。


私は友人の結婚披露パーティがあったので、
夕方には撤収しましたけどね。


主催のKanasanが言っておられたけど、
これまでの３回行われたKanasan.jsは何故か毎回、
参加者が24人だそうです。
有志だけでやってる事を考えると結構な偶然ですね。
しかもメンバー一新しながらやってるのに。



prototype.jsのバージョンが前回の1.5.1.1から
最新版の1.6.0に上がりました。
ujihisaさんの話ではrails2.0のリリースに伴い、
最新版は1.6.0.1だそうですが。
（次回はまた上がってるんだろうか。。）


そのせいでコード量も飛躍的に増えたみたいなんですね。
nanto_viさんの話だとDiffファイルだけでもとの1.5.1.1の
全ソースコードと同じくらいの容量があったようです。

今回の勉強会の流れ

  • 午前の部

　フリートーク
　↓
　Kanasanさんによる前回のおさらい
　↓
　nanto_viさんによる1.5.1.1と1.6.0の違い講座
　↓

  • 昼休み（５０分ほど）
  • 午後の部（CodeReading）

　#527 Stringの終わり〜 #583 Templateの終わりまで
　↓
　#587 Enumerableの最初〜 #804 Enumberableの終わり
　↓
　（長めの休憩）
　↓
　#805 Arrayの最初〜 #954 Arrayの終わり
　↓
　#979 Hashの最初〜 Hashの終わり？
　ここで途中退場しました。
　（最後はAjaxの終わり頃までいかれたみたいですね。）

フリートークの中から

  • 主に使うJSライブラリ

　　Prototype.js（７、８人）、Jquery（３、４人）、GWT（１人）
　　dojo、mochkit、YUI(Ext)はいませんでした。

  • Ajaxを使った事ある人

　　ほとんど全員

  • Editor

　　Emacs派多数。vim劣勢。Eclipse絶滅危惧種といった感じか。

午前中のプレゼンの中から

  • Kanasanさん

　聞けば前日朝４時まで資料作成されて、
　翌７時起きでやられたとか。
　本当にお疲れ様です。
　wiiのコントローラーを使っての操作、
　今回は大成功で良かったです。

  • nanto_viさん

　日本語の変数、関数を使ってユーモアも
　交えた解りやすいプレゼンでした。
　前回やった部分も改めて例題を挙げながら説明して
　もらえたので理解がぐっと深まったと思います。
　1.6はFunction.prototypeの拡張コードが増えて、
　より関数的になっていく感じですね。


　見落としやすいところで、
　Function("")関数を使い作成した関数はトップレベルの
　スコープを持つというところ。

var i = 0;
function create(i){
  return new Function("return ++i;");
}

var c = create(10);
alert(c()); // ⇒ １

i = 100;

var d = create(20);
alert(d(20)(); // ⇒101
alert(c()); // ⇒102

　要は関数内スコープで関数を作成しても、
　トップレベルスコープを共有するので注意が必要。
　トップレベルとはwindow。
　なのでFunctionによって作成された関数内で
　windowのプロパティを書き換えたりしないように気をつけないと。

  • 前回も話題になったが改めて数値リテラルに直接プロパティを参照する書き方。

　1 .constructor // 数値の後に半角スペース
　(1).constructor // 括弧でくくる
　1..constructor // ピリオド二つ
　1.constructor // Syntax Error（1の直後の点は小数点と見なす為

　Function.toString()で整形された文字列が返る
　JScriptではそのままの文字列が返る

  • 1.6のClass.createはMixInのような書き方ができる。
var 船 = {/* */};
var 車 = {/* */};

var 水陸両用車 = Class.create(船, 車);
var mycar = new 水陸両用者();

　この例すごく解り易かったな。

  • 継承して作ったクラスでもprototypeチェーンが繋がるようになった。

　これで昔作った自作の継承はお払い箱だ。。
　捨てる前に一応ゴミコード残してみよう。
　prototypeチェーンが繋がるだけのシンプルな継承ですが。

Function.prototype.extend = function(properties) {
	var Temp = new Function();
	Temp.prototype = this.prototype;
	var new_class = function(){
		this.initialize.apply(this, arguments);
	};
	new_class.prototype = new Temp();
	new_class.prototype.superclass = this.prototype;
	new_class.prototype.constructor = new_class;
	
	for (var property in properties)
		new_class.prototype[property] = properties[property];
	return new_class;
}

// こんな感じで利用。
var MyClass = Class.create();
var SubClass = MyClass.extend({
  subfunc: function(){ alert("拡張") }
});
var obj = new SubClass();
obj.subfunc();
  • applyの第１引数にnullを渡すとGolbalオブジェクトとして実行される。

　関数内でthisはオブジェクトである事が保障される。）

  • new Element("div")のように書けるようになった。

　まだreadingではそこまで到達してないけどこれは期待大。
　jqueryに比べてprototypeは作成に弱いと思ってたので。

new Element("div", {style:
       {backgroundColor:"red",
        width: "300px"}});

　みたいに書けたりするのかなぁ。

CodeReading部分は

他のみなさんにおまかせします。

最後に

みなさん本当にお疲れ様でした。
主催のkanasan,ujihisaさんありがとうございました。