実践練習: ブログサイトの構築

このセクションでは、Remix を使用して簡単なブログプラットフォームを構築するプロジェクトを通じて、これまで学んだ内容の実践的な適用を示します。このプロジェクトは、ルーティング、データの取得、フォームの処理、スタイリング、そして状態管理を含みます。

プロジェクト概要

  • 目的: 簡単なブログプラットフォームを構築し、記事の表示、新規作成、編集ができるようにします。
  • 機能:
    • 記事の一覧表示
    • 記事の詳細表示
    • 新規記事の投稿
    • 記事の編集（オプション）

ステップ 1: プロジェクトのセットアップ

  • まず、新しい Remix プロジェクトを作成します。
npx create-remix@latest my-blog
cd my-blog
npm install

ステップ 2: ルーティングとページの作成

  • app/routes/index.jsxを編集して、ブログのホームページを作成します。
import { Link } from 'remix';

export default function Index() {
  return (
    <div>
      <h1>ブログホームページ</h1>
      <nav>
        <Link to='/posts'>記事一覧</Link>
      </nav>
    </div>
  );
}
  • app/routes/posts/index.jsxで、記事の一覧を表示するページを作成します。

ステップ 3: データの取得と表示

  • loader関数を使用して、記事データを取得し、一覧で表示します。
import { json, Link } from 'remix';

// 仮のデータ
const posts = [
  { id: 1, title: 'Remix入門', content: 'Remixは素晴らしい！' },
  // 他の記事...
];

export const loader = () => {
  return json({ posts });
};

export default function Posts() {
  const { posts } = useLoaderData();
  return (
    <div>
      <h1>記事一覧</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link to={`/posts/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

ステップ 4: 新規記事の投稿

  • フォームを使用して新規記事を投稿できるようにします。action関数を使ってフォームデータを処理します。
// app/routes/posts/new.jsx
import { redirect, Form } from 'remix';

export const action = async ({ request }) => {
  // フォームデータの処理をシミュレーション
  return redirect('/posts');
};

export default function NewPost() {
  return (
    <Form method='post'>
      <div>
        <label htmlFor='title'>タイトル:</label>
        <input type='text' id='title' name='title' />
      </div>
      <div>
        <label htmlFor='content'>内容:</label>
        <textarea id='content' name='content' />
      </div>
      <button type='submit'>投稿</button>
    </Form>
  );
}

ステップ 5: スタイリングと最終調整

  • CSS モジュールや Tailwind CSS を使用して、アプリケーションにスタイルを適用します。

ステップ 6: デプロイメント

  • 前のセクションで説明した方法を使用して、アプリケーションを Verc

el や Netlify にデプロイします。

演習

  • 演習 1: 記事の編集機能を追加します。app/routes/posts/$postId/edit.jsxにルートとページを作成し、記事を編集できるフォームを実装してください。
  • 演習 2: 記事を保存するための実際のバックエンドサービス（例: Firebase, Supabase）を統合します。loaderとaction関数で API 呼び出しを行い、記事データの取得と更新を実現してください。