【Laravel】Inertia.jsについて

はじめに

今回は開発で使用しているInertia.jsについて書いていきたいと思います。
Laravelでアプリを作る方法には、一般的な要求に対して1ページを返すものや、VueやReactを使用したSPAなどがあります。
SPAで作る場合は、LaravelのバックエンドでAPIを作り、Vueのフロントエンドで画面の描画やルーティングを行います。
バックエンドでは、フロントエンドの表示に合わせてAPIを作っていくのですが、API以外にページ一枚を返す要求にも応答しています。
そのためバックエンドの処理が複雑になることがあります。
そこで最近でてきたInertia.jsを利用すると、1ページ返す場合と、APIのデータだけを返す場合に対応した処理を1つ書くだけで対応することができます。

Inertia.jsとは

Inertia.jsはバックエンドとフロントエンドの両方にインストールして使用します。

バックエンド(Laravelでcomposer使用の場合)
composer require inertiajs/inertia-laravel

フロントエンド(Vue2でnpm使用の場合)
npm install @inertiajs/vue2

Inertia.jsはVueのようなjsのフレームワークではありません。
公式で「Build single-page apps、 without building an API」とあるように、APIを作らなくてもSPAが実現できるアプローチになります。
サーバサイドでルーティングをするけど、SPAのようにページのリロードが発生しない作りにすることができます。

inertia.jsの基本的な使い方

Inertia.jsは、すべてのページを返すか、一部分のjsonを返すかが状況によって異なります。
初回の要求では、すべてのページを返しますが、リンクやボタンがクリックされたときは、一部分のJsonデータを返します。
そのリンクやボタンをInertia.jsでは<inertia-link>というコンポーネントを利用して表します。

<inertia-link href=”/hello”>ハローリンク</inertia-link>

上記のようなリンクを用意してクリックすると、hrefに書いてあるパスをサーバサイドでルーティングして処理を実行し、Jsonを返却します。
その帰ってきた値を使用して、Vueが一部の値を変更します。
※描画自体はVueなどフロントエンドのフレームワークが行います。

おわりに

今回はInertia.jsについて書きました。これまで使ったことない技術に触れることが多くなってきたので、どんどん勉強してアウトプットできればいいなと思います。
今後、実際にInertia.jsを使用して開発環境構築からアプリを作っていきたいと思います。