第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不要なので、開発が捗りそうな予感はしました。


いいなと思ったら応援しよう!