概要

ユースケース層とは「関数をまとめる場所」ではない。
それは**“アプリケーションの振る舞いを、責務ごとに構造化し、依存から切り離す設計層”**である。

JavaScript/TypeScriptでアプリケーションを設計する際、
UI・状態管理・非同期処理・API通信が混在してしまい、テスト性・再利用性・保守性が著しく損なわれるケースが多い。

ユースケース層を設計することで、振る舞いを意味単位に分離し、責任ある構造を組むことが可能になる。

1. ユースケース層の定義と責務

- UIをトリガーとして
- 状態・API・ドメインロジックを統合
- 成功・失敗を状態やUIに返す

export const loginUser = async (
  input: LoginForm,
  deps: { authApi: AuthApi; sessionStore: SessionStore }
): Promise<Result<void, LoginError>> => {
  const res = await deps.authApi.login(input);
  if (!res.ok) return { ok: false, error: res.error };

  deps.sessionStore.set(res.data.session);
  return { ok: true };
};

2. UIとの連携：Presentationからロジックを切り出す

// UI層 (React / Vue)
const onSubmit = async () => {
  const result = await loginUser(form, { authApi, sessionStore });
  if (!result.ok) showError(result.error.message);
};

✅ UIは「結果を受けて状態や画面を制御する」のみに集中
✅ ロジックは「何をどうするか」をユースケース層に集約

3. 依存注入（DI）による柔軟性の確保

type Deps = {
  userApi: UserApi;
  userStore: UserStore;
};

export const fetchUserDetail = (deps: Deps) => async (id: string) => {
  const res = await deps.userApi.fetch(id);
  if (res.ok) deps.userStore.set(res.data);
};

✅ 外部依存（API, Store, DB）は引数として明示的に注入
✅ テスト時にモック依存へ差し替え可能

4. ユースケースは「意味単位」で分離する

❌ userService.ts にすべての操作を詰め込む  
✅ usecases/user/createUser.ts  
   usecases/user/deleteUser.ts  
   usecases/user/updateUser.ts

✅ 1ユースケース = 1ファイル / 1関数に分離
✅ ロジックの意図が明確になり、再利用可能になる

5. エラーハンドリングと結果構造の統一

type Result<T, E> = { ok: true; value: T } | { ok: false; error: E };

✅ UIや呼び出し元がtry-catchに依存せず分岐処理可能
✅ 結果を構造的に返すことでUXと制御が明確になる

6. テスト性と非同期制御の分離

✅ 副作用は全て注入
✅ fetchUserDetail({ api: mockApi, store: memoryStore })('u01') のようにテスト可能

設計判断フロー

① UIやAPIがロジックと密結合していないか？ → ユースケースに分離

② 外部依存（API, DB, Store）が直接使われていないか？ → DIで注入構造へ

③ ロジックがユースケース単位に意味を持っているか？ → 1責務 = 1ユースケース

④ 結果構造が曖昧 or try-catch依存になっていないか？ → Result構造で明示的に

⑤ テスト時にモック依存で差し替え可能か？ → 引数注入設計がされているか

よくあるミスと対策

❌ UIコンポーネント内でfetchと状態更新をすべて実行

→ ✅ ユースケース関数で責務を分離し、UIは状態制御に集中

❌ APIの仕様変更で複数箇所が壊れる

→ ✅ APIとの直接依存をユースケースに集約し、他層と切り離す

❌ 非同期処理のテストが不可能

→ ✅ ユースケース関数に依存を注入する設計でモック可能に

結語

ユースケースとは「処理をまとめる場所」ではない。
それは**“アプリケーションの意味を分離し、責務を集中させ、構造を再現可能に保つ設計層”**である。

振る舞いをユースケースに集約し
UIから依存とロジックを追い出し
成果と失敗を構造として返し
柔軟な依存注入でテスト性を担保する

JavaScript/TypeScriptにおけるユースケース層設計とは、
“構造と拡張性を保証する、アプリケーション制御の心臓部”である。