リファクタリングのステップを刻む

リファクタリングを安全に進めるためにステップを刻む

1. 刻むワンステップをメモる
2. 直す
3. 動作確認する
4. コミットする

効果

刻むワンステップをメモる

開始の儀式、これからやることを明確にする。
目標を見えるようにしておく。
「動作確認の前に作業を続けたくなる」誘惑にかられたときに見る。踏みとどまる。

直す

リファクタリングはこれが目的

動作確認

何かが起きたらすぐにわかる。
ワンステップをメモった時に影響範囲と確認方法は考えている。

コミット

壊れたらすぐに直前に戻れる。
「エミュレータでゲームをすればどこでもセーブできる。」みたいなチート。
有効活用すべし。

準備

ワンステップをメモるには、ワンステップを選ぶ必要がある。リファクタリングの作戦を立てる必要がある。
「一つのモジュール*1に二つ以上の機能があるので、一つを別モジュールに分けたい。」
さてどうする？

前提

1. require.jsのモジュールとして分ける。
2. モジュールは初期化関数を返す*2

こんなやつ*3

define(function(){
    return function(hoge){
        var fuga = hoge + 1;
        return { fuga : fuga };
    };
});

全体的な作戦

1. 空のモジュールを作って元モジュールに取り込む
2. 依存が無い関数を移動して、関数の呼び出しをモジュール経由に置き換える
3. 依存する順番に関数とプロパティを全部移動する
4. 完全に分離したら、それぞれファイル内をリファクタリング
   • コメント書いたり、名前を変えたり
   • モジュールを分離して残った部分がなんなのか理解を深める

ワンステップはこれをさらに小さく分割したもの。動作確認ができる最小単位*4。

• メソッドの名前変える
• インライン展開する
• 不要になった変数を削除する

こういうことをしていると一日のコミット回数が50回を超えて、コミットログが面白いことになる。

*1:最近はJavaScriptを主にいじっているのでモジュールと呼ぶ

*2:依存してるものがあったら引数で受け取れる

*3:戻り値がオブジェクトなのは、これから返すものを増やしていくから

*4:リファクタリングブラウザがあればもうちょっと大きくていいけど、残念ながらJavaScirptには無い