FrontEnd BackEnd

Inertia使ってみた①

投稿日:

はじめに

以前Laravel Breezeをインストールした際にパッケージに含まれていたInertiaを使ってみたので簡単に紹介したいと思います。
今回はLaravel + Reactの組み合わせで使用しています。

Inertiaとは

バックエンドフレームワーク(Laravelなど)とフロントフレームワーク(VueやReact)の橋渡しの様な事を行うライブラリの様なもので、Laravelで言うBladeと同じ感覚でVueやReactを使用してのSPAが簡単に作成出来る様にするものです。
公式に「 it’s fine-tuned for Laravel」とあるので、特にLaravel利用を想定して作成されているようです。

ルーティング

Laravelのルーティングを通常通りそのまま使用出来ます。

web.php

LaravelからReactに値渡し

Bladeを使うのと同じ様に、使用するReactのコンポーネントを指定して利用する値を引数に指定するだけでLaravelからReatcに値を渡す事が出来ます。

フロント側で console.log すると、Propsに渡っているのが確認出来ます。

例えばモデルのコレクションを渡して、一覧表示みたいな事が簡単に出来ます。
Laravel

React
props.users でpropsからユーザー一覧情報を取得しています

先程のPropsに含まれている auth など他の値は、 HandleInertiaRequests ミドルウェアで設定されている値です。
ここで設定した値は、常にPropsに含まれる様になるのでコンポーネント関係なくグローバルに値保持したい場合に利用できそうです。
デフォルトではログインユーザー情報を含むauth、バリデーションエラーなどを含むerrors、Laravelのnameルーティング情報を含むziggyの3つが設定されています。

レスポンス

初回

レスポンスを見てみると、初回のアクセス時はHTMLとアセット(JSやCSS)が返却されており、このHTMLにはReactマウント用のdivタグが含まれています。
このdivタグのdata-pageに page object と呼ばれるデータ群が含まれていて、レンダリングの際にバックエンドからフロントエンドに渡る様です。

page object

page objectは以下で構成されているデータ群。
component: 表示しているコンポーネント名
props: バックエンドから渡される値
url: 表示画面のURL
version: アセットのバージョン管理用の値

2回目以降

2回目以降のアクセスでは、リクエストヘッダーに X-Inertia: true が含まれます。
このリクエストを検知するとInertiaの方でpage objectのみを含んだJSONレスポンスが返却されます。

リロード時

通常、Propsは常に全て渡されますが、定数系の値など、中には初回以降は必要ない値もあると思います。
クロージャーで書く事で、リロード時にこうした値をPropsに含めない用に設定する事が可能です。
DBアクセスを含む不要な値を含めない様にする事で表示速度パフォーマンスを高める事が期待できます。

例えば以下の場合だと、
レスポンスのpropsに、初回は usersfoo が含まれ、リロード時は bar のみが含まれます。

Laravel

Propsに含める変数の取得方法をそれぞれ変更しています。

React

ボタンクリック時にリロードしています。
その際に、onlyでレスポンスに含めるPropsを指定しています。
router.reload({ only: ['bar'] })

結果、barのみ含まれています。

さいごに

ほとんどMPAを作る要領でSPAが作成出来ました。次回はもう少し実践的な内容について書いてみたいと思います。

おすすめ書籍

プロフェッショナルWebプログラミング Laravel Laravel 9 実践入門 for Windows: ~開発環境・実装・アプリ公開までの流れを完全網羅~ TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd, BackEnd
-, ,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

【Git】マージコミットを消したい

1 はじめに2 例えばこんなことってないでしょうか?3 マージコミットを消す4 さいごに はじめに こんにちは、tonnyです。 今回はGitのケーススタディ的なものを書きたいと思います。 反面教師と ...

rails

関連するモデルのレコードを一緒に作成する方法

1 はじめに1.1 前提条件2 実装2.1 モデルの作成2.2 コントローラの作成2.3 Viewの作成3 さいごに はじめに フォームからレコードを作成する際に、関連するモデルのレコードを一緒に作成 ...

js

Vue.jsをTypeScriptで安全に開発するためのtsconfig.json

1 はじめに1.1 開発環境1.2 プロジェクト作成時点のtsconfig.json2 include3 exclude4 compilerOptions4.1 コンパイル系オプション4.1.1 ta ...

rails

半年ぶりにRails Tutorialをやったメモ

はじめに Railsを触り始めて半年ほどたちました、tonnyです。 復習もかねてRails Tutorialを実施したので、そのメモを残します。 やはり2回目でも気づくことは多いので、非常に勉強にな ...

laravel logo

コードでわかるLaravelのブラウザ認証

1 はじめに1.1 認証機能の概要2 Controller3 SessionGuard3.1 fireAttemptEvent3.2 retrieveByCredentials3.3 hasValid ...

フォロー

blog-page_side_responsive

2023年1月
1234567
891011121314
15161718192021
22232425262728
293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。