Inertia.js入門 - SPAの複雑さとサヨナラできるモダンな選択肢

はじめに

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 に反映される仕組み。