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


関連記事

rails

Rails5で出力される「alias_method_chain is deprecated.」について

1 はじめに2 alias_method_chainとは3 Module#prependとは4 とりあえず、DEPRECATION WARNINGの出力をなくしたい5 さいごに はじめに 直近のプロジ ...

GraphQL

いまさら学ぶGraphQL〜概要編〜

1 はじめに2 GraphQLとは?2.1 なぜGraphQLは誕生した?2.1.1 過剰な取得2.1.2 過少な取得2.1.3 エンドポイントの管理3 GraphQLのメリットとデメリット3.1 G ...

laravel logo

laravel-enumを使ってみたら快適だった

1 はじめに2 enumについて3 環境4 導入5 enumクラス5.1 生成5.2 enumクラス編集5.3 日本語化6 マイグレーション6.1 生成6.2 編集7 プロパティのキャスト8 さいごに ...

Stripe Connectで支払方法をクローンする

1 はじめに2 プラットフォームの顧客側の実装2.1 プラットフォームの顧客登録2.2 支払方法の登録3 支払方法クローンの実装3.1 顧客と支払方法のクローン3.1.1 支払方法のクローン3.1.2 ...

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

フォロー

blog-page_side_responsive

2023年1月
1234567
891011121314
15161718192021
22232425262728
293031  

アプリ情報

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