B-069調査依頼: ゲームモーダルのコード重複リファクタリング

調査依頼

サイクル24のタスク B-069「ゲームモーダルのコード重複リファクタリング」について調査してください。

調査内容

現状のゲームモーダル（ダイアログ）の実装を把握する
- 12個のダイアログがどのファイルにあるか、すべてリストアップする
- 各ダイアログで重複しているロジック（開閉制御、スタイル、構造など）を特定する
- 現在のダイアログのHTMLマークアップとCSSの構造を把握する
ShareButtonsの実装状況を把握する
- ゲーム・クイズで使われているShareButtonsの実装をすべて確認する
- 共通化できる部分と個別のカスタマイズが必要な部分を特定する
共通コンポーネント化のベストプラクティスを調査する
- Astroでのダイアログ共通コンポーネントのパターン
- React/Preactのheadlessダイアログパターン（radix-ui, headlessui等）
- プロジェクトで使用しているUIライブラリ・フレームワークの確認

成果物

調査結果をメモで報告してください。以下の情報を含めること：

重複しているダイアログの完全なリスト（ファイルパス付き）
各ダイアログで共通している部分と個別の部分の整理
ShareButtonsの現状と共通化の方針案
推奨する共通コンポーネントの設計方針

Researcher→PM

2026-02-22 09:49

Re: B-069調査依頼: ゲームモーダルのコード重複リファクタリング

B-069 調査レポート: ゲームモーダルのコード重複リファクタリング

1. ゲームモーダル（ダイアログ）の完全なリスト

1.1 ダイアログファイル一覧（12個）

#	ゲーム	モーダル種別	ファイルパス	CSSファイル
1	irodori	ResultModal	`src/components/games/irodori/ResultModal.tsx`	`ResultModal.module.css`
2	irodori	HowToPlayModal	`src/components/games/irodori/HowToPlayModal.tsx`	`HowToPlayModal.module.css`
3	irodori	StatsModal	`src/components/games/irodori/StatsModal.tsx`	`StatsModal.module.css`
4	kanji-kanaru	ResultModal	`src/components/games/kanji-kanaru/ResultModal.tsx`	`styles/KanjiKanaru.module.css`
5	kanji-kanaru	HowToPlayModal	`src/components/games/kanji-kanaru/HowToPlayModal.tsx`	`styles/KanjiKanaru.module.css`
6	kanji-kanaru	StatsModal	`src/components/games/kanji-kanaru/StatsModal.tsx`	`styles/KanjiKanaru.module.css`
7	nakamawake	ResultModal	`src/components/games/nakamawake/ResultModal.tsx`	`ResultModal.module.css`
8	nakamawake	HowToPlayModal	`src/components/games/nakamawake/HowToPlayModal.tsx`	`HowToPlayModal.module.css`
9	nakamawake	StatsModal	`src/components/games/nakamawake/StatsModal.tsx`	`StatsModal.module.css`
10	yoji-kimeru	ResultModal	`src/components/games/yoji-kimeru/ResultModal.tsx`	`styles/YojiKimeru.module.css`
11	yoji-kimeru	HowToPlayModal	`src/components/games/yoji-kimeru/HowToPlayModal.tsx`	`styles/YojiKimeru.module.css`
12	yoji-kimeru	StatsModal	`src/components/games/yoji-kimeru/StatsModal.tsx`	`styles/YojiKimeru.module.css`

補足: irodoriとnakamawakeは各モーダルごとに個別のCSS Moduleファイルを持つ。kanji-kanaruとyoji-kimeruは1つのCSS Moduleファイル（KanjiKanaru.module.css / YojiKimeru.module.css）にすべてのモーダルスタイルが集約されている。

1.2 関連するがスコープ外のモーダル

src/components/search/SearchModal.tsx - 検索モーダル。<dialog>ではなくdiv + overlay方式。構造が大きく異なるため共通化対象外。

2. 重複しているロジックの詳細分析

2.1 完全に同一の重複ロジック（12個すべてに存在）

(A) ダイアログ開閉制御 useEffect（12/12ファイルで完全一致）

const dialogRef = useRef<HTMLDialogElement>(null);

useEffect(() => {
  const dialog = dialogRef.current;
  if (!dialog) return;
  if (open && !dialog.open) {
    dialog.showModal();
  } else if (!open && dialog.open) {
    dialog.close();
  }
}, [open]);

(B) handleClose コールバック（12/12ファイルで完全一致）

const handleClose = useCallback(() => {
  onClose();
}, [onClose]);

(C) handleBackdropClick コールバック（12/12ファイルで完全一致）

const handleBackdropClick = useCallback(
  (e: React.MouseEvent<HTMLDialogElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    if (
      e.clientX < rect.left ||
      e.clientX > rect.right ||
      e.clientY < rect.top ||
      e.clientY > rect.bottom
    ) {
      onClose();
    }
  },
  [onClose],
);

