社内勉強会資料

1. 株式会社FLECT
小西俊司
2014/02/27

2. 

大袈裟なタイトルは釣りです。(^^;
僕が他人のコード(主にFLECT社内)を見る時に気に
なる点のひとつを、文書化しただけで、そんなたいし
た話はないのであまり期待しないように

3. 



良いコードを書くための方法論は最終的にはすべて
「一度に考えなければならないことの量を減らす」こと
によって目的が達成されていると考えます。
「オブジェクト指向」「分割統治」などは良い例で、これ
らの方法論を使うとその部分以外のことを考えなくて
良くなるわけです。
逆にいわゆる「スパゲティ化したコード」とは一度にあ
れもこれも考えなくてはならなくて訳がわからなくなっ
た状態を指します。
これを踏まえてコードを書く時に意識して欲しいこと
は。。。

4. ことです

6. 
開発者が考えなければいけないことには
◦
◦
◦
◦
◦


アプリの要件
アプリの実装
インフラ
ストレージ
など様々なレイヤがある
これらは俯瞰で考えなければいけない時もあるが、全部
いっぺんに考えるのは無理なので基本的には別々に考え
る(別の人が考える場合もある)
コンテキストスイッチとはここで考えることのレイヤが切り
替わること
◦ これは人間にとってコストの高い処理

7. ＡならばＢ
ＢならばＣ
すなわち、ＡならばＣ



これは常に正しい
が、この考え方は往々にしてコンテキストをまたぐ
特にフロントエンド開発(jQuery+JavaScript)ではコ
ンテキストスイッチが発生しやすい

8. 
アプリ要件
◦ 情報量の多いテーブルの一部の表示／非表示をボタンで切
り替えたい
◦ データが切り替わった時には非表示

実装
◦ jQueryで楽勝！

9. $("#btn-toggle").click(function() {
var opened =$("#table").find(".view-toggle").toggle().is(":visible");
$(this).text(opened ? "閉じる" : "開く");
});
$("#btn-exec").click(funtion() {
$.ajax({
"url" : ...
"data" : { ...},
"success" : function(data) {
var $table = $("#table");
$table.find(".data-name").text(data.name);
//ここにデータ設定のコードが並ぶ
$table.find(".view-toggle").hide();
}
});
});

10. 

簡潔な記述なので、コード自体はそんなに悪くない
しかしこのコードを書くためにはアプリ要件を考えてい
る時にHTMLとJavaScriptの間を行ったり来たりしな
ければならない
◦ HTMLとJavaScriptの行き来でもコンテキストスイッチは発生
する

コードを読み書きする時に何度もコンテキストスイッチ
が発生して、疲れる

11. 
まず、アプリ要件だけを先に全部書く
//Tableオブジェクト
function Table($table) {
//中身は後で書くのでとりあえず空
}
var table = new Table($("#table“));
$("#btn-toggle").click(function() {
table.toggle();
$(this).text(table.isOpened() ? "閉じる"
}
$("#btn-exec").click(funtion() {
$.ajax({
"success" : function(data) {
table.apply(data);
table.close();
}
});
});
: "開く");
まだTableオブジェクトの
メソッドを１行も書いてない
うちから「toggle」「apply」
などのアプリ要件を実現する
メソッドを記述する
(関数宣言だけは先に書く場合
もある)

12. //Tableオブジェクト
function Table($table) {
function toggledRows() { return $table.find($(".view-toggle"));}
function isOpened() { return toggleRows().is(“:visible");}
function open() { toggleRows().show();}
function close() { toggleRows().hide();}
function toggle() { toggleRows().toggle();}
function apply(data) {
$table.find(".data-name").text(data.name);
...
}
$.extend(this, {
要するにオブジェクト指向的な実装をすると
“isOpend" : isOpened,
いうことだがコンテキスト境界が明確になる
"open" : open,
ことが大事
"close" : close,
"toggle" : toggle,
関数をローカルに宣言して$.extendで公開
"apply" : apply
するやり方は単に小西の好みなので普通に
}
prototypeでやっても良い
}

13. 
アプリ要件を考える時に使う用語がそのままメソッドになっ
ている
◦ テーブルを開く -> open
◦ テーブルを閉じる -> close
◦ テーブルが開いていたら -> isOpened

jQueryで１行でできることでもアプリ要件の用語でメソッド
定義することが重要
◦ セレクタがでてくるとそこでコンテキストスイッチが発生する

オブジェクトの実装とアプリ要件のコードはどちらを先に書
いても良い
◦ ていうかオブジェクトを先に書く方が一般的かも。。。
◦ 慣れてくるとアプリ要件を先に書く方が楽。

Backbone等のフレームワークを使うという解もある
◦ しかしこれができるようになるとあまり必要を感じなくなる

14. 

コンテキスト境界を意識してコンテキストをまたぐ場合はメ
ソッドを切る
jQueryはHTMLとの結びつきが強いのでアプリ要件を考
えるところは分離する
◦ オブジェクト指向はそのための有効な手段

サーバサイドや他のところでも考え方は同じ。大事なのは
以下の２つ
◦ 一度に考えなければならない事柄を減らす
◦ コンテキストスイッチの回数を減らす


オブジェクト指向的なJavaScriptの書き方が良く分からな
い人はこれも併せて読もう(宣伝)
http://www.slideshare.net/shunjikonishi/ajaxapp-20725783