[TypeScript] メンテしやすいコードの書き方

2024.4.2

INDEX

はじめに

現場で役立つシステム設計の原則 / 変更を楽で安全にするオブジェクト指向の実践技法を読みました。
個人的に覚えたい内容を記録します。

1. 小さくまとめてわかりやすくする

わかりやすい名前を使う

a, bの変数ではどんな値で掛け算しているか不明

let basePrice: number = a * b;

何の略語なのか分からない

let basePrice: number = qty * up;

変数を意味の分かるquantity(数量) unitPrice(単価)を単語にすると事で、メソッドが理解しやすい

let basePrice: number = quantity * unitPrice;

目的ごとに変数を用意する

priceという変数を使いまわしているので、改修による影響範囲大きい

let price: number = quantity * unitPrice;

if (price > 1000)
  price += 500;

price = price * taxRate();

目的ごとに変数を分けているので、改修による影響範囲小さい

let basePrice: number = quantity * unitPrice;

let shippingConst: number = 0;
if (basePrice > 1000)
  shippingConst = 500;

let shippingCost: number = (basePrice * shippingConst) * taxRate();

メソッドとして独立する

if文の有無で可読性が下がります。

let basePrice: number = quantity * unitPrice;

let shippingConst: number = 0;
if (basePrice > 1000)
  shippingConst = 500;

let shippingCost: number = (basePrice * shippingConst) * taxRate();

メソッド名から処理を推察しやすい

改修がメソッド内で留める事が可能

let basePrice: number = quantity * unitPrice;

let shippingConst: number = getShippingConst(basePrice);

let itemPrice: number = (basePrice * shippingConst) * taxRate();

値の範囲を制限してプログラムを分かりやすく安全にする

引数の型を数値がしているが、9007199254740991(最大数)まであ加算する事が出来る
-> 無駄なテストパターンが発生する

const addNumbers = (num1: number, num2: number): number => num1 + num2

enumで指定した数値のみしか引数として渡せない
-> テストパターンが最小限にできる

enum Number1To5 {
    One = 1,
    Two,
    Three,
    Four,
    Five
}

const addNumbers = (num1: Number1To5, num2: Number1To5): number => num1 + num2

複雑さを閉じ込める

下記項目のコードを複雑化させる
– for文などのループ処理のロジック
– 配列やコレクションの要素の数が変化する(可能性がある)
– 個々の要素の内容が変化する(可能性がある)
– 0件の場合の処理
– 要素の最大数の制限

ある機能の部分メソッドは、別ファイルとかで管理せず同じクラス内で管理する

場合分けのロジックを整理する

なるべくelseを使わない

条件が3つしかない割には、コード量が多く読みにくい

if (isChild()) {
    return 0;
  } else if (isSenior()) {
    return 1;
  } else {
    return 2;
  }

条件が一覧化されて、コード量が少なくなり、読みやすい
-> 条件の変更も対応しやすい

if (isChild()) return 0
if (isSenior()) return 1
return 2

業務ロジックを分かりやすく整理する

メソッドをロジックの置き場にする

受け取った値をただ返すだけのメソッドで意味がない

class Person {
  private firstName: string;
  private lastName: string;

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFirstName(): string {
    return this.firstName;
  }

  getLastName(): string {
    return this.lastName;
  }
}

受け取った値を結合する処理が行われており、意味のあるメソッドになる

class PersonName {
  private firstName: string;
  private lastName: string;

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFirstName(): string {
    return this.firstName;
  }

  getLastName(): string {
    return this.lastName;
  }

  getFullName(): string {
    return this.lastName + this.firstName;
  }

}

よかったらシェアしてね！