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

はじめに

この記事では、TypeScript のメンテしやすいコードの書き方を解説します。

参考資料

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;
  }
}

YouTube のご案内

ポモドーロタイマー（25 分勉強＋ 5 分休憩）を活用した作業・勉強配信を行っています。
集中したいときや、誰かと一緒に頑張りたいときに、ぜひご活用ください。

ご興味のある方は、ぜひお気軽に遊びに来てください！
「Zenn から来ました!!」とコメントを貰えると泣いて喜びます 🤣