TypeScript上級

上級 TypeScriptで学ぶリファクタリング｜ケーススタディ編

 

導入

本記事では、上級者向けのリファクタリング手法をTypeScriptを用いて具体的なケーススタディを通じて探求します。リファクタリングは、コードの可読性や保守性を高めるための重要なプロセスですが、実際のプロジェクトでは多くの落とし穴が存在します。今回は、架空のプロジェクト「Todoリストアプリ」を例に、リファクタリングの実践的なアプローチを解説します。

教科書レベルの解説（リファクタリング）

重要な概念の整理

リファクタリングとは、外部の動作を変えずに内部の構造を改善するプロセスです。これにより、コードの可読性、再利用性、テスト容易性が向上します。リファクタリングの際には、以下のポイントに注意が必要です。

  • コードの重複を排除する
  • 関数の責務を明確にする
  • 適切な命名規則を用いる

コード例（TypeScript）


// Todoアイテムを管理するクラス
class TodoItem {
    constructor(public title: string, public completed: boolean = false) {}

    toggle() {
        this.completed = !this.completed;
    }
}

// Todoリストを管理するクラス
class TodoList {
    private items: TodoItem[] = [];

    addItem(title: string) {
        this.items.push(new TodoItem(title));
    }

    getCompletedItems() {
        return this.items.filter(item => item.completed);
    }

    getIncompleteItems() {
        return this.items.filter(item => !item.completed);
    }
}

コードの行ごとの解説

  1. クラス定義: TodoItemクラスは、個々のTodoアイテムを表現します。タイトルと完了状態を保持します。
  2. トグルメソッド: toggleメソッドにより、完了状態を反転させることができます。
  3. TodoListクラス: Todoアイテムのコレクションを管理するクラスで、アイテムの追加やフィルタリングを行います。
  4. フィルターメソッド: getCompletedItemsとgetIncompleteItemsメソッドにより、完了したアイテムと未完了のアイテムをそれぞれ取得できます。

ケーススタディ編

架空の「Todoリストアプリ」では、最初に実装したコードが機能しているものの、次第に機能追加や修正が重なり、コードが複雑化していきました。特に、アイテムのフィルタリングメソッドが増えるにつれて、メンテナンスが難しくなってきました。この状況を改善するために、リファクタリングを行います。

具体的には、フィルタリングのロジックを一つのメソッドにまとめ、引数でフィルタ条件を受け取る形に変更します。これにより、コードの重複を排除し、可読性を高めることができます。

まとめ

  • リファクタリングは、コードの内部構造を改善し、可読性や保守性を向上させるための重要なプロセスです。
  • 具体的なケーススタディを通じて、実務に即したリファクタリング手法を学ぶことができます。
RELATED POST