アプリケーションのフロントエンドとバックエンドで同じバリデーションルールを維持することは、メンテナンス性を向上させ、設定漏れを防ぐ上で重要です。本記事では、Vue.js と Laravel を使用してバリデーションルールを共通化する方法を紹介します。
1.Auth.phpに共通化したいバリデーションルールを定義
2.バックエンドであるLaravelからは直接呼び出す
3.フロントエンドであるVue.jsからは、Vuexにバリデーションを集約させ、共通部分をAPI経由で呼び出す
ジャンプできる目次
前提条件
- Vue.js 3 と Vuex を使用できること。
- axios がインストールされていること。
Vue3におけるVuexのインストール方法は下記の記事で解説
Laravelで共通バリデーションルールを定義
config/auth.php ファイルに共通のバリデーションルールを追加します。これにより、バックエンドで直接これらの値を参照できるようになります。
// config/auth.php
return [
// 既存の設定...
'policy' => [
'password_min_length' => 8,
'name_max_length' => 100,
'email_max_length' => 255,
],
// 他の設定...
];バックエンドでのバリデーションルールの使用
Laravelのコントローラーで、config ヘルパ関数を使ってこれらの設定値を取得します。
// 例: App\Http\Controllers\AuthController.php
public function register(Request $request)
{
$validatedData = $request->validate([
'name' => 'required|string|max:' . config('auth.policy.name_max_length'),
'email' => 'required|string|email|max:' . config('auth.policy.email_max_length') . '|unique:users',
'password' => 'required|string|min:' . config('auth.policy.password_min_length'),
]);
// ユーザー登録の残りの処理...
}フロントエンドでのAPIの設定
// routes/api.php
Route::get('/policy', function () {
return config('auth.policy');
});Vuexの設定
/resources/js/store/index.js
か
/resources/js/store/store.js
// resources/js/store/index.js
import { createStore } from 'vuex';
import axios from 'axios';
export default createStore({
state: {
//apiからの取得に時間がかかるとエラーになるので、適当に初期値を設定（今後は変更しなくていい）
policy: {
password_min_length: 0, // パスワードの最小文字数の初期値を0に設定
name_max_length: 255, // 名前の最大文字数の初期値
email_max_length: 255, // Eメールの最大文字数の初期値
}, // バリデーションルールの初期状態
},
mutations: {
setPolicy(state, policy) {
state.policy = policy;
},
},
actions: {
async loadPolicy({ commit }) {
try {
const response = await axios.get('/api/policy');
commit('setPolicy', response.data);
} catch (error) {
console.error('APIからポリシーのロードに失敗:', error);
}
},
},
getters: {
validationRules: (state) => ({
name: [
v => !!v || 'Name is required',
v => v.length <= state.policy.name_max_length || `Name must be less than ${state.policy.name_max_length} characters`,
],
// 他のバリデーションルール...
}),
},
});アプリケーションの初期化時にバリデーションルールをロード
app.js または main.js で、アプリケーションの初期化時にバリデーションルールをロードします。
// app.js または main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
const app = createApp(App);
app.use(store);
app.mount('#app');
store.dispatch('loadPolicy');Vueコンポーネントでバリデーションルールを使用
<template>
//中略
<v-form ref="formRef" @submit.prevent="submit">
<v-text-field v-model="formData.name" :rules="formRules.name" label="Name" required
autocomplete="username"></v-text-field>
<v-text-field v-model="formData.email" :rules="formRules.email" label="Email" required
type="email" autocomplete="email"></v-text-field>
<v-text-field v-model="formData.password" :type="showPassword ? 'text' : 'password'"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
@click:append="showPassword = !showPassword" :rules="formRules.password" label="Password"
required autocomplete="current-password"></v-text-field>
<v-btn type="submit" color="primary">Register</v-btn>
</v-form>
//中略
</template>
//中略
<script>
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
const formRules = computed(() => store.getters.validationRules);
// その他のセットアップロジック...
return {
formRules,
};
},
};
</script>上記のhtmlはVuetifyの書き方だが、バリデーションルールに
:rules="formRules.name"
:rules="formRules.email"
:rules="formRules.password"
を指定しているところがポイント。
今回の環境
- Vue3
- Vuetify3
- Laravel10
