第7回 Laravel10 環境構築メモ（Inertiaが何かをザックリと理解する）

はじめに

とりあえず、installはしたが、Inertia.jsが何者なのか全く分からなかったので、調べてみました。

Inertiaのサイトを読んでみる

ちょっと、頭の中で翻訳しながら、気になるところを整理してみる。

Top page

Inertia.js - The Modern Monolith

簡単にまとめると、

• API作らなくて良い

• コントローラーとページビューを構築するだけ

• フレームワークではない

• フロントエンドとバックエンドをを結び付ける接着剤

• バックエンドのルーティングを使用して、React、Vue、および Svelte アプリを作成できる。

• Laravel 用に調整されている

全く、意味が分からない。次のページを読んでみます。

Who is Inertia.js for?

Who is Inertia.js for? - Inertia.js

• Inertia は、従来のサーバー側でレンダリングされたアプリケーションと全く同じように機能する。コントローラーを作成し、(ORM 経由で) データベースからデータを取得し、viewをレンダリングします。

• Inertia viewsは、React、Vue、または Svelte で記述された JavaScript ページ コンポーネントです。

まだ、わからないが、viewにReactのcomponetが使えそうな気配。

How it works

How it works - Inertia.js

• Inertia を使用すると、サーバー側の Web フレームワークを選択していつも行ってきたのと同じようにアプリケーションを構築できます。

• ルーティング、コントローラー、ミドルウェア、認証、認可、データフェッチなどのフレームワークの既存の機能を使用します。

同じことを何回も言ってるが、ここまでは理解。

• Inertia はアプリケーションのビュー層を置き換える。

• PHP または Ruby テンプレートを介したサーバー側レンダリングを使用する代わりに、アプリケーションから返されるビューは JavaScript ページ コンポーネント。

やっぱり、ビューはReactのコンポーネントを返す模様。

• Inertiaはクライアント側のルーティング ライブラリである。

• これにより、ページ全体を強制的にリロードせずにページにアクセスできるようになる。

• <Link>コンポーネントをクリックすると、Inertia はクリックをインターセプトし、代わりに XHR 経由でサーバー側にアクセスする。

• Inertia が XHR経由でアクセスを行うと、サーバーはそれが Inertiaであることを検出し、完全な HTML 応答を返す代わりに、JavaScript ページ コンポーネント名とデータ (props) を含む JSON 応答を返す。

• 次に、Inertia は前のページ コンポーネントを新しいページ コンポーネントと動的に交換し、ブラウザの状態を更新する。

なんとなく理解。いい感じにページに必要なコンポーネントとデータをpropsにバインドしてくれる感じなのかと。（あくまで）イメージとしては、↓の感じです。

③は、イメージ。実際の動きとちょっと違う

なので、Bladeテンプレートを使うようにReactのコンポーネントを使えるという事でAPIを作成してReactとサーバー間の通信を行う必要がなくなるとい感じかと。

おしまい

まだ、Inertiaを使ったコードを眺めてるだけなので、使用感は分からないがAPI不要なので、開発が捗りそうな予感はしました。