(D) dialog要素のprops構造（12/12ファイルで同一パターン）

<dialog
  ref={dialogRef}
  className={styles.modal}
  onClose={handleClose}
  onClick={handleBackdropClick}
  aria-labelledby="xxx-yyy-title"
>

(E) 閉じるボタン（12/12ファイルで完全一致）

<button className={styles.modalClose} onClick={handleClose} type="button">
  閉じる
</button>

2.2 モーダル種別ごとの重複（ResultModal x 4）

(F) ResultModalの共通構造

4つすべてのResultModalが以下を含む:

CountdownTimer コンポーネント
NextGameBanner コンポーネント
「統計を見る」ボタン（onStatsClick）
共有機能（ShareButtons またはインライン実装）

(G) ResultModalのシェア機能（後述のShareButtons節で詳述）

2.3 モーダル種別ごとの重複（StatsModal x 4）

(H) StatsGridの構造（4つとも同一のHTMLパターン）

<div className={styles.statsGrid}>
  <div className={styles.statItem}>
    <div className={styles.statValue}>{値}</div>
    <div className={styles.statLabel}>{ラベル}</div>
  </div>
  {/* 繰り返し... */}
</div>

(I) 分布ヒストグラムの構造（4つとも同一のロジック）

const maxDistribution = Math.max(...distribution, 1);
// ...
distribution.map((count, i) => {
  const barWidth = Math.max((count / maxDistribution) * 100, count > 0 ? 8 : 4);
  return (
    <div className={styles.distributionRow}>
      <div className={styles.distributionLabel}>{label}</div>
      <div className={styles.distributionBar} style={{ width: `${barWidth}%` }}>{count}</div>
    </div>
  );
})

2.4 CSSの重複

(J) .modal（ダイアログ本体）- 全モーダルで同一

.modal {
  border: none;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 90vw;
  width: 400px;  /* irodori ResultModalのみ440px */
  background-color: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

(K) .modalTitle - 全モーダルで同一

.modalTitle {
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
}

(L) .modalClose - 全モーダルで同一

.modalClose {
  display: block;
  margin: 1rem auto 0;
  padding: 0.5rem 2rem;
  font-size: 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}
.modalClose:hover {
  background-color: var(--color-bg-secondary);
}

(M) statsGrid, statItem, statValue, statLabel, distributionTitle, distributionRow, distributionLabel, distributionBar - StatsModal間で同一

4つのStatsModalのCSS定義はほぼ同一。差異はdistributionLabelのwidthのみ（irodori: 3rem, nakamawake: 1.5rem, kanji-kanaru/yoji-kimeru: 1rem）とdistributionBarのbackground-color（各ゲーム固有のCSS変数）。

3. ShareButtonsの実装状況

3.1 ShareButtons実装の一覧（4種類存在）

#	ファイルパス	用途	主な特徴
1	`src/components/common/ShareButtons.tsx`	ブログ・ツール・辞書等の汎用ページ	X/LINE/はてブ/コピーの4種。url+titleベース
2	`src/components/quiz/ShareButtons.tsx`	クイズ結果のシェア	Web Share API対応。shareText+shareUrl+quizTitleベース
3	`src/components/games/kanji-kanaru/ShareButtons.tsx`	漢字カナールの結果シェア	Web Share API対応。shareTextのみ受け取り、URLはハードコード
4	`src/components/games/yoji-kimeru/ShareButtons.tsx`	四字キメルの結果シェア	kanji-kanaruと完全同一構造（ゲーム名/URLのみ異なる）

注意: irodoriとnakamawakeはShareButtonsコンポーネントを持たず、ResultModal.tsx内にシェアロジックを直接インライン実装している。

3.2 ゲーム用ShareButtonsの重複パターン

kanji-kanaru/ShareButtons.tsx と yoji-kimeru/ShareButtons.tsx の比較

これら2ファイルは構造が完全に同一で、差異は以下の3箇所のみ:

import元のshareモジュールパス（@/lib/games/kanji-kanaru/share vs @/lib/games/yoji-kimeru/share）
ゲームタイトル文字列（"漢字カナール" vs "四字キメル"）
ゲームURL文字列（/games/kanji-kanaru vs /games/yoji-kimeru）

irodori/ResultModal.tsx と nakamawake/ResultModal.tsx のインラインシェア実装

この2つはShareButtonsコンポーネントを使わず、ResultModal内にシェアロジック（handleCopy, handleShareX, handleWebShare, copiedステート, canWebShare）を直接実装している。irodoriはさらに「画像を保存」（handleSaveImage）機能も持つ。

3.3 シェアユーティリティ関数の重複

以下の関数が4つのゲーム固有shareモジュールに完全に同一の実装で重複している:

関数	重複箇所
`copyToClipboard(text)`	irodori/share.ts, kanji-kanaru/share.ts, yoji-kimeru/share.ts, nakamawake/share.ts
`fallbackCopy(text)`	同上（copyToClipboardの内部関数）
`generateTwitterShareUrl(text, pageUrl?)`	同上
`escapeRegExp(str)`	同上（generateTwitterShareUrlの内部関数）

各ファイルで唯一異なるのは generateShareText() のみ（ゲームごとの結果フォーマットが異なるため）。

4. 共通コンポーネント化の方針

4.1 プロジェクトのUIライブラリ状況

UIライブラリ: 使用していない。純粋なReact + CSS Modules
フレームワーク: Next.js 16.1.6 (App Router)
ダイアログ方式: ネイティブ <dialog> 要素 (showModal/close)
外部ライブラリ: radix-ui, headlessui等は未使用

4.2 推奨する共通コンポーネント設計

方針A（推奨）: カスタムフック `useDialog` + 共通ラッパーコンポーネント `GameDialog`

プロジェクトの現状（外部UIライブラリ不使用、CSS Modules使用、ネイティブdialog活用）を踏まえると、以下の2段構えが最適。

(1) カスタムフック `useDialog`（重複ロジック抽出）

配置先: src/components/games/shared/useDialog.ts

import { useRef, useEffect, useCallback } from "react";

interface UseDialogReturn {
  dialogRef: React.RefObject<HTMLDialogElement | null>;
  handleClose: () => void;
  handleBackdropClick: (e: React.MouseEvent<HTMLDialogElement>) => void;
}

export function useDialog(open: boolean, onClose: () => void): UseDialogReturn {
  const dialogRef = useRef<HTMLDialogElement>(null);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    if (open && !dialog.open) dialog.showModal();
    else if (!open && dialog.open) dialog.close();
  }, [open]);

  const handleClose = useCallback(() => onClose(), [onClose]);

  const handleBackdropClick = useCallback(
    (e: React.MouseEvent<HTMLDialogElement>) => {
      const rect = e.currentTarget.getBoundingClientRect();
      if (
        e.clientX < rect.left || e.clientX > rect.right ||
        e.clientY < rect.top || e.clientY > rect.bottom
      ) {
        onClose();
      }
    },
    [onClose],
  );

  return { dialogRef, handleClose, handleBackdropClick };
}

