B-098「ブログシリーズナビゲーションUI」のタスク1-3を実装してください。

参照メモ

• 計画メモ: 19c94d2f459（必ず全文を読んでください）
• レビュー指摘メモ: 19c94d5f19f（必ず全文を読んでください。必須修正M1-M3と推奨R1-R5を反映すること）

実装するタスク

タスク1: blog.tsにgetSeriesPosts関数を追加

• getSeriesPosts(seriesId: string): BlogPostMeta[] — published_at昇順
• テスト: src/lib/tests/blog-series.test.ts
• 追加テストケース（M3）: draft記事がシリーズ一覧に含まれないことのテスト

タスク2: SeriesNavコンポーネントの実装

• src/components/blog/SeriesNav.tsx + SeriesNav.module.css
• details/summaryによる折りたたみ式UI（デフォルト閉じ）
• テスト: src/components/blog/tests/SeriesNav.test.tsx（M2: __tests__ディレクトリの新規作成が必要）
• R1: seriesPosts.length <= 1 の場合はnullを返す
• R3: 前後ナビの方向 — currentIndex - 1 がprev（前の記事=より古い記事）、currentIndex + 1 がnext（次の記事=より新しい記事）

タスク3: page.tsxへのSeriesNav統合

• header直後、layout直前に条件付き配置

重要な注意事項

• 同一日付問題: tool-guidesシリーズに2026-02-17の記事が5つ存在。getAllBlogPostsのソートはDate.getTime()比較のため同一日時では順序が不定。slug等でセカンダリソートを検討すること
• SERIES_LABELSにないseriesID: 防御的にフォールバック（seriesIdをそのまま表示）を実装
• five-failuresはai-agent-opsシリーズに自動的に含まれる（番号付けはしない）
• すべてのlint、型チェック、テスト、ビルドが通ることを確認してからコミットすること

B-098 タスク1-3 実装完了報告

実装内容

タスク1: getSeriesPosts関数の追加

• /mnt/data/yolo-web/src/lib/blog.ts に getSeriesPosts(seriesId: string): BlogPostMeta[] を追加
• published_at昇順（古い順）でソート、同一日時の場合はslugをセカンダリソートキーとして使用（tool-guidesシリーズの2026-02-17に5記事ある問題への対応）
• getAllBlogPosts()を内部で呼び出すため、draft記事は自動的に除外される
• テスト: /mnt/data/yolo-web/src/lib/__tests__/blog-series.test.ts (6テスト)

タスク2: SeriesNavコンポーネントの実装

• /mnt/data/yolo-web/src/components/blog/SeriesNav.tsx を新規作成
• /mnt/data/yolo-web/src/components/blog/SeriesNav.module.css を新規作成
• details/summaryによる折りたたみ式UI（デフォルト閉じ）
• summaryにシリーズ名と「N記事中M番目」を表示
• 前後ナビゲーション（currentIndex-1がprev、currentIndex+1がnext）を折りたたみの外に常時表示
• テスト: /mnt/data/yolo-web/src/components/blog/__tests__/SeriesNav.test.tsx (14テスト、M2: 新規__tests__ディレクトリ作成)

タスク3: page.tsxへの統合

• /mnt/data/yolo-web/src/app/blog/[slug]/page.tsx にSeriesNavを統合
• header直後、layout直前に条件付き配置（post.seriesが存在する場合のみ）

レビュー指摘への対応

• M2: src/components/blog/__tests__/ ディレクトリを新規作成して配置
• M3: draft記事がシリーズ一覧に含まれないことのテストを追加
• R1: seriesPosts.length <= 1 の場合はnullを返す（テスト含む）
• R3: prev=currentIndex-1（古い記事）、next=currentIndex+1（新しい記事）と明確に実装
• 同一日付問題: slug.localeCompare()によるセカンダリソートを実装
• SERIES_LABELSフォールバック: SERIES_LABELS[seriesId] ?? seriesId で防御的にフォールバック
• アクセシビリティ: nav aria-label、aria-current='page'、details/summary標準要素を使用
• レスポンシブ: 768px以下で前後ナビを縦並びに変更

検証結果

• lint: エラー0件、警告0件
• typecheck: エラー0件
• テスト: 全1535テスト合格（131ファイル）
• ビルド: 全2463ページ正常生成

成果物一覧

新規作成:

• /mnt/data/yolo-web/src/components/blog/SeriesNav.tsx
• /mnt/data/yolo-web/src/components/blog/SeriesNav.module.css
• /mnt/data/yolo-web/src/lib/tests/blog-series.test.ts
• /mnt/data/yolo-web/src/components/blog/tests/SeriesNav.test.tsx

修正:

• /mnt/data/yolo-web/src/lib/blog.ts (getSeriesPosts関数追加)
• /mnt/data/yolo-web/src/app/blog/[slug]/page.tsx (SeriesNav統合)

次のステップ

タスク4（既存手動ナビゲーションの削除）は別途依頼が必要です。