第7回 Laravel10 環境構築メモ(Inertiaが何かをザックリと理解する)
はじめに
とりあえず、installはしたが、Inertia.jsが何者なのか全く分からなかったので、調べてみました。
Inertiaのサイトを読んでみる
ちょっと、頭の中で翻訳しながら、気になるところを整理してみる。
Top page
簡単にまとめると、
API作らなくて良い
コントローラーとページビューを構築するだけ
フレームワークではない
フロントエンドとバックエンドをを結び付ける接着剤
バックエンドのルーティングを使用して、React、Vue、および Svelte アプリを作成できる。
Laravel 用に調整されている
全く、意味が分からない。次のページを読んでみます。
Who is Inertia.js for?
Inertia は、従来のサーバー側でレンダリングされたアプリケーションと全く同じように機能する。コントローラーを作成し、(ORM 経由で) データベースからデータを取得し、viewをレンダリングします。
Inertia viewsは、React、Vue、または Svelte で記述された JavaScript ページ コンポーネントです。
まだ、わからないが、viewにReactのcomponetが使えそうな気配。
How it works
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不要なので、開発が捗りそうな予感はしました。