牛尾でございます。久々に投稿します。
最近某プロジェクトをお手伝いしているのですが、
お客様のご要望により、私のスーパー苦手で
大嫌いなJavaScriptと格闘することになりました。
そのややこしいJavaScriptプログラムができる過程で
テスト駆動はやっぱりええなぁ〜と思いましたので
ちょっとレポートします。
-------------------------------------------
200X年 それは某プロジェクトで始まった。
主人公たちはUというSEと大型新人（通称大型）
のペアである。彼らは苦手とするJavaScriptと
格闘する羽目になる。
#この物語は、ほぼ本当のことであるが、一部
ストーリを簡略化するためにフィクションが
混じっています。
PJリーダ氏：Ｕ君。できたら、メニューって
プルダウン式のやつにできへんかなぁ。
マウス乗せたら垂れ下がるよーな。
Ｕ氏 ： JavaScriptっすか、、、結構面倒ですね。
PJリーダ氏：お客さんがもともとそれを望んでる
見たい。できたらやってよ。
Ｕ氏 ：うーむ。しゃーないっすね。。
＃全然JavaScriptに強くないＵ氏はインターネット
から、サンプルを探してきて、内容を読んで
何とかわからんなりに実装する。結構時間が
かかった。
（ま、JavaScriptなんて、よーわからんから、
超嫌いやけど、コピペでええわ。JavaScriptだし）
〜そして、ＰＪ内の計画ゲーム（２人しかしていなが）で、、
お客様：こんな感じだな。でもメニューは３階層まであるん
だよ。だから、垂れ下がってるメニューにマウスのせたら
横に伸びてくれんとね。（さらっと）
Ｕ氏 ：この機能はJavaScriptで３階層にしたら、結構難しい
んですよ。（だってJavaScriptわからんし、元の
サンプルなんか改造できるような代物ではない、、）
だから、２階層で工夫するとかしたほうがいいかもいれません。
PJリーダ氏：で、マウスを２階層目に乗せたらすぐ、横のメニュー
が出る形式でいいですよね。
Ｕ氏 ：！！！なんてことを、、、それだったらやるっていってる
見たいなもんやん。
というわけでＵ氏とオブジェクト指向をいきなり操れる
大型新人氏はいきなりわれわれにとってはスーパー難しい
JavaScriptと格闘することに、、、、
Ｕ氏 ：おう。大型君。お前JavaScriptって詳しい。
大型 ：う〜む。私は大型ですけど、JavaScriptはちょっと、
JavaでもC++でもCORBAでもなんでもやりますけど、、、
Ｕ氏 ：そうか、じゃどっちも知らんって感じやなぁ。
まぁ、よぉわからんけど、リファレンス読んでやってみるか。
〜土日の空き時間で、Ｕ氏はJavaScriptのリファレンスを
読んでくる〜
くそ〜。めんどくさい。
Ｕ氏 ：（Ｕ氏はインターネットで３階層のメニューを探してくるが
今回のＰＪでそのまま使えるのはなさそうである。）
う〜む。この２階層のやつを３階層にするしかないんか…。
〜今までJavaの開発はテスト駆動で快調だったＵ氏＆大型ペア
は苦しんだ。１日かけても改造ではうまくいかない。〜
Ｕ氏 ：くそ〜。何でこのわしが、JavaScriptなんざ。こんな時間あったら
超美人ギャルとコンパでもしたいわ。第一こんなだらだらした
ソースはさっぱりわからん。キーー！頭腐る。！
…そういえばJavaScriptってクラスが作れたよなぁ。だれか
コンポジットやテンプレートメソッドまで実装していたな！
しかも、ご丁寧にJSUnitなんてものもあったよなぁ。
こんなん何に使うねんとおもっとったけど、JavaScriptでも
クラス作るなら使えるかも、、、
〜 Ｕ氏はJSUnitを使いながら、インターネットを調べて、
JavaScriptで、クラスつくるのを参考にしながら、とりあえず
メニューの項目やメニューをあらわすようなクラスを
コンポジットっぽく作ってみる。ただし、テストができる
ようにと、実際のHTMLのオブジェクトをもっているが、
それに直接操作はしたりはしていない、擬似的なものである。
クラスはできた、さて、本物のＨＴＭＬにはめてみると、、
Ｕ氏 ： うーむ。クラスはできたんやけど、、、はめると結局、ＨＴＭＬ
のほんまもんのオブジェクトが絡むと、エラーがどこでおこってる
のかさっぱりわからん。しかも、もとからあるサンプルのソース
はダラダラしていて、改造不能だし、、、
〜 JavaScriptは型が無い言語で、一番厄介なことはテストを書いて
いても、１行ミスすると、すべてのテストケースがすべて動かなく
なるし、どこでどういうミスがあるのかも、ろくにわからない
言語である。
Ｕ氏 ： ぎゃ〜。なんちゅう言語や！JavaScriptなんて二度とするかボケー！。
（ぶち切れ状態）
〜 最初はJavaScriptだからと、ペアプロしていなかったのだが、
あんまり苦しんでるので、途中から手伝ってきた大型氏は 〜
大型 ： Ｕさん。やっぱ「テスト駆動開発」でするべきちゃいますか？
Ｕ氏 ： やっぱそうかな。
大型 ： やってみます？今から既存のソースをペアプロで追加していきます？
Ｕ氏 ： （大型がそういってくれたので）冷静になって考えると、
その前に「コードを捨てる勇気」やな。
大型 ： なんですか？それ。
Ｕ氏 ： こーゆーわけわからんようになったときはコードを捨てる勇気を
もつんやわ。つまりこのコードを捨てて１からやるってこと。
大型 ： なるほど。
Ｕ氏 ： しかも、最初は安易にテストできへんと思ってたけど、サンプルの
HTMLを作ったり、そのHTMLのタグにidをつけたりしておくと、
DOMの機能でスタイルとかチェックできるから、テストできるな。
大型 ： うーむ。よーわかりませんね。
〜 Ｕ氏は覚えたてのJavaScript知識を説明 〜
大型 ： なるほど。やっとわかりました。そしたらほとんどテストできますね。
Ｕ氏 ： じゃ、一応モデリングをざっと考えてみよう。
〜 １階層目と、２階層目と、３階層目の振る舞いが違うので、
ベタにクラスを分けるか、１つのオブジェクトでレベルをもって
対処するかなどを議論して、、
Ｕ氏 ： ま、普通に考えて、クラスは抽象化して、２種類もっておいて、
違う部分だけをテンプレートメソッド風にしますか。普通やけど、
大型 ： そうですね。
〜 実際やるが、なんとJavaScriptはオーバーライドができない 〜
それがいきなりテストで発覚したりした。しかも、継承は、自分
でメソッドをコピーしてやるような感じだ。
Ｕ氏 ： ダサー。所詮おまけのオブジェクト指向やなぁ。まぁしゃーない。
テストでわかっただけましやな。
〜 そして、継承で作っていたのをやめて、ベタにクラスを２種類書く。
ダサイが言語特性上そうなのだから、無理には継承をしないように
した。しかし、変数の型は無いのでポリモーフィズムは可能だ。〜
大型 ： クラスの基本はできましたね。じゃ、次はどんなテスト書きましょ。
Ｕ氏 ： そうやなぁ。id=menuのタグを探して、その下をDOMで読み込んで
一気にオブジェクトを作らなあかんな。だから、add()メソッド、、
じゃなくて関数をつくららね。ループまわして、addしていけば
簡単にMenu-SubMenu（後は再帰的に、、、）ができるわ。
大型 ： それ、ダサダサっすよ。ニャーっていわれますわ。そんなもん、
オブジェクトに親エレメント渡して、再帰的にセットさせたほうが
ええんちゃいます？
Ｕ氏 ： おっしゃるとおりですな。確かにダサダサ。じゃそっちでいこう。
〜 というわけで、その親エレメント渡して再帰的にセットしてくれる
メソッドのテスト書いて実装 〜。
大型 ： じゃ、最初に、テストかいて、、、
menu.setElements(rootElement); 、、、
エラーが出るか確認
Ｕ氏 ： よっしゃ。messageが見当たりません。って予想どおりでた。
じゃ、クラスにインターフェイスを追加してみよう。
Menu.prototype.setElement = function(element) {
}
おー。テストは通った。
大型 ： じゃ、次に、テスト追加
var subMenu21element = document.getElementById('submenu21');
var subMenus = menu.getSubMenus();
assertTrue("エレメントが違います", subMenus[0].getElement()
== subMenu21element);
どうかな。
Ｕ氏 ： もちろん失敗。予想通り。
大型 ： じゃ、実装。こうしてこうして、、、、
Ｕ氏 ： こうかな。（コードをタイプ）
大型 ： ＯＫ。テストとおりましたわ。
と、こんな感じで、そのテストケースは終了。
Ｕ氏 ： うーむ。JavaScriptでもテスト駆動できるもんやなぁ。
あっと、あと、１つのテストケースがグリーンバーになったら
jsファイルやテスト用のhtmlファイルをバックアップしよう。
大型 ： なんでですの？
Ｕ氏 ： さっきの反省やけど、JavaScriptは１箇所間違えたら、
すべてのテストケースが死んでどこが間違ったかわからんように
なるからやねん。
大型 ： なるほど。
このような感じでひとつひとつ少しづつではあるが、前進していく。
サンプルを改造して済ませようとおもって、死ぬほど時間がかかって、
ループ状態だったが、着実に進捗してきた感じだ。
そして、金曜日
Ｕ氏 ： 今日は終了。後はわしが家でやるわ。君に休出はもうしわけないからね。
大型 ： いいですよ。
Ｕ氏 ： いや。今日は終わらなあかん。大体、今日は１９：３０から巻き系コンパ
や。JavaScriptと巻き系ＧＡＬはどっちが大切や？
大型 ： いうまでもなく巻き系ＧＡＬです。
コンパを満喫するため、容赦なく仕事を終わらせるＵ氏と大型氏。
一緒にコンパに参加する営業氏も仕事をほっぽらかしてコンパに来たが
コンパは数年来まれに見る満喫具合で行ってよかった！
Ｕ氏 ： （家で）さーて残りをやるか。テスト駆動ってると、Javaのときでも
家でもテスト書いてやると、２人より効率はわるけど、着実に進捗
するのがいいよね。
Ｕ氏は家で、テストがかける限りのところまで、テスト駆動を続ける。
どうしてもテストがかけないところまできた。
Ｕ氏 ： よっしゃ。後は無理やからコーディングするか、、、
Ｕ氏はテストがすべてかかっているScriptとそれ以外を明確にわかるように
して、コードを書いて、手でテスト。しかし、今まで苦しみに比べたら
意外なぐらいあっさり終了してしまう。やはりほとんどのところを
テスト駆動でいったから、残りの部分はほとんどミスがかけないような
ぐらいのものしか残っていなかった。
Ｕ氏 ： （大型にメールをして）とうとうJavaScriptメニューできた！！
涙もんや！
大型 ： （メールで）おお、月曜にソースみせて勉強させてください。
というわけで、Ｕ氏と大型の数日間にわたるJavaScriptとの格闘は終わった。
Ｕ氏や大型がJavaScript大嫌いなのはかわりわない。しかし、その格闘を
終えることができたのは「オブジェクト指向」と「テスト駆動」のおかげだった。
しかも、特定のＨＴＭＬに依存せず、クラス化しているから、次のプロジェクト
でいわれても再利用できそうである。
テスト駆動があるからこれからJavaScriptでゴリゴリコードを書きたいとは思わない。
でも、テスト駆動、ペアプロにより、意識共有が図れて、いきなり進捗も「手戻り」が
なくなった。「テスト駆動」恐るべし。
たとえそれがJavaScriptであっても。
以上