VILT スタックとは

これは以下のフレームワークから成るスタックで、今の Laravel が SPA のスターターキットに採用している構成です。

概念図にするとこんな感じ。

Laravel と Vue の API 通信を Inertia というコネクタでつなげている感じです。
自動生成を駆使した爆速開発向けの構成になっています。

スタックには無いのですが、爆速開発のため、私は UI Library として Prime Vue を採用しています。
Laravel のデフォルトだとすだちが入ってたかな...？
Tailwind CSS に対応したライブラリを入れるのがおススメです。

メリット

API を作成しなくてもよい

フロントとバックの通信には、CRUD API を用いることが一般的ですが、こちらを整備するにはかなりのコストがかかると思います。
OpenAPI を用いて仕様書のようにインターフェースを整備していますか？
他には GraphQL を用いて、フロント側から必要なAPIを生成しようという考えもあるかもしれません。

SPA 時代になって tRPC という概念が生まれましたね。
これはバックで扱うデータ型を、フロントでもそのまま扱えるように、動的にAPIを生成しようという考え方です。
NEXT や NUXT がこの構成ですね。

これが本質に近いと思っていて、「システムを開発、維持する」としたときに必要なのは「どんなデータがやり取りされるのか」という型情報、 DTO (Data Transfer Object) の考え方ではないでしょうか。

VILT スタック では tRPC を発展させて、間にいる Inertia.js が言語の違いまでもを吸収してくれます。なので Inertia.jsは、Ruby On Rails でも React でも、いろんなものに対応しています！
意外にもロックインしていないんです。

Inertia.js はそんな新時代の API だと思ってください。

二重ルーターを回避

バックとフロントで別のフレームワークを導入すると、それぞれにルーティングを組む形になりますよね。。。
人間二つのものを管理することは難しいです。。

しかし Inertia.js の場合は、バック側 Laravel が全てのルーティングを行います！
ちなみにこれ、SPA に見えて SPA じゃないんですよね。
セッションもふつーに使える良いとこ取りです。

なので SPA で困りがちな認証や認可といった処理も Laravel 側に一任することができます！
安全！

Laravel が使える！

昨今色んな Webフレームワークが各言語から出てますが、Laravel ほど隅から隅までサポートしてくれる奴がないんですよね。。
特に Node.js 界隈はまだまだ貧弱な印象です。

ORM、認証、セッション、ロガー、メール送信、、、
どのフレームワークを使っても結局 Laravel っぽい構成にたどり着きます。

自由度が高すぎる？DDD に向いてない？
何を使っても、コードを整備できる力が必要ですよ。。
DDD は机上論としては神だと思うんですが、現場で考えるとオーバースペックだなぁと趣味にとどめています
無限の工数がほしい！！！

また、PHP で動くので、最悪レンタルサーバー一つで動かせます。
維持費が払えないプロジェクトでも扱えるのはかなりの利点です。

デメリット

ものごとの紹介はデメリットが大事だってじっちゃが言ってた！

PHP と TypeScript 双方を知らないといけない

フロントとバックが密結合になるので、Webシステムがそもそもどう動くのかを知っていないと、扱うのが難しいです。
（インフラ抜きの）フルスタックエンジニア向きの構成です。

私としては、フロント担当バック担当と分けるよりは、機能ごとに担当者を分けたほうが進めやすいなと感じているので、そういう思想の人に向いています。

マイナーな構成

この構成を知ってる人は果たして...
保守しきれんのかよ！ってなるかもしれません。

ただ、今の Laravel のスターターキットであり、Inertia.js 自体が Laravel のサポート傘下に入ったので、その辺のものよりは将来性が安心できます。

賛否両論だった Tailwind CSS もいつの間にか市民権を得てるので問題ないでしょう。
V4 になって Vite 単体で動くようになったので、導入もめちゃ簡単です。

なに？ Vue に不満があるなら React を導入できますよ！

PHP is Dead だって？何年いわれ続けてきているんだろう
処理速度も JIT なんて導入したもんなら爆速ですよ。
ただアロー式複数行書けないのは解せない...

Inertia.js 自体が何かにロックインするものではなく、ただのアダプターなので、他の新生スタックの採用とリスクは大きく変わらないと思います。そんなことよりサクッと作って、最悪システムを置き換えるほうが良い気がしていますね。
現代は時の流れが早すぎる...。

環境構築

環境構築といっても、Laravel のデフォルト構成なので簡単に用意することができます。

デフォルトの認証ログイン機能は必要に応じて切り替えるべし。

$ php -v
PHP 8.4.1 (cli) (built: Nov 21 2024 08:58:25) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.4.1, Copyright (c) Zend Technologies

$ node -v
v24.2.0

$ composer global require laravel/installer
$ laravel new <プロジェクト名>
 ┌ Which starter kit would you like to install? ────────────────┐
 │ Vue                                                          │
 └──────────────────────────────────────────────────────────────┘
 ┌ Which authentication provider do you prefer? ────────────────┐
 │ Laravel s built-in authentication                            │
 └──────────────────────────────────────────────────────────────┘
 ┌ Which testing framework do you prefer? ──────────────────────┐
 │ Pest                                                         │
 └──────────────────────────────────────────────────────────────┘
 
 ┌ Would you like to run npm install and npm run build? ────────┐
 │ Yes                                                          │
 └──────────────────────────────────────────────────────────────┘

$ cd <プロジェクト名>
$ composer dev

これだけで動いちゃうんですね...
素晴らしい。

ただ、もっと快適に開発ができるような仕組みを組むため、本アドベントカレンダーで一つ一つ解説していきます。

終わりに

つらつら書きましたが、爆速開発ができる laravel 構成があるんだよと知ってもらえたら十分です。
Laravel に出会い感動してから10年の歳月（v5あたりから使ってる）で、とうとうゴールだ...って開発体験が味わえるスタックが生まれてしまいました。

こいつを広めるためにも、今後実際の開発でのポイントをまとめていきます。
あわゆくば、導入マニュアルになったなぁと。
（社内向け資料って作るモチベ上がんないんですよね...。やはりエンジニア界に還元したい気持ちが勝ってしまします。）

つづく