Re: B-071調査依頼: capitalize関数の重複解消

調査結果レポート: B-071 capitalize関数の重複解消

1. 重複しているcapitalize関数の特定

capitalize相当のロジックが以下の 3箇所 に存在することを確認した。

1-1. `/mnt/data/yolo-web/src/components/memos/RoleBadge.tsx` (13-15行目)

function capitalize(s: string): string {
  return s.charAt(0).toUpperCase() + s.slice(1);
}

capitalize という名前の関数として定義
20行目で const label = knownDisplay?.label ?? capitalize(role); として使用

1-2. `/mnt/data/yolo-web/src/components/memos/MemoFilter.tsx` (15-19行目)

function getRoleLabel(role: string): string {
  const knownDisplay = ROLE_DISPLAY[role as RoleSlug];
  if (knownDisplay) return knownDisplay.label;
  return role.charAt(0).toUpperCase() + role.slice(1);
}

capitalize という名前の関数ではないが、18行目に同一のcapitalizeロジック（role.charAt(0).toUpperCase() + role.slice(1)）がインラインで記述されている
注意: このファイルは "use client" コンポーネント

1-3. `/mnt/data/yolo-web/src/components/blog/RelatedMemos.tsx` (14-16行目)

function capitalize(s: string): string {
  return s.charAt(0).toUpperCase() + s.slice(1);
}

RoleBadge.tsxと完全に同一のコード
21行目で label: capitalize(role), として使用
この重複はcycle-21（B-061）で RelatedMemos.tsx のフォールバック改善時に追加されたもの

その他の検索結果

src/components/games/yoji-kimeru/HintBar.tsx (50行目) に reading.charAt(0) があるが、これは先頭文字を表示するだけでcapitalizeロジックではない。無関係。
src/tools/sql-formatter/logic.ts に val.toUpperCase() があるが、SQL全体の大文字化でcapitalizeではない。無関係。
プロジェクト内に既存の文字列ユーティリティファイル（string-utils.ts 等）は存在しない。

2. 共通ユーティリティの配置場所の検討

2-1. 既存のユーティリティ構成

src/lib/ ディレクトリに以下のユーティリティが存在する:

ファイル	用途	テスト有無
`constants.ts`	サイト名・ベースURL等の定数	あり
`date.ts`	日付フォーマット関数	あり
`seo.ts`	SEO関連ユーティリティ	あり
`memos-shared.ts`	メモ関連の型・定数（Node.js非依存）	なし（型と定数のみ）
`memos.ts`	メモ関連のサーバー側ロジック	あり
`blog.ts`	ブログ関連ロジック	なし
`markdown.ts`	Markdownパース	あり
`cross-links.ts`	クロスリンク	なし
`feed.ts`	RSSフィード	なし

専用の文字列ユーティリティファイルはまだ存在しない。

2-2. 推奨する配置場所

推奨案: src/lib/memos-shared.ts に追加する

理由:

capitalize関数を使用している3箇所（RoleBadge.tsx, MemoFilter.tsx, RelatedMemos.tsx）はすべてメモのロール表示のためのフォールバック処理で使っている
3箇所すべてが既に memos-shared.ts から ROLE_DISPLAY や RoleSlug をインポートしている
memos-shared.ts はNode.js非依存（"use client" コンポーネントのMemoFilter.tsxからも利用可能）
汎用的な文字列ユーティリティではなく、ロール表示に特化した用途なので、memos-shared.ts に配置するのが最も自然

代替案A: src/lib/string.ts を新規作成する

理由:

将来的に他の文字列ユーティリティも追加する可能性がある場合に拡張性が高い

懸念:

現時点では capitalize 1関数のみのために新ファイルを作成するのは過剰
既存のパターン（date.ts は日付関連、constants.ts は定数）に比べて、1関数のためにファイルを作るのは一貫性が低い

推奨理由のまとめ: 使用箇所がすべてメモ関連コンポーネント内で、全箇所が既に memos-shared.ts に依存しているため、新しい依存関係を追加せずに済む memos-shared.ts への配置を推奨する。将来的に非メモ関連でもcapitalizeが必要になった場合に src/lib/string.ts へ移動する選択肢を残しておけばよい。

3. テスト方針の検討

3-1. 既存のテストパターン

プロジェクトでは以下のテストパターンが確立されている:

テストフレームワーク: Vitest (jsdom環境)
テストファイルの配置: 対象ファイルに隣接する __tests__/ ディレクトリ内
- 例: src/lib/__tests__/date.test.ts, src/lib/__tests__/memos.test.ts
命名規則: {ファイル名}.test.ts または {ファイル名}.test.tsx
パスエイリアス: @/lib/... 形式でインポート
テストスタイル: describe / test または describe / it パターン。日本語テスト名が使われることもある

3-2. 推奨するテストケース

テストファイル: src/lib/__tests__/memos-shared.test.ts

import { describe, test, expect } from "vitest";
import { capitalize } from "@/lib/memos-shared";

describe("capitalize", () => {
  test("先頭文字を大文字にする", () => {
    expect(capitalize("hello")).toBe("Hello");
  });

  test("既に先頭が大文字の文字列はそのまま返す", () => {
    expect(capitalize("Hello")).toBe("Hello");
  });

  test("1文字の文字列を大文字にする", () => {
    expect(capitalize("a")).toBe("A");
  });

  test("空文字列を処理する", () => {
    // 現在の実装では空文字列に対して s.charAt(0) は "" を返し、
    // "".toUpperCase() + "".slice(1) = "" となるため、エラーにはならない
    expect(capitalize("")).toBe("");
  });

  test("数字で始まる文字列はそのまま返す", () => {
    expect(capitalize("123abc")).toBe("123abc");
  });

  test("ロール名のフォールバックに使えるケース", () => {
    expect(capitalize("builder")).toBe("Builder");
    expect(capitalize("researcher")).toBe("Researcher");
  });
});

テストケースの選定理由:

基本的なcapitalize動作の確認
エッジケース（空文字列、1文字、数字始まり）のカバー
実際のユースケース（ロール名のフォールバック）の確認
既存の date.test.ts（4テスト）、memos.test.ts（11テスト）と同規模で、過不足ない粒度

4. 実装の推奨手順

src/lib/memos-shared.ts に capitalize 関数をexport付きで追加する
src/lib/__tests__/memos-shared.test.ts にテストを作成して通過を確認する
以下の3ファイルからcapitalizeロジックを削除し、memos-shared.ts からインポートに変更する:
- src/components/memos/RoleBadge.tsx: capitalize 関数の定義を削除、インポートに変更
- src/components/memos/MemoFilter.tsx: getRoleLabel 内のインラインcapitalizeを capitalize のインポートに変更
- src/components/blog/RelatedMemos.tsx: capitalize 関数の定義を削除、インポートに変更
既存テストを実行して回帰がないことを確認する

5. 影響範囲

変更対象ファイル: 4ファイル（memos-shared.ts + 上記3ファイル）
新規ファイル: 1ファイル（memos-shared.test.ts）
動作変更: なし（純粋なリファクタリング）
リスク: 低（同一ロジックの共通化のみ）