リファクタリングのハードルを下げる

1. リファクタリングのすゝめ

2. 目次
1. はじめに
2. リファクタリングとは？
3. 考え方
4. 進め方
4.1. 一段階
4.2. 二段階
4.3. 三段階

3. 1.はじめに
この話をする理由
リファクタリングは簡単な事(もある)と知って欲しい
この話を聞いた後の期待
少しやってみようという気持ちを持つこと
ここで話さないこと
リファクタリングの手法について
面倒な知識が必要な具体例の提示

4. 2.リファクタリングとは？
外部の振る舞いを変えず、内部の構造を改善していく作業

5. 3.考え方
ロジックを大きく変えることだけがリファクタリングではありません。
ロジックを大きく変えると難易度が高く、多くの対応ができません。
対して小さい変更は早く対応することができます。
そして多くの改善が可能です。
なので、リファクタリングは小さく長く変え続けることが偉いのです。
やれることをやれるだけしよう！

6. 4.進め方

7. 4.一段階
①無駄なスペースを削除
②インデントを最適化
③変数名を最適化
④コメントを修正・削除
影響箇所を局所的にする！

8. 4.一段階
①無駄なスペースを削除
// 連続、先頭後尾にある
□const□□price□=□0;□
// スペースは途中に1つずつ
const□price□=□0;

9. 4.一段階
②インデントを最適化
// 開始と終了の位置が違う
// 平行な処理の位置が違う
if (isCampaign()) {
price;
□tax;
□}
// 深いインデントで終わる
// 深いインデントで始める
public function isCampaign(price,
taxRate,
region) {
// 処理
}
// 開始と終了の位置を合わせる
// 平行な処理の位置を合わせる
if (isCampaign()) {
price;
tax;
}
// 役目毎でインデントさせる
public function isCampaign(
price,
taxRate,
region
) {
// 処理
}

10. 4.一段階
③変数名を最適化
// 意味不明 ※狭い範囲の利用はOK
const tmp = 0;
// 連番
const campaign001 = 0;
// 省略形 ※一般的ならOK
const crt = 0;
// 不要な情報
const totalLabelStr = “合計金額”;
// リストなのに単数形
const order = [];
// Boolean型
const campaignFlag = true;
// 意味ある単語にする
const campaign = 0;
// 具体名にする
const winterCampaign = 0;
// 省略しない
const cart = 0;
// 情報は最低限にする
const totalLabel = “合計金額”;
// リストは複数形
const orders = [];
// is/can/hasから始める
const isCampaign = true;

11. 4.一段階
④コメントを修正・削除
// キャンペーン ※正確ではない
const winterCampaign = 0;
// キャンペーン ※コメントが嘘
const cart = 0;
// カート
const cart = 0;
// 冬季キャンペーン
const winterCampaign = 0;
// カート
const cart = 0;
const cart = 0; ※見ればわかる名称にコメントは不要

12. 4.二段階
①プライベート関数名を最適化
②処理を関数化(最小化)
③テスト作成
④ロジックを最適化
クラスの中身をわかりやすく！
クラス内の高凝集を目指す

13. 4.二段階
①プライベート関数名を最適化
/** カートの合計金額(税込)を計算する */
public totalPrice() {}
// 動詞 + 名詞 とする ※動詞始まり以外はNG
public calcTotalPrice() {}

14. 4.二段階
②処理を関数化(最小
化)
/** カートの合計金額(税込)を計算する */
public calcTotalPrice() {
// カートの合計金額を計算する
let subtotal = 0;
cart.items.forEach(item -> subtotal += item.price);
// 消費税を計算する
const tax = price * 0.1;
return subtotal + tax;
}
/** カートの合計金額(税込)を計算する */
public calcTotalPrice() {
const subtotal = this.calcSubtotal();
const tax = this.calcTax(subtotal);
return subtotal + tax;
}
/** カートの合計金額(税込)を計算する */
private calcSubtotal() {
let subtotal = 0;
cart.items.forEach(item -> subtotal += item.price);
return subtotal;
}
/** 消費税を計算する */
private calcTax(price: number) {
return price * 0.1;
}

15. 4.三段階
①パブリック関数名を最適化
②クラス名を最適化
③クラスを分割/統合
④フォルダを移動
アーキテクチャを適(切妥)当に！
疎結合高凝集を目指す

16. Appendix

17. おすすめ書籍
● リーダブルコード
● プリンシプル オブ プログラミング
● 現場で役立つシステム設計の原則
● 良いコード／悪いコードで学ぶ設計入門
● リファクタリング
● セキュア・バイ・デザイン

18. EoF