Claude Code के साथ Remix Web Practical Guide

Remixdevelopmentको Claude Code से तेज़ करें

RemixはWeb標準に忠実なフルスタックframeworkで、ローダーとアクションによるdataフローが特徴 है।Claude Code का उपयोग करके、Remixの規約に沿ったcodeを効率よくgenerateでき है।

routeとローダーの設計

datafetchpattern

> ブlog記事のlistpageと詳細pageをRemixでबनाओ。
> ローダーでdatafetch、errorバウンダリもsettingsして。

// 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>ブlog記事list</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>;
}

アクションによるformprocessing

プlogレッシブエンハンスメント

> コメント投稿formをRemixのアクションでimplement करो。
> validation付き、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>
  );
}

ネスティドrouting

Remixのネスティドrouting use करनाと、layoutの共有やdataの並列fetchが自然に実現でき है।Claude Codeにroute構造を相談すれば、最適なfile配置を提案してくれ है।

> management画面のroute構造を設計して。
> sidebarlayout共有、dashboard/usermanagement/settingsの3セクション。

セッションmanagementとauthentication

RemixのセッションAPIを使ったauthenticationimplementationもClaude Codeに任せられ है।Cookie セッションstorageのsettings से、保護routeのmiddleware的pattern तक一貫してgenerateでき है।

Summary

Claude Code का उपयोग करके、RemixのWeb標準に沿ったdataフロー設計やformprocessingを素早くimplementationでき है।Reactdevelopmentガイドやauthenticationimplementationも合わせてreference के लिए देखें。

Remixके details के लिएRemixofficial documentationをदेखें。