ホーム > Laravel > 【Laravel】Inertiaのフォームの使い方を簡潔にまとめる
Laravel

【Laravel】Inertiaのフォームの使い方を簡潔にまとめる

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. はじめに
  2. 基本的な書き方
  3. プロパティを確認する
  4. おわりに
PR

Laravel プロジェクトで Inertia.js を使ったフロントエンドのフォームの基本的な使い方を簡潔にまとめました

はじめに

この記事はフォームの書き方に特化したもので、特に Laravel の Inertia.js は、useForm を使った書き方で実装する前提で作られていると思います。

流れで実装したい人は、Inertia.js を使って実装する記事があるのでそちらをご覧ください。

Inertia.js の基本的な書き方を流れで紹介します

基本的な書き方

Inertia.js で React を選択した時の基本的な書き方です。

import { useForm } from "@inertiajs/react"

export default function Create() {
  const form = useForm({
    title: "",
    content: "",
  })

  const createPost = e => {
    e.preventDefault() // デフォルトのフォーム送信を防ぐ
    form.post(route("post.store"), {
      preserveScroll: true,
      onSuccess: () => reset(), //formのリセット
      onError: errors => {
        //エラー時の処理を書く
      },
    })
  }

  return (
    <>
      <div className="w-4/5 mx-auto py-12">
        <h1>新規作成</h1>
        <form onSubmit={createPost}>
          <div>
            <div>
              <input
                value={form.data.title}
                onChange={e => form.setData("title", e.target.value)}
                placeholder="タイトル"
              />
            </div>
            <div>
              <textarea
                value={form.data.content}
                onChange={e => form.setData("content", e.target.value)}
                placeholder="内容"
              ></textarea>
            </div>
            <button>投稿</button>
            <div>{form.data.title}</div>
          </div>
        </form>
      </div>
    </>
  )
}

ここまでが基本形で本題でした。

以降はプロパティの一覧と使い方についてまとめています。

非常に長いですが、便利な機能もあるので一読してみると新しい発見があるかもしれません。

プロパティを確認する

useFormを使うと様々な便利なデータを使用することができ、リアクティブにこのプロパティが更新されるため、とても便利です。

どんなプロパティがあるのか詳細をみていきたいと思います。

  • data
  • setData
  • get
  • post
  • put
  • patch
  • delete
  • submit
  • transform
  • cancel
  • reset
  • clearErrors
  • errors
  • hasErrors
  • setError
  • progress
  • isDirty
  • processing
  • recentlySuccessful
  • wasSuccessful
  • setDefaults

プロパティの使い方

data や cancel を例にすると

const form = useForm()
const data = form.data
const cancel = form.cancel

または、

const { data, cancel } = useForm()

data

フォームの入力値を保持するオブジェクト。useForm の初期値で指定したデータが格納されます。

const { data } = useForm({
  title: "",
  content: "",
})

console.log(data.title) // 現在のタイトル
console.log(data.content) // 現在のコンテンツ

<div>{data.title}</div>

setData

フォームの特定のフィールドの値を動的に更新します。

const { setData } = useForm({
  title: "",
  content: "",
})
setData("title", "新しいタイトル")
setData("content", "新しいコンテンツ")

get

GET リクエストを送信します。

const Posts = () => {
  form.get(route("post.index"), {
    onSuccess: () => {},
    onError: errors => {},
  })
}

Laravel 側のルーティングの GET に対応します。

Route::get('/posts',[PostController::class, 'index'])->name('post.index');

post

POST リクエストを送信します。

const createPost = () => {
  form.post(route("post.store"), {
    onSuccess: () => {},
    onError: errors => {},
  })
}

Laravel 側のルーティングの POST に対応します。

Route::post('/post',[PostController::class, 'store'])->name('post.store');

put

PUT リクエストを送信します。

const updatePost = id => {
  form.put(route("post.update", id), {
    onSuccess: () => {},
    onError: errors => {},
  })
}

Laravel 側のルーティングの PUT に対応します。

Route::put('/post/{id}/update',[PostController::class, 'update'])->name('post.update');

patch

PATCH リクエストを送信します。

const updatePostPartially = id => {
  form.patch(route("post.update", id), {
    onSuccess: () => {},
    onError: errors => {},
  })
}

Laravel 側のルーティングの PATCH に対応します。

Route::patch('/post/{id}/update',[PostController::class, 'update'])->name('post.update');

delete

DELETE リクエストを送信します。

const deletePost = id => {
  form.delete(route("post.destroy", id), {
    onSuccess: () => alert("投稿が削除されました！"),
  })
}

Laravel 側のルーティングの DELETE に対応します。

Route::delete('/post/{id}/destroy',[PostController::class, 'destroy'])->name('post.destroy');

submit

post,put,patch,deleteを手動で指定して送信することができます。

const method = "post" //`put`,`patch`,`delete`
const customSubmit = (method, id) => {
  form.submit(method, route(`post.store`, id), {
    onSuccess: () => {},
    onError: errors => {},
  })
}

transform

送信前にデータを変換します。

form.transform(data => ({
  ...data,
  title: data.title.trim(),
}))

cancel

現在進行中のフォーム送信をキャンセルすることができます。

const cancelRequest = () => {
  form.cancel() // 送信をキャンセル
}

reset

フォームのデータを初期状態にリセットします。

form.reset()
form.reset("title") //特定のフィールドのみ

clearErrors

現在のフォームのエラーをクリアします。

const handleClearErrors = () => {
  form.clearErrors() // エラーをクリア
}

errors

フォーム送信時のバリデーションエラーを保持します。

ようするに以下のように書くだけで、バリデーションエラーの内容を表示できます。

<span>{form.errors.title}</span>

Laravel 側のバリデーション

    public function store(Request $request)
    {
        $validatedData = $request->validate([
            'title' => 'required|string|max:255', // タイトルは必須、文字列、最大255文字
            'content' => 'nullable|string',      // 内容は任意、文字列
        ]);
        //略
    }

hasErrors

エラーが存在するかどうかをチェックします。

true or false

if (form.hasErrors) {
  alert("フォームにエラーがあります！")
}
<input
    value={form.data.title}
    onChange={(e) => form.setData('title',e.target.value)}
    placeholder="タイトル"
    required
/>
<button disabled="{form.hasErrors}">送信</button>

setError

自分でエラーを設定することができます

form.setError({
  title: "タイトルは必須です",
  content: "コンテンツは空であってはいけません",
})

progress

アップロード進行状況を示します（ファイルアップロードの場合）。

これ本当に便利。

form.post(route("upload"), {
  onProgress: progress => {
    console.log(`アップロード進行状況: ${progress.percentage}%`)
  },
})
{form.progress &&
<progress value="{form.progress.percentage}" max="100"></progress>}

isDirty

フォームのデータが変更されたかどうかを判定します。

変更されたら True

if (form.isDirty) {
  alert("フォームが変更されています！")
}
<button disabled="{!form.isDirty}">変更を保存</button>

processing

フォームが送信中であることを示します。

送信中 True

if (form.processing) {
  console.log("送信中...")
}
<button disabled="{form.processing}">送信</button>

recentlySuccessful

送信が成功したあと True になり、数秒後 False に戻ります。

{form.recentlySuccessful &&
<p>送信が成功しました！</p>
}

wasSuccessful

直前のリクエストが成功したかどうかを判定します。

if (form.wasSuccessful) {
  alert("送信に成功しました！")
}

setDefaults

フォームの初期値を設定します。

form.setDefaults({
  title: "初期タイトル",
  content: "初期コンテンツ",
})

おわりに

以上、使えるプロパティをまとめてみました。

console.log(form)

で確認できるプロパティを全て書いてみましたが、もし他にもあったら教えてください！

誰かの参考になれば幸いです。

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。