😺

Remix | Actionの実行方法と使い分け

に公開
Remix
tech

Remix で action を実行する方法 は複数あるため、方法と使い分けを整理しておきます。

方法

1. <Form> + <button type="submit">

ページ遷移を伴うフォーム送信（標準的な方法）

  • <Form> を使えば、action にデータを送信できる。
  • method="post" などを指定すると、action の request.formData() でデータを取得可能。
import { Form } from "@remix-run/react";

export default function Page() {
  return (
    <Form method="post">
      <input type="text" name="message" />
      <button type="submit">Submit</button>
    </Form>
  );
}
  • ページ遷移: あり（リダイレクトが発生する可能性あり）
  • 用途: 標準的なフォーム送信

2. useFetcher + <fetcher.Form>

ページ遷移なしで action を実行（AJAX 形式のフォーム送信）

  • fetcher.Form を <Form> の代わりに使うと、ページ遷移せずに action を実行できる。
  • fetcher.data に action のレスポンスが格納される。
import { useFetcher } from "@remix-run/react";

export default function Page() {
  const fetcher = useFetcher();

  return (
    <fetcher.Form method="post">
      <input type="text" name="message" />
      <button type="submit">Submit</button>
      {fetcher.state === "submitting" && <p>Sending...</p>}
      {fetcher.data && <p>Response: {fetcher.data.message}</p>}
    </fetcher.Form>
  );
}
  • ページ遷移: なし（AJAX リクエスト）
  • 用途: インタラクティブな UI 更新、モーダル内フォーム

3. useFetcher + fetcher.submit

JavaScript から手動でフォーム送信（ページ遷移なし）

  • fetcher.submit(formData, { method: "post", action: "/your-action" }) を使うと、ボタンクリックなどのイベントから action を実行できる。
import { useFetcher } from "@remix-run/react";

export default function Page() {
  const fetcher = useFetcher();

  function handleSubmit() {
    const formData = new FormData();
    formData.append("message", "Hello!");
    fetcher.submit(formData, { method: "post", action: "/your-action" });
  }

  return (
    <div>
      <button onClick={handleSubmit}>Send</button>
      {fetcher.state === "submitting" && <p>Sending...</p>}
      {fetcher.data && <p>Response: {fetcher.data.message}</p>}
    </div>
  );
}
  • ページ遷移: なし
  • 用途: ボタンクリックでフォームデータを送信、非同期リクエスト

4. useSubmit

通常の <Form> をプログラム的に送信（ページ遷移あり）

  • useSubmit を使うと、イベントハンドラーから <Form> の送信をトリガーできる。
  • fetcher.submit と異なり、ページ遷移が発生する可能性がある。
import { Form, useSubmit } from "@remix-run/react";

export default function Page() {
  const submit = useSubmit();

  function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget as HTMLFormElement);
    submit(formData, { method: "post" });
  }

  return (
    <Form method="post" onSubmit={handleSubmit}>
      <input type="text" name="message" />
      <button type="submit">Submit</button>
    </Form>
  );
}
  • ページ遷移: あり（フォーム送信と同じ）
  • 用途: <Form> を手動で送信

📌 まとめ

方法 ページ遷移 action 実行方法 用途
<Form> + <button> あり 通常のフォーム送信 一般的なフォーム
useFetcher + <fetcher.Form> なし AJAX フォーム送信 モーダル、SPA 的な UI
useFetcher.submit() なし プログラム的な送信 カスタムボタン、非同期処理
useSubmit() あり プログラム的な送信 <Form> の手動送信

💡 どれを使うべき？

  • 通常のフォーム送信（ページ遷移あり） → <Form> + <button>
  • フォームのデータを保持したい（再編集や確認のため） → fetcher.Form
  • 非同期リクエストでページ遷移なし（AJAX） → fetcher.Form or fetcher.submit
  • ボタンクリックなどで action を呼び出す（ページ遷移なし） → fetcher.submit
  • プログラム的に <Form> を送信したい（ページ遷移あり） → useSubmit

Discussion