Remix Web Practical Guide with Claude Code

Remix開発をClaude Codeで加速する

RemixはWeb標準に忠実なフルスタックフレームワークで、ローダーとアクションによるデータフローが特徴です。Claude Codeを使えば、Remixの規約に沿ったコードを効率よく生成できます。

ルートとローダーの設計

データ取得パターン

> ブログ記事の一覧ページと詳細ページをRemixで作成して。
> ローダーでデータ取得、エラーバウンダリも設定して。

// app/routes/blog._index.tsx
import { json } from '@remix-run/node';
import type { LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { getPosts } from '~/models/post.server';

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const page = Number(url.searchParams.get('page') || '1');
  const posts = await getPosts({ page, limit: 10 });
  return json({ posts, page });
}

export default function BlogIndex() {
  const { posts, page } = useLoaderData<typeof loader>();

  return (
    <div>
      <h1>ブログ記事一覧</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2><a href={`/blog/${post.slug}`}>{post.title}</a></h2>
          <p>{post.description}</p>
        </article>
      ))}
    </div>
  );
}

export function ErrorBoundary() {
  return <div>記事の読み込みに失敗しました。</div>;
}

アクションによるフォーム処理

プログレッシブエンハンスメント

> コメント投稿フォームをRemixのアクションで実装して。
> バリデーション付き、JS無効でも動作するように。

// app/routes/blog.$slug.tsx
import { json, redirect } from '@remix-run/node';
import type { ActionFunctionArgs } from '@remix-run/node';
import { Form, useActionData } from '@remix-run/react';
import { z } from 'zod';

const commentSchema = z.object({
  name: z.string().min(1, '名前は必須です'),
  body: z.string().min(5, 'コメントは5文字以上で入力してください'),
});

export async function action({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData();
  const result = commentSchema.safeParse(Object.fromEntries(formData));

  if (!result.success) {
    return json({ errors: result.error.flatten().fieldErrors }, { status: 400 });
  }

  await createComment({ slug: params.slug!, ...result.data });
  return redirect(`/blog/${params.slug}`);
}

export default function BlogPost() {
  const actionData = useActionData<typeof action>();

  return (
    <Form method="post">
      <div>
        <label htmlFor="name">Name</label>
        <input id="name" name="name" type="text" />
        {actionData?.errors?.name && <p>{actionData.errors.name}</p>}
      </div>
      <div>
        <label htmlFor="body">コメント</label>
        <textarea id="body" name="body" />
        {actionData?.errors?.body && <p>{actionData.errors.body}</p>}
      </div>
      <button type="submit">Submit</button>
    </Form>
  );
}

ネスティドルーティング

Remixのネスティドルーティングを使うと、レイアウトの共有やデータの並列取得が自然に実現できます。Claude Codeにルート構造を相談すれば、最適なファイル配置を提案してくれます。

> 管理画面のルート構造を設計して。
> サイドバーレイアウト共有、ダッシュボード/ユーザー管理/設定の3セクション。

セッション管理と認証

RemixのセッションAPIを使った認証実装もClaude Codeに任せられます。Cookie セッションストレージの設定から、保護ルートのミドルウェア的パターンまで一貫して生成できます。

Summary

Claude Codeを使えば、RemixのWeb標準に沿ったデータフロー設計やフォーム処理を素早く実装できます。React開発ガイドや認証実装も合わせて参考にしてください。

Remixの詳細はRemix公式ドキュメントを参照してください。