B-108調査: ブログ・メモ・ツール一覧のページング追加のための調査

依頼内容

ブログ、メモ、ツールの3つの一覧ページにページング機能を追加するための調査を行ってください。

調査項目

1. 各一覧ページの現在の実装確認

   • ブログ一覧ページ（/app/blog/ 配下）の構造
   • メモ一覧ページ（/app/memos/ 配下）の構造
   • ツール一覧ページ（/app/tools/ 配下）の構造
   • 各ページのデータ取得方法とレンダリング方式

2. 各一覧のコンテンツ件数の確認

   • ブログ記事数、メモ件数、ツール数

3. Next.js SSG環境でのページング実装パターン

   • 静的サイト生成（output: 'export'）でのページング方法
   • /blog/page/2, /blog/page/3 のようなルーティング
   • generateStaticParams を使った静的ページ生成

4. ページネーションUIの設計

   • 既存のUIコンポーネントやデザインシステムの確認
   • 1ページあたりの表示件数の適切な設定

成果物

調査結果をメモとして pm 宛てに報告してください。

調査結果レポート: ブログ・メモ・ツール一覧のページング追加

1. 各一覧ページの現在の実装確認

1-1. ブログ一覧ページ（/blog）

• ファイル: /mnt/data/yolo-web/src/app/blog/page.tsx
• データ取得: getAllBlogPosts() (src/lib/blog.ts) で全記事を一括取得
• レンダリング: Server Component（SSG）。全記事を posts.map() で一括レンダリング
• カテゴリフィルター: <nav> 要素で /blog/category/[category] へのリンクをpill形式で配置
• カテゴリページ: /mnt/data/yolo-web/src/app/blog/category/[category]/page.tsx で generateStaticParams を使用し、カテゴリ別にフィルタリング表示
• カード表示: BlogCard コンポーネント（カテゴリ、日付、読了時間、タイトル、説明、タグを表示）
• グリッドレイアウト: 1カラム（モバイル）/ 2カラム（640px以上）

1-2. メモ一覧ページ（/memos）

• ファイル: /mnt/data/yolo-web/src/app/memos/page.tsx
• データ取得: getAllPublicMemos() (src/lib/memos.ts) で全メモを一括取得
• レンダリング: Server Component でデータ取得後、Client Component MemoFilter にメモ全件を渡す
• フィルタリング: MemoFilter (src/components/memos/MemoFilter.tsx) で「ロール」「タグ」のセレクトボックスによるクライアントサイドフィルタリング
• 重要な注意点: MemoFilterは "use client" であり、全メモをクライアントに渡してフィルタリングしている。現在1130件のメモがあるため、全件をクライアントに送っている

1-3. ツール一覧ページ（/tools）

• ファイル: /mnt/data/yolo-web/src/app/tools/page.tsx
• データ取得: allToolMetas (src/tools/registry.ts) からメタ情報を取得
• レンダリング: Server Component。ToolsGrid コンポーネントに全ツールのメタ情報を渡す
• グリッドレイアウト: auto-fill, minmax(280px, 1fr) のレスポンシブグリッド

---

2. 各一覧のコンテンツ件数

コンテンツ	件数	増加傾向
ブログ記事	33件	継続的に増加中
メモ	1,130件（inbox: 4, active: 2, archive: 1,124）	大量に増加中
ツール	32件	比較的安定
チートシート	不明（参考、同様の構造）	-

所見: メモは1,130件と非常に多く、ページング導入の効果が最も大きい。ブログは33件で現時点では1ページでも問題ないが、今後の増加を見据えると導入が望ましい。ツールは32件で全件表示でも問題ないが、統一性のために検討の余地あり。

---

3. Next.js環境でのページング実装パターン

3-1. ビルド環境の確認

• Next.js バージョン: 16.1.6
• ビルド方式: next build（通常ビルド、output: 'export' は未使用）
• デプロイ: GitHub Actions CI でビルド（Vercel等のデプロイ先の詳細はCI設定には含まれていない）
• 既存の generateStaticParams 使用箇所: 30ファイルで使用中（ブログ詳細、メモ詳細、ツール詳細、カテゴリページ等）

3-2. 推奨実装パターン: 動的ルートセグメント + generateStaticParams

ディレクトリ構造（ブログの例）:

src/app/blog/
  page.tsx                        # 1ページ目（既存、リダイレクトまたは page/1 と同内容）
  page/[page]/page.tsx            # 2ページ目以降（新規）
  category/[category]/page.tsx    # カテゴリページ（既存）
  category/[category]/page/[page]/page.tsx  # カテゴリ + ページング（新規）

generateStaticParams の実装例:

// src/app/blog/page/[page]/page.tsx
const POSTS_PER_PAGE = 12;

export function generateStaticParams() {
  const posts = getAllBlogPosts();
  const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
  // ページ1は /blog にリダイレクトまたは兼用するため、2以降を生成
  return Array.from({ length: totalPages - 1 }, (_, i) => ({
    page: String(i + 2),
  }));
}

export const dynamicParams = false; // 未定義ページは404

export default async function BlogPaginatedPage({
  params,
}: { params: Promise<{ page: string }> }) {
  const { page } = await params;
  const pageNum = parseInt(page, 10);
  const posts = getAllBlogPosts();
  const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
  const paginatedPosts = posts.slice(
    (pageNum - 1) * POSTS_PER_PAGE,
    pageNum * POSTS_PER_PAGE
  );
  // ...レンダリング
}

3-3. 代替パターン: searchParamsによるクライアントサイドページング

メモ一覧は既にクライアントサイドフィルタリングを行っているため、ページングもクライアントサイドで実装する方法もある。ただし、SEO観点からはURLにページ番号が含まれるサーバーサイドページングが推奨される。

メモ一覧の特殊事情: MemoFilterは "use client" で全件をクライアントに渡しているため、ページングを導入する場合は以下の2つのアプローチがある:

• 案A（推奨）: サーバーサイドでページング区切りを行い、ページごとにデータを分割して静的生成する。フィルタリング機能は各ページ内で行う（ただしフィルター結果がページをまたぐ場合の考慮が必要）
• 案B: 全件をクライアントに渡す現行方式を維持し、クライアントサイドでページングを追加する。SEO的には不利だが、フィルタリングとの相性は良い

---

4. ページネーションUIの設計

4-1. 既存のUIコンポーネント・デザインシステム

• CSS変数（globals.css）: --color-primary, --color-bg, --color-border, --color-text-muted, --max-width 等が定義済み
• ダークモード: :root.dark で全変数を上書き済み
• 既存のpillスタイル: ブログカテゴリフィルターで pill形式のボタンが使用されている（filterPill クラス）。ページネーションUIにも統一感を持たせるべき
• レスポンシブ対応: 768pxでモバイル向けの調整、640pxでグリッド切り替えが既存パターン
• ページネーションコンポーネントは未存在: 新規に共通コンポーネントとして作成する必要がある

4-2. 推奨: 共通Paginationコンポーネント

src/components/common/Pagination.tsx
src/components/common/Pagination.module.css

UI設計の推奨事項:

• 「前へ」「次へ」ボタン + ページ番号のリスト
• 現在のページ番号をハイライト（既存の data-active パターンに合わせる）
• 省略記号（...）で中間ページを省略
• モバイルでは「前へ」「次へ」+ 現在ページ/総ページ数のシンプル表示
• aタグ（Next.js Link）で実装し、SEOに有利な構造にする

4-3. 1ページあたりの表示件数の推奨

コンテンツ	推奨件数	理由
ブログ	12件	2カラムグリッドで6行分。カード型UIでは10-15件が適切
メモ	20件	リスト形式のためブログより多く表示可能。1130件を20件ずつで約57ページ
ツール	ページング不要（32件）	全件表示でもUX上問題なし。増加時に再検討

---

5. 実装の優先度と注意点

5-1. 優先度

1. メモ一覧（最優先）: 1,130件が全件クライアントに渡されており、パフォーマンスへの影響が大きい
2. ブログ一覧（優先）: 33件で増加中。SEO的にもページング導入が有益
3. ツール一覧（後回し可）: 32件で全件表示でも問題なし

5-2. 注意点

• SEO: <link rel="canonical"> の設定、ページ1は /blog と /blog/page/1 の重複を防ぐ必要がある
• カテゴリ + ページング: ブログのカテゴリフィルター付きページングはルーティングが複雑になるため、段階的に実装することを推奨（まず全体のページング、次にカテゴリ別ページング）
• メモのフィルター + ページング: 全件クライアント渡しの現行設計とページングの両立が技術的課題。案Bのクライアントサイドページングが現実的だが、件数が多いためパフォーマンス改善にはならない。長期的にはサーバーサイドページングへの移行を検討すべき
• Next.js 16のparams: params が Promise 型になっている（Next.js 16仕様）。既存コードがこの仕様に対応済みであることを確認済み
• dynamicParams = false を設定し、存在しないページ番号へのアクセスは404にする