Documentation Index
Fetch the complete documentation index at: https://kawax.biz/llms.txt
Use this file to discover all available pages before exploring further.
Precognitionとは
Precognitionは、フォーム送信前にサーバー側バリデーションを実行する仕組みです。
フロントエンドでバリデーションルールを重複定義せずに、Laravelのルールをそのまま使えます。
通常リクエストと違い、Precognitionリクエストではルートのミドルウェアやフォームリクエストの検証は実行されますが、コントローラーメソッド本体は実行されません。
そのため、入力中のリアルタイム検証に向いています。
インストール
Laravel 13ではバックエンド側の laravel/precognition を追加インストールする必要はありません。
必要なのはフロントエンド向けヘルパーパッケージです。
- Vue:
laravel-precognition-vue
- React:
laravel-precognition-react
- Alpine.js:
laravel-precognition-alpine
npm install laravel-precognition-vue
npm install laravel-precognition-react
npm install laravel-precognition-alpine
Inertiaは2.3以降でPrecognitionサポートが組み込みです。Inertia 3でもそのまま利用できます。
Inertiaフォームを使う場合は、通常 laravel-precognition-vue / laravel-precognition-react の追加導入は不要です。
バックエンド設定
ルートに HandlePrecognitiveRequests ミドルウェアを追加します。
バリデーションルールはフォームリクエストに集約するのが実践的です。
フォームリクエストにまとめると、ルールの再利用と責務分離がしやすくなります。
use App\Http\Requests\StoreUserRequest;
use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;
use Illuminate\Support\Facades\Route;
Route::post('/users', function (StoreUserRequest $request) {
// 通常送信時のみここが実行される
})->middleware([HandlePrecognitiveRequests::class]);
public function handle(Request $request, Closure $next): mixed
{
if (! $request->isPrecognitive()) {
Interaction::incrementFor($request->user());
}
return $next($request);
}
フロントエンド連携
Alpine.js（Blade）
<form x-data="{
form: $form('post', '/users', { name: '', email: '' }),
}">
@csrf
<input x-model="form.name" @change="form.validate('name')" />
<template x-if="form.invalid('name')">
<div x-text="form.errors.name"></div>
</template>
</form>
Vue（Inertia.js）
<script setup>
import { useForm } from 'laravel-precognition-vue';
const form = useForm('post', '/users', {
name: '',
email: '',
});
</script>
<template>
<input v-model="form.name" @change="form.validate('name')" />
<div v-if="form.invalid('name')">{{ form.errors.name }}</div>
</template>
React（Inertia.js）
import { useForm } from 'laravel-precognition-react';
const form = useForm('post', '/users', {
name: '',
email: '',
});
<input
value={form.data.name}
onChange={(e) => form.setData('name', e.target.value)}
onBlur={() => form.validate('name')}
/>
Axiosを使ったバニラJS
PrecognitionライブラリはAxiosを使います。
既存のAxiosインスタンスを使う場合は client.use() で差し替えます。
import Axios from 'axios';
import { client } from 'laravel-precognition-vue';
window.axios = Axios.create();
window.axios.defaults.headers.common['Authorization'] = authToken;
client.use(window.axios);
バリデーションのタイミング制御
入力ごとの検証は validate() を使います。
デバウンス時間は setValidationTimeout() で調整できます。
form.setValidationTimeout(3000);
validateFiles() を使います。
配列入力はワイルドカードで検証できます。
form.validate('users.*.email');
フォームヘルパー
useForm() は送信状態やエラー状態をまとめて扱えます。
validating: バリデーションリクエスト中processing: 送信中errors: エラー一覧valid('field') / invalid('field'): フィールドの検証状態submit(): 通常送信
const submit = () => form.submit()
.then(() => form.reset());
通常リクエストとPrecognitionリクエストの比較
以下の図は、通常リクエストとPrecognitionリクエストの処理の違いを示しています。
関連リンク
