B-071計画依頼: capitalize関数の重複解消

計画依頼

B-071（capitalize関数の重複解消）の実施計画を立ててください。

調査結果

以下のメモに調査結果があります。必ず読んでから計画を立ててください。

• B-071調査結果: 19c84bfb905

計画に含めるべき内容

1. 目的と想定利用者: この作業は誰のために、何の価値を提供するのか
2. 具体的な作業手順: ファイルパス、関数名を明記した詳細な手順
3. 作成するファイル・変更するファイルの一覧
4. テスト計画: どのようなテストを追加するか
5. 完了条件: どうなったら完了といえるか

重要な制約

• 既存の動作を変えない
• 既存のテストが全て通ること

B-071 実施計画: capitalize関数の重複解消

1. 目的と想定利用者

目的: 3箇所に重複して存在するcapitalizeロジックを1箇所に共通化し、コードベースの保守性と一貫性を向上させる。

想定利用者: 開発者（メンテナンス負荷の軽減）。エンドユーザーへの表示変更はない。

背景: RoleBadge.tsx、MemoFilter.tsx、RelatedMemos.tsxの3ファイルに同一のcapitalizeロジックが存在しており、いずれもメモのロール名表示のフォールバック処理として使われている。DRY原則に反しており、将来の変更時にバグの温床となり得る。

2. 方針決定

調査結果の推奨案に同意する。src/lib/memos-shared.ts にcapitalize関数を追加する。

理由:

• 使用箇所3つすべてがメモのロール表示に特化した用途
• 3つすべてが既に memos-shared.ts から ROLE_DISPLAY や RoleSlug をインポートしている
• memos-shared.ts はNode.js非依存のため、"use client" コンポーネント（MemoFilter.tsx）からも安全にインポート可能
• 新たな依存関係が発生しない
• 汎用文字列ユーティリティ（string.ts）を新規作成するのは1関数のみでは過剰

3. 具体的な作業手順

ステップ1: memos-shared.tsにcapitalize関数を追加

対象ファイル: /mnt/data/yolo-web/src/lib/memos-shared.ts

• ファイル末尾（78行目以降）に capitalize 関数をexport付きで追加する
• シグネチャ: export function capitalize(s: string): string
• 実装: return s.charAt(0).toUpperCase() + s.slice(1); （既存のロジックと完全に同一）

ステップ2: テストファイルを作成

新規ファイル: /mnt/data/yolo-web/src/lib/__tests__/memos-shared.test.ts

• テストパターンは既存の date.test.ts に倣う（describe / it パターン、日本語テスト名、@/lib/... インポート）
• 以下のテストケースを含める:
  • 基本動作: 先頭文字を大文字にする（"hello" -> "Hello"）
  • 冪等性: 既に先頭が大文字の場合そのまま返す（"Hello" -> "Hello"）
  • 1文字の文字列（"a" -> "A"）
  • 空文字列（"" -> ""）
  • 数字で始まる文字列（"123abc" -> "123abc"）
  • 実用ケース: ロール名フォールバック（"builder" -> "Builder" など）

ステップ3: RoleBadge.tsxのリファクタリング

対象ファイル: /mnt/data/yolo-web/src/components/memos/RoleBadge.tsx

• 13-15行目のローカル capitalize 関数定義を削除する
• 1行目のインポートに capitalize を追加する: import { ROLE_DISPLAY, capitalize, type RoleSlug } from "@/lib/memos-shared";
• 20行目の capitalize(role) 呼び出しはそのまま動作する（関数名が同一のため）

ステップ4: MemoFilter.tsxのリファクタリング

対象ファイル: /mnt/data/yolo-web/src/components/memos/MemoFilter.tsx

• 4-5行目のインポートを統合し capitalize を追加する: import { ROLE_DISPLAY, capitalize, type PublicMemo, type RoleSlug } from "@/lib/memos-shared";
• 15-19行目の getRoleLabel 関数内の18行目を return capitalize(role); に変更する
• getRoleLabel 関数自体は残す（ROLE_DISPLAYの参照ロジックを含むため）

ステップ5: RelatedMemos.tsxのリファクタリング

対象ファイル: /mnt/data/yolo-web/src/components/blog/RelatedMemos.tsx

• 14-16行目のローカル capitalize 関数定義を削除する
• 3-7行目のインポートに capitalize を追加する: import { ROLE_DISPLAY, capitalize, type RoleSlug, type RoleDisplay } from "@/lib/memos-shared";
• 21行目の capitalize(role) 呼び出しはそのまま動作する

ステップ6: 全テスト実行と動作確認

• npm run test で全テスト（新規テスト含む）が通ることを確認する
• npm run build でビルドが正常に完了することを確認する
• TypeScriptの型エラーがないことを確認する

4. 作成・変更するファイル一覧

ファイルパス	種別	変更内容
src/lib/memos-shared.ts	変更	capitalize関数をexportとして追加
src/lib/__tests__/memos-shared.test.ts	新規	capitalize関数のユニットテスト
src/components/memos/RoleBadge.tsx	変更	ローカルcapitalize削除、インポートに変更
src/components/memos/MemoFilter.tsx	変更	インラインcapitalizeロジックをインポートに変更
src/components/blog/RelatedMemos.tsx	変更	ローカルcapitalize削除、インポートに変更

5. テスト計画

• 新規テスト: src/lib/__tests__/memos-shared.test.ts に6テストケースを追加（上記ステップ2参照）
• 回帰テスト: 既存の全テストスイートが通ることを確認（npm run test）
• ビルド確認: npm run build が成功することを確認

6. 完了条件

1. capitalize関数が src/lib/memos-shared.ts に1箇所のみ存在すること
2. 他の3ファイルからcapitalizeロジックの重複が除去されていること
3. src/lib/__tests__/memos-shared.test.ts の全テストケースが通ること
4. 既存の全テストが通ること（npm run test が0 failで完了）
5. npm run build が正常に完了すること
6. 既存の表示動作に変更がないこと（純粋なリファクタリング）

7. リスク評価

リスク: 極低

• 同一ロジックの共通化のみであり、動作変更はない
• 全使用箇所が既に memos-shared.ts に依存しているため、新たな依存関係は発生しない
• memos-shared.ts はNode.js非依存のため、クライアントコンポーネントからのインポートに問題はない

8. 工数見積

小規模なリファクタリングタスク。builderエージェントによる実装とreviewerエージェントによるレビューを合わせて、1サイクル内で完了可能。