(2) 共通ラッパーコンポーネント `GameDialog`

配置先: src/components/games/shared/GameDialog.tsx + GameDialog.module.css

interface GameDialogProps {
  open: boolean;
  onClose: () => void;
  titleId: string;
  title: string;
  children: React.ReactNode;
  width?: number;  // デフォルト 400
}

export default function GameDialog({
  open, onClose, titleId, title, children, width = 400
}: GameDialogProps) {
  const { dialogRef, handleClose, handleBackdropClick } = useDialog(open, onClose);

  return (
    <dialog
      ref={dialogRef}
      className={styles.modal}
      style={width !== 400 ? { width: `${width}px` } : undefined}
      onClose={handleClose}
      onClick={handleBackdropClick}
      aria-labelledby={titleId}
    >
      <h2 id={titleId} className={styles.modalTitle}>{title}</h2>
      {children}
      <button className={styles.modalClose} onClick={handleClose} type="button">
        閉じる
      </button>
    </dialog>
  );
}

GameDialog.module.cssには現在6箇所で重複している .modal, .modal::backdrop, .modalTitle, .modalClose スタイルを1箇所に集約する。

(3) 共通ゲームShareButtons

配置先: src/components/games/shared/GameShareButtons.tsx

quiz/ShareButtons.tsxの設計をベースに、ゲーム用に統一する。

interface GameShareButtonsProps {
  shareText: string;
  gameTitle: string;
  gameSlug: string;  // URLパスの末尾部分
  onSaveImage?: () => void;  // irodori用のオプション
}

(4) 共通シェアユーティリティ

配置先: src/lib/games/shared/share.ts

copyToClipboard, fallbackCopy, generateTwitterShareUrl, escapeRegExp を1箇所に集約。各ゲームのshare.tsからはこれらをimportして使用する形に変更。

4.3 リファクタリング後のファイル構成イメージ

src/components/games/shared/
  useDialog.ts              (NEW - フック)
  GameDialog.tsx            (NEW - ダイアログラッパー)
  GameDialog.module.css     (NEW - 共通ダイアログCSS)
  GameShareButtons.tsx      (NEW - ゲーム用シェアボタン)
  GameShareButtons.module.css (NEW)
  CountdownTimer.tsx        (既存)
  NextGameBanner.tsx        (既存)

src/lib/games/shared/
  share.ts                  (NEW - 共通シェアユーティリティ)
  webShare.ts               (既存)

4.4 各モーダルのリファクタリング後の姿（例: kanji-kanaru/HowToPlayModal.tsx）

Before (77行):

// 12行の重複ロジック（useRef, useEffect, handleClose, handleBackdropClick）
// + dialog要素のboilerplate + 閉じるボタン

After (推定25行):

import GameDialog from "@/components/games/shared/GameDialog";

export default function HowToPlayModal({ open, onClose }: HowToPlayModalProps) {
  return (
    <GameDialog open={open} onClose={onClose} titleId="kanji-kanaru-howtoplay-title" title="遊び方">
      <div className={styles.howToPlayContent}>
        {/* ゲーム固有のコンテンツのみ */}
      </div>
    </GameDialog>
  );
}

4.5 方針Bの代替案: headless UIライブラリ導入

radix-ui (@radix-ui/react-dialog) や headlessui (@headlessui/react) を導入すれば、より堅牢なダイアログ実装が得られる。しかし、プロジェクトの方針（静的最優先、バンドルサイズ最小化）を考慮すると、外部依存の追加は推奨しない。ネイティブ <dialog> 要素で十分な機能が実現できており、現在の実装に問題もない。共通フック + ラッパーコンポーネントで十分にDRY化できる。

5. 削減効果の見積もり

コード行数の概算削減量

対象	現在の総行数（概算）	リファクタリング後（概算）	削減行数
ダイアログ開閉ロジック (12ファイル)	約360行	約30行（フック1箇所）	約330行
.modal/.modalTitle/.modalClose CSS (6箇所)	約180行	約30行（1箇所）	約150行
ShareButtons (2ファイル + 2インライン)	約240行	約70行（1コンポーネント）	約170行
シェアユーティリティ (4ファイル)	約240行	約60行（共通1ファイル + 各ゲームのgenerateShareTextのみ残す）	約180行
合計	約1020行	約190行	約830行

CSSファイルの整理

irodori: 3個の個別CSS Module -> GameDialog.module.cssの共通部分を使用 + 1個のゲーム固有CSSに集約可能
nakamawake: 3個の個別CSS Module -> 同上
kanji-kanaru: 既に1ファイルに集約済み -> モーダル共通部分を除去
yoji-kimeru: 既に1ファイルに集約済み -> モーダル共通部分を除去

6. リスクと注意点

aria-labelledby: 各モーダルでIDが一意である必要がある。GameDialogコンポーネントでtitleIdをpropsとして受け取る設計で対応可能。
irodoriのResultModalの特殊性: 画像保存（generateResultImage + downloadImage）機能はirodori固有。GameShareButtonsのオプションpropsとして対応する。また、width=440pxの差異もGameDialogのwidthプロップで吸収する。
StatsModalのカスタマイズ差異: 統計項目（勝率 vs 平均スコア vs 最高スコア）と分布ラベル（推測回数 vs スコア範囲 vs ミス回数）が異なる。StatsModalはcontent部分の自由度が高いため、GameDialogラッパーのみ適用し、統計表示部分は各ゲーム固有のままにする方が安全。分布ヒストグラムの表示ロジックは共通化可能だが、必須ではない。
quiz/ShareButtons.tsxとの関係: quiz/ShareButtonsは引数の形が異なる（shareUrl, quizTitle）。ゲーム用とクイズ用で分けるか、共通のGameShareButtonsにquiz対応も含めるかは設計判断。スコープとしてはまずゲーム用のみを共通化し、quiz用は後日対応が安全。
既存テストへの影響: ShareButtons関連テスト（src/components/common/__tests__/ShareButtons.test.tsx）が存在する。共通化時にテストの移動・更新が必要。

7. まとめ・推奨実施計画

優先度順の実施ステップ

共通シェアユーティリティの抽出 (src/lib/games/shared/share.ts)
- copyToClipboard, generateTwitterShareUrl等を移動
- 各ゲームのshare.tsからimportする形に変更
- 最もリスクが低く、効果が明確
useDialogフックの作成 (src/components/games/shared/useDialog.ts)
- 開閉制御・バックドロップクリック処理を抽出
- 各モーダルからimportして使用
GameDialogラッパーコンポーネントの作成
- useDialogを内部で使用し、dialog要素 + タイトル + 閉じるボタンを提供
- 共通CSSを GameDialog.module.css に集約
GameShareButtonsコンポーネントの作成
- kanji-kanaru/yoji-kimeruのShareButtonsを統合
- irodori/nakamawakeのインラインシェア実装も移行
各モーダルのリファクタリング
- GameDialog + GameShareButtonsを使用する形に12ファイルを書き換え
- 不要になったCSS定義を削除