概要

この記事では、TypeScriptを使った非同期処理、クラス設計、データベース操作を解説します。特にPromiseを用いた非同期処理の流れ、アロー関数の使い方、Jestによるモック関数の作成に焦点を当て、実際の開発で役立つノウハウを紹介します。progate pathにおける自身の学習の記録として記事を作成していますので、内容に偏りがあったり、一貫性がないことも多いですが、ご容赦ください。

1. 非同期処理の基礎: Promise と async/await

まずは、非同期処理の重要性と、その基礎であるPromise、async/awaitの使い方について説明します。

例: 非同期処理の実装例

const fetchData = async (url: string): Promise<void> => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log('データ取得成功:', data);
  } catch (error) {
    console.error('エラー:', error);
  }
};

async 関数は await を使い、非同期処理が完了するまで待機します。これにより、非同期操作の結果を次の処理に安全に渡せます。

2. クラス設計とデータベース操作

クラス設計はコードの再利用性を高め、データベースとのインタラクションをオブジェクト指向で整理できます。以下に、投稿データを扱う Post クラスを例示します。

Postクラスの設計

export class Post {
  constructor(public content: string) {}

  async save(): Promise<void> {
    const db = await databaseManager.getInstance();
    const { lastID } = await db.run(
      `INSERT INTO posts (content) VALUES ($content)`,
      { $content: this.content }
    );
    this.id = lastID;
  }

  static async find(postId: number): Promise<Post | undefined> {
    const db = await databaseManager.getInstance();
    const postRawData = await db.get<PostRawDataWithId>(
      "SELECT id, content FROM posts WHERE id=?",
      [postId]
    );
    return postRawData && new Post(postRawData.content);
  }
}

この Post クラスでは、投稿の保存、検索機能をシンプルに実装しています。save メソッドでデータを挿入し、find メソッドでデータベースから投稿を取得します。

3. アロー関数を使った`this` の扱い

JavaScript では、this の扱いに注意が必要です。特にイベントリスナーやコールバック関数内で this の参照が意図しないものに変わることがあります。アロー関数を使うと、this が定義時にバインドされ、予期しない振る舞いを避けられます。

例: アロー関数の使用

class MyClass {
  name = "MyClass";

  // アロー関数でのメソッド定義
  arrowMethod = () => {
    console.log(this.name); // 常に "MyClass"
  }
}

4. Jestによるテストのモック

テストを効率的に行うには、外部のAPIやデータベースの依存を排除するためにモックを使うことが重要です。Jest では、jest.fn().mockImplementation() を使ってモック関数を定義できます。

モック関数の例

const fetchPost = jest.fn().mockImplementation((id: number) => {
  return { id, content: `Post content for id ${id}` };
});

このモック関数を使用することで、APIを呼び出さずに、期待通りのデータを返すことができます。

まとめ

この記事では、TypeScriptにおける非同期処理、クラス設計、アロー関数、そしてJestを使ったテストモックの使い方について解説しました。今後も自身の学習の記録を記事にしていきたいと思います。