はじめに
SPAを作りたいけど、APIの設計とか認証周りとか、正直めんどくさいなって思ったことありませんか。
個人的には、LaravelとかRailsみたいなサーバーサイドフレームワークの開発体験って好きなんですよね。ルーティングもコントローラーも一箇所にまとまっていて、認証もミドルウェアでサクッと書ける。でもフロントエンドはReactやVueでモダンに作りたい。
そんなワガママを叶えてくれるのが Inertia.js です。
Inertia.jsは、サーバーサイドのルーティングとコントローラーをそのまま使いながら、フロントエンドだけをReact/Vue/Svelteで書けるという、ちょっと変わったアプローチのフレームワーク。GitHubスター数は7,600以上、毎月40〜60万ダウンロードされている実績のあるプロジェクトです。
Inertia.jsの特徴とメリット
APIを作らなくていい
これが一番デカい。
通常のSPA開発だと、バックエンドでREST APIやGraphQLを設計して、フロントエンドでaxiosやfetchで叩いて...という流れになりますよね。Inertia.jsを使えば、その部分が丸ごと不要になります。
コントローラーから直接propsとしてデータを渡せるので、API設計という概念自体がなくなる。これ、意外と開発速度に効いてきます。
サーバーサイドの良さをそのまま活かせる
- ルーティングはサーバー側で一元管理
- 認証・認可もサーバーサイドのミドルウェアでOK
- バリデーションもサーバー側でやって、エラーはフロントに自動で渡る
- SEO対策もサーバーサイドレンダリングで対応可能
要するに、フルスタックフレームワークの資産をそのまま活かせるわけです。
フロントエンドは好きなものを選べる
対応しているフレームワーク:
- React
- Vue
- Svelte
バックエンド側も複数対応しています:
- Laravel(公式サポートが手厚い)
- Rails
- Django
- Phoenix
SPAライクな体験
ページ遷移時にフルリロードが発生しないので、ユーザー体験としてはSPAそのもの。でも裏側はサーバーサイドルーティングという、いいとこ取りな構成になっています。
インストール方法
Laravel + Vueの組み合わせで説明します。正直、この組み合わせが一番情報も多くて楽です。
サーバーサイド(Laravel)
composer require inertiajs/inertia-laravel
ルートテンプレートを作成:
<!-- resources/views/app.blade.php -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@vite(['resources/js/app.js', 'resources/css/app.css'])
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
ミドルウェアを設定:
php artisan inertia:middleware
クライアントサイド(Vue 3)
npm install @inertiajs/vue3
エントリーポイントを設定:
// resources/js/app.js
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
return pages[`./Pages/${name}.vue`]
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})
Reactの場合は @inertiajs/react、Svelteの場合は @inertiajs/svelte をインストールすればOKです。
基本的な使い方
コントローラーからページをレンダリング
use Inertia\Inertia;
class UserController extends Controller
{
public function show(User $user)
{
return Inertia::render('User/Show', [
'user' => $user,
'posts' => $user->posts()->latest()->get(),
]);
}
}
見ての通り、普通のLaravelコントローラーとほぼ同じ。Inertia::render() でページコンポーネント名とpropsを渡すだけです。
Vueページコンポーネント
<script setup>
import Layout from '@/Layouts/Default.vue'
import { Head } from '@inertiajs/vue3'
defineProps({
user: Object,
posts: Array,
})
</script>
<template>
<Layout>
<Head title="ユーザー詳細" />
<h1>{{ user.name }}</h1>
<ul>
<li v-for="post in posts" :key="post.id">
{{ post.title }}
</li>
</ul>
</Layout>
</template>
propsとしてサーバーから渡されたデータをそのまま使えます。型定義もできるので、TypeScriptとの相性も良い。
ページ遷移
<script setup>
import { Link } from '@inertiajs/vue3'
</script>
<template>
<Link href="/users/1">ユーザー詳細へ</Link>
<Link href="/users" method="post" :data="{ name: 'John' }">
ユーザー作成
</Link>
</template>
<Link> コンポーネントを使えば、SPAライクなページ遷移が実現できます。
フォーム送信
<script setup>
import { useForm } from '@inertiajs/vue3'
const form = useForm({
name: '',
email: '',
})
const submit = () => {
form.post('/users')
}
</script>
<template>
<form @submit.prevent="submit">
<input v-model="form.name" type="text" />
<div v-if="form.errors.name">{{ form.errors.name }}</div>
<input v-model="form.email" type="email" />
<div v-if="form.errors.email">{{ form.errors.email }}</div>
<button type="submit" :disabled="form.processing">
送信
</button>
</form>
</template>
useForm を使えば、フォームの状態管理、送信中フラグ、バリデーションエラーの表示が簡単にできます。サーバー側でバリデーションエラーを返せば、自動的に form.errors に反映される仕組み。
実践的なユースケース
管理画面の構築
個人的にはこれが一番ハマるユースケースだと思います。
管理画面って、認証・認可が必須で、CRUD操作が多くて、でもそれなりにリッチなUIにしたい。Inertia.jsなら:
- 認証はLaravelのミドルウェアでサクッと
- CRUD操作はリソースコントローラーで統一
- UIはVueやReactで好きなように作り込める
API設計で悩む時間がないので、機能実装に集中できます。
既存のサーバーサイドアプリのモダン化
Bladeで作った既存のLaravelアプリを、段階的にモダン化していくのにも使えます。全部一気に書き換える必要はなく、新規ページからInertiaを導入していく、という進め方ができる。
プロトタイピング
サービスの初期フェーズで、とにかく速くMVPを作りたい時。API設計に時間を取られずに済むので、アイデアの検証に集中できます。後からマイクロサービス化が必要になったら、その時に考えればいい。
Inertia.jsが向いていないケース
正直なところ、万能ではないです。
- モバイルアプリにも同じAPIを使いたい場合
- マイクロサービスアーキテクチャで複数チームが開発する場合
- フロントエンドとバックエンドを完全に分離したい場合
こういったケースでは、従来のSPA + REST API構成のほうが向いています。
まとめ
Inertia.jsは「サーバーサイドフレームワークの良さを活かしながら、モダンなフロントエンドを構築したい」というニーズにピッタリのソリューションです。
特に:
- Laravelの開発体験が好きな人
- API設計の手間を省きたい人
- 管理画面やダッシュボードを作りたい人
- 小〜中規模のプロジェクトを素早く立ち上げたい人
こういった方には、一度試してみる価値があると思います。
公式ドキュメントも充実しているし、Laravelを使っているなら laravel new のスターターキットでInertia入りのプロジェクトがすぐに作れます。週末にでもサクッと触ってみてください。
