ブログ記事作成依頼: ゲームインフラリファクタリング

ブログ記事作成依頼

サイクル24の成果をまとめたブログ記事を作成してください。

テーマ

ゲームインフラのリファクタリング：12個のモーダル共通化、レジストリパターン導入、スクロールロック修正

記事に含めるべき内容

1. 背景: ゲーム関連コードに大量の重複があった状況（12モーダルの完全重複、7箇所のハードコード、データ不整合）
2. 変更内容:
   • B-069: GameDialog/useDialog/GameShareButtons共通コンポーネント化（約830行削減）
   • B-076: CSS body:has(dialog[open]) によるスクロールロック
   • B-070: ゲームデータレジストリパターン（Single Source of Truth）
   • B-071: capitalize関数の共通化（小さな改善）
3. 設計意図: なぜネイティブ<dialog>を維持したか、なぜCSS :has()を選んだか、なぜquiz/registryパターンに倣ったか
4. 採用しなかった選択肢: radix-ui等の外部UIライブラリ、body overflow:hiddenのJSアプローチ
5. 発見されたバグ: sitemap.tsのirodori欠落、accentColor/iconの不一致（レジストリ導入で自動修正）
6. 今後の展望: iOS Safariのスクロールロックフォールバック、StatsModalのヒストグラム共通化の可能性

ファイル配置

src/content/blog/2026-02-22-game-infrastructure-refactoring.md

必須事項

• .claude/rules/blog-writing.md のガイドラインに従うこと
• 冒頭にAI免責表示を含むこと
• 一人称は「私たち」
• frontmatterを正しいフォーマットで記載すること
• draft: false にすること
• published_at / updated_at は 2026-02-22T18:00:00+09:00
• npm run lint && npm run format:check && npm run build が通ること

参考

実装の詳細はサイクルドキュメント docs/cycles/cycle-24.md を参照してください。

完了報告

ブログ記事を作成しました。

作成ファイル

src/content/blog/2026-02-22-game-infrastructure-refactoring.md

記事の構成

1. はじめに: AI免責表示、4ゲーム12モーダルの重複問題の概要
2. 何が問題だったのか: 12モーダルの完全重複、7箇所のハードコード、スクロール問題
3. 共通コンポーネントによるモーダル統合: GameDialog、useDialog、GameShareButtonsの設計と実装（コード例付き）
4. CSSだけで実現するスクロールロック: body:has(dialog[open]) の採用理由とJSアプローチとの比較
5. レジストリパターンによるゲームデータの一元管理: types.ts/registry.tsの設計、Single Source of Truth
6. capitalize関数の共通化: 小さな改善の意義
7. 採用しなかった選択肢: Radix UI等の外部UIライブラリ、JSスクロールロック、メタデータのファイル分割
8. 発見・修正されたバグ: sitemap.tsのirodori欠落、アイコン/テーマカラー不一致
9. 今後の展望: iOS Safariフォールバック、StatsModalヒストグラム共通化

ガイドライン遵守事項

• 冒頭にAI免責表示を記載
• 一人称は「私たち」を使用
• frontmatterは指定フォーマットに準拠（draft: false、published_at/updated_at = 2026-02-22T18:00:00+09:00）
• 「なぜ」を重視した設計判断の説明を各セクションに記載
• 実際のコードを参照してコード例を正確に記載

検証結果

• npm run lint: 成功
• npm run format:check: 成功（prettier --write適用済み）
• npm run build: 成功（1927ページ生成、/blog/game-infrastructure-refactoring を含む）