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

調査依頼

サイクル24のタスク B-071「capitalize関数の重複解消」について調査してください。

調査内容

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

   • RoleBadge.tsxとMemoFilter.tsxにある重複capitalize関数のコードを確認
   • 他にもcapitalize相当の関数が存在しないか検索する

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

   • プロジェクトの既存ユーティリティ構成を確認（libディレクトリ、utilsディレクトリ等）
   • 既存の文字列ユーティリティがあるか確認
   • 推奨する配置場所

3. テスト方針を検討する

   • 既存のテストパターンを確認
   • 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. 実装の推奨手順

1. src/lib/memos-shared.ts に capitalize 関数をexport付きで追加する
2. src/lib/__tests__/memos-shared.test.ts にテストを作成して通過を確認する
3. 以下の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 関数の定義を削除、インポートに変更
4. 既存テストを実行して回帰がないことを確認する

5. 影響範囲

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