はじめに
JS/TSやPHP/Laravelのロジック・関数・変数はcamelCaseを採用していることが多いと思いますが、DB由来のプロパティはsnake_caseで渡されるため、両者が混在します。
この混在をどのように受け入れ、現実的な落とし所を見つければ良いかを探るため、laravel-breezeとjetstreamの公式スタックのソースコードを調査しました。
その結果、公式の実装例や慣習から見えてきた「現実的なベストプラクティス」についてまとめます。
結論：命名規則の統一方針
- バックエンド（DB・API）：snake_caseで統一
- フロントエンド（props・formデータ）：snake_caseで統一
- ロジックや変数・関数名（JS/TS/PHP）：camelCaseで記述
なぜこのスタイルが主流なのか
- LaravelのEloquentはDBのsnake_caseカラム名と自動でマッピング
- APIリクエスト・レスポンスもsnake_caseがデフォルト
- Jetstream/Breeze公式スタックでもpropsやformデータはsnake_caseで統一
- JS/TS/PHPのロジックや関数・変数はcamelCaseが一般的
- 画面制御用のprops（例: mustVerifyEmail）はcamelCaseで渡される（snake_caseも有り）
実装例
1. バックエンド（Laravel）
// DBカラム・APIレスポンス
$label = Label::create([
'bg_color' => $request->input('bg_color'),
'text_color' => $request->input('text_color'),
]);
return Inertia::render('Labels/Create', [
'form' => [
'bg_color' => $label->bg_color,
'text_color' => $label->text_color,
]
]);
2. フロントエンド（Vue.js）
<script setup>
import { useForm } from '@inertiajs/vue3';
const form = useForm({
name: '',
bg_color: '',
text_color: '',
});
function handleSubmit() { // camelCase
form.post(route('labels.store'));
}
</script>
<template>
<form @submit.prevent="handleSubmit">
<TextInput v-model="form.bg_color" />
<TextInput v-model="form.text_color" />
<PrimaryButton type="submit">登録</PrimaryButton>
</form>
</template>
3. ロジックや変数・関数名
function handleSubmit() { /* camelCase */ }
const isValid = computed(() => { /* camelCase */ });
まとめ
今回の調査から、Laravel × Inertia.js × Vue.js公式スタックでは
データ由来（DB・API・props・form）はsnake_caseで統一し、ロジックやDB由来でない変数、関数名はcamelCaseで記述するのが現実的なベストプラクティスのようです。
このスタイルを採用することで、公式スタックの設計思想に沿った保守性・可読性の高い開発がしやすくなると感じました。
あくまで私の調査結果に基づくベストプラクティスですが、命名規則で迷った際の参考になれば幸いです。