Inertia::render('Test', ['enum_values' => $enum_values]);

ちなみに、以前公開した「Laravel + Inertia + React で多言語化する」と同じようにページにアクセスするたびに自動でInertiaへデータを送ってもいいのですが、これも１点だけ「うーん…」なことがあったりします。

それは・・・・・・

「動的にデータ取得しているので、入力補完が効かない😫」

というものです。

つまり、（私が使っている）phpstormでデータを入力する時に毎回「えーっと、あれの値はなんだっけか？？」とEnumファイルを見にいかないといけなくなってしまうわけです。

（例えば、「Food.」と入力した時点でカレーとかピザとかの候補が出てほしいんです）

<?php

namespace App\Enums;

enum Food: int
{
    case Pizza = 1;     // ピザ
    case Pasta = 2;     // パスタ
    case Burger = 3;    // ハンバーガー
    case Curry = 4;     // カレー
    case Ramen = 5;     // ラーメン
}

ちなみにEnumとは、シンプルに言うと「定数（変更されないデータ）」をグループで管理できる機能です。

php artisan make:command EnumToInertiaCommand

<?php

namespace App\Console\Commands;

use App\Enums\Food;
use Illuminate\Console\Command;

class EnumToInertiaCommand extends Command
{
    protected $signature = 'enum_to_inertia';
    protected $description = 'A command to convert enums to JavaScript';

    // ここに変換したい Enum を追加する
    private $converting_enums = [
        Food::class,
    ];

    public function handle(): void
    {
        $js_code = '';

        foreach ($this->converting_enums as $converting_enum) {

            $enum_name = last(
                explode('\\', $converting_enum)
            );
            $cases = call_user_func($converting_enum .'::cases');
            $js_code .= 'window.'. $enum_name .' = {' . "\n";

            foreach ($cases as $case) {

                $case_name = $case->name;
                $case_value = $case->value;
                $js_value = (is_string($case_value)) // 文字列の場合はクォートで囲む
                    ? "'". $case_value ."'"
                    : $case_value;
                $js_code .= '    "'. $case_name .'": '. $js_value .',' . "\n";

            }

            $js_code .= '};'. "\n";

        }

        $path = resource_path('js/Constants.js');
        file_put_contents($path, $js_code);

        $this->info('Done!');
    }
}

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "php artisan enum_to_inertia && vite build"
    },

    // 省略

"build": "vite build"

こうすることで、ビルド時に以下２つの流れで実行されるようになります。

1. Enum のデータを JavaScript 化
2. 通常の Vite のビルド

ちなみに、今回はビルド時だけJavaScript化されるようにしていますが、devでも同じように実行したい場合は以下のようにするといいでしょう。（時間がかかる可能性もあるので今回はビルド時のみにしました）

"dev": "php artisan enum_to_inertia && vite",

import './bootstrap';
import '../css/app.css';

import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import './Constants'; // 👈 ここを追加しました

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

// 省略

use Inertia\Inertia;

// 省略

Route::get('constants', fn() => Inertia::render('Constants'));

export default function Constants() {

    const FoodKeys = Object.keys(Food);

    return (
        <div className="p-5">
            {FoodKeys.map((key) => (
                <div key={key}>{key}: {Food[key]}</div>
            ))}
        </div>
    );

}

さぁ、これで準備は整いました。
以下のコマンドでViteのビルドを実行してみましょう。

npm run build

window.Food = {
    "Pizza": 1,
    "Pasta": 2,
    "Burger": 3,
    "Curry": 4,
    "Ramen": 5,
};

これで、グローバルな変数としてFoodが使えるようになりますね。

では、先ほどつくったテストページを実行してみましょう❗

うまくいくでしょうか・・・・・・

はい❗
うまくEnumから取得したデータを表示することができました。

では、今回重要な点として冒頭でも書いた「入力補完」がうまくいくかを最後にチェックしてみましょう。

テストページの途中に「Food.」と入力してみます。

すると・・・・・・