【第4回】Wiki一覧と詳細画面を作る〜情報の整理と見返しやすさを意識して〜

20:00

こんにちは。前回は、個人向けアプリに追加したWiki機能のうち、「記事の登録・更新・削除」機能について紹介しました。今回はその続きとして、「Wikiの一覧表示」と「詳細画面」の実装についてご紹介します。

パスワード管理の記事は以下を参照してください。

【第1回】の記事は以下を参照してください。

【第2回】の記事は以下を参照してください。

【第3回】の記事は以下を参照してください。

一覧画面の実装 /app/src/app/wikis/page.tsx

Wiki記事が増えてきたとき、「どこに何を書いたか？」をすばやく把握できる一覧画面は不可欠です。

以下は一覧表示のコードです：

    
'use client';
import { useEffect, useState } from 'react';
import Link from 'next/link';
import type { Wiki } from '@/types/wiki';

const WikiListPage = () => {
  const [wikis, setWikis] = useState<Wiki[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const load = async () => {
      try {
        const res = await fetch('/api/wiki');
        if (!res.ok) throw new Error('読み込み失敗');
        const data: Wiki[] = await res.json();
        setWikis(data);
      } catch (err) {
        setError((err as Error).message);
      }
    };
    load();
  }, []);

  if (error) return <div>読み込みエラー</div>;
  if (!wikis) return <div>読み込み中...</div>;

  return (
    <div className="space-y-4">
      <h1 className="text-2xl font-bold">Wiki一覧</h1>
      <Link href="/wikis/new" className="bg-blue-500 text-white px-4 py-2 rounded">新規作成</Link>
      <ul className="space-y-2">
        {wikis.map((wiki) => (
          <li key={wiki.id} className="border p-4 rounded">
            <Link href={`/wikis/${wiki.id}`} className="font-semibold hover:underline">
              {wiki.title}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default WikiListPage;

データ取得は useEffect + fetch で行い、状態管理はシンプルに useState で構成しています。一覧から記事のタイトルをクリックすると、次に紹介する詳細ページへ遷移します。

詳細画面の実装 /app/src/app/wikis/[id]/page.tsx

一覧から記事タイトルをクリックすると、個別記事の詳細が確認できるようになっています。

    
'use client';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import type { Wiki } from '@/types/wiki';

const WikiDetailPage = ({ params }: { params: { id: string } }) => {
  const router = useRouter();
  const [wiki, setWiki] = useState<Wiki | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const load = async () => {
      try {
        const res = await fetch(`/api/wiki/${params.id}`);
        if (!res.ok) throw new Error('読み込み失敗');
        const data: Wiki = await res.json();
        setWiki(data);
      } catch (err) {
        setError((err as Error).message);
      }
    };
    load();
  }, [params.id]);

  if (error) return <div>読み込みエラー</div>;
  if (!wiki) return <div>読み込み中...</div>;

  return (
    <div className="space-y-4">
      <h1 className="text-2xl font-bold">{wiki.title}</h1>
      <p className="whitespace-pre-wrap border p-4 rounded bg-white">{wiki.content}</p>
      <button onClick={() => router.push(`/wikis/edit/${wiki.id}`)} className="bg-blue-500 text-white px-4 py-2 rounded">編集</button>
    </div>
  );
};

export default WikiDetailPage;

ポイント