LaravelとInertia.jsを組み合わせたSPA（Single Page Application）開発は、ユーザー体験を向上させ、開発者の作業を効率化する強力な手法です。このガイドでは、Inertia.jsを使用して、Laravelをバックエンドとし、フロントエンドにReactまたはVueを統合する方法を詳しく解説します。これにより、シームレスなSPAを構築するステップを理解しましょう。
Laravel Inertia.jsの基本
Inertia.jsは、Laravelとフロントエンドフレームワーク（ReactやVueなど）をシームレスにつなぐアダプターとして機能します。これにより、伝統的なサーバーサイドアプリケーションのようにLaravelのルーティングやコントローラーを使用しつつ、フロントエンドにはモダンなクライアントサイドレンダリングを採用できます。
Inertia.jsの利点は、SPAのようにページ遷移をスムーズにしながらも、Laravelの既存のビューやルーティングシステムをそのまま活用できる点にあります。それでは、具体的なセットアップ方法を見ていきましょう。
制作環境の準備
まず、Laravelプロジェクトを新たに作成するか、既存のプロジェクトにInertia.jsを組み込むために必要な環境を整えます。
必要条件
- Node.jsとnpmのインストール
- Composerを使ったLaravelのインストール
- Inertia.jsアダプター（ReactまたはVue）の準備
Laravelプロジェクトの作成
composer create-project --prefer-dist laravel/laravel your-project-name
cd your-project-name
Laravelプロジェクトを設定したら、Inertia.jsをインストールします。
Inertia.jsのインストール
Inertia.jsにはLaravelのバックエンドとフロントエンドのアダプターがあります。まず、以下のコマンドでLaravelのInertia.jsパッケージを追加します。
composer require inertiajs/inertia-laravel
次に、選んだフロントエンドフレームワーク用アダプターをインストールします。
Reactの場合:
npm install @inertiajs/inertia @inertiajs/inertia-react
npm install react react-dom
Vueの場合:
npm install @inertiajs/inertia @inertiajs/inertia-vue
npm install vue
フロントエンドのセットアップ
Inertia.jsは、フロントエンドコンポーネントの管理をできるだけスムーズに行えるように設計されています。各フレームワークごとに若干の違いがありますが、基本の構成は共通しています。
Reactの設定
プロジェクトのresources/jsディレクトリにapp.jsを作成し、次の内容を追加します。
import React from 'react';
import { render } from 'react-dom';
import { InertiaApp } from '@inertiajs/inertia-react';
const app = document.getElementById('app');
render(
<InertiaApp
initialPage={JSON.parse(app.dataset.page)}
resolveComponent={name => import(`./Pages/${name}`).then(module => module.default)}
/>,
app
);
これにより、Inertia.jsを介してReactコンポーネントをレンダリングできます。Pagesフォルダを作成し、そこに個々のページコンポーネントを保存します。
Vueの設定
Vue用には次のようにします。resources/js/app.js内でVueの初期設定を行います。
import Vue from 'vue';
import { InertiaApp } from '@inertiajs/inertia-vue';
Vue.use(InertiaApp);
const el = document.getElementById('app');
new Vue({
render: h => h(InertiaApp, {
props: {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: name => import(`./Pages/${name}`).then(module => module.default),
},
}),
}).$mount(el);
これでVueを使ったSPA環境を整えられます。
ルーティングとコントローラーの設定
次に、Laravelのルートやコントローラーを設定して実際にデータをやり取りできるようにします。
ルートの設定
通常のLaravelプロジェクトと同様に、routes/web.phpにてルーティングを設定します。ただし、Inertia.jsの場合、ビューを返す際には特定のInertiaコンポーネントを指定します。
use Inertia\Inertia;
Route::get('/', function () {
return Inertia::render('Home');
});
Homeは、resources/js/Pagesディレクトリ内に存在するコンポーネント名です。
コントローラーとの連携
コントローラーも通常のLaravelと同様に作成します。ただし、ビューを返す代わりにInertiaコンポーネントを指定します。
namespace App\Http\Controllers;
use Inertia\Inertia;
class HomeController extends Controller
{
public function index()
{
return Inertia::render('Home', [
'foo' => 'bar'
]);
}
}
ここでは、Homeコンポーネントにpropsとしてfooというデータを渡しています。
フロントエンドでのデータ受け取り
VueまたはReactで受け取ったプロップスをそのまま使用し、フロントエンドでレンダリングします。以下にReactとVueの例を示します。
Reactでのデータ表示
resources/js/Pages/Home.jsを作成し、以下のように内容を定義します。
import React from 'react';
const Home = ({ foo }) => (
<div>
<h1>Home Component</h1>
<p>Received: {foo}</p>
</div>
);
export default Home;
Vueでのデータ表示
resources/js/Pages/Home.vueを作成します。
<template>
<div>
<h1>Home Component</h1>
<p>Received: {{ foo }}</p>
</div>
</template>
<script>
export default {
props: {
foo: String,
},
};
</script>
パフォーマンスとデバッグのポイント
Inertia.jsを使用することで、SPAのような体験を得られる反面、データの取得時の効率性や、対話性の高い部分のデバッグが課題になることがあります。デバッグにはブラウザの開発者ツールを活用し、レスポンスの確認や状態管理の追跡を行いましょう。また、Laravelとフロントエンドのデーターバインディングの際には、モデルを最小限にしてレスポンスタイムを向上させることが推奨されます。
まとめ
LaravelとInertia.jsを活用したSPA開発は、フロントエンドとバックエンドの開発をシームレスに行うための優れた選択肢です。このガイドの手順に基づいて基本的なセットアップができれば、あとはプロジェクトごとに必要なカスタマイズを施すことで、高機能かつ効率的なウェブアプリケーションを構築できるでしょう。これを活用して、より充実したWeb体験を提供してください。
コメント