概要
この記事では、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を使ったテストモックの使い方について解説しました。今後も自身の学習の記録を記事にしていきたいと思います。