Inertia.jsのルーティングとレスポンス作成　Inertia入門#３

Laravel8でjetstreamを入れるとLimewireかInertiaかを選べます。この記事ではInertiaを使ってルーティングやInertiaレスポンスの返し方を解説します。

前回の記事ではInertia.jsをLaravelにインストールして、HelloWorldを表示させるところまで行いました。今回はその続きですのでぜひ前回の記事と合わせてお読みください。

ソースコード
Inertiaレスポンス
名前付きルート
まとめ
次回予告

ソースコード

ソースコードはGitHubに公開しています。

GitHub - shipwebdotjp/Inertiajs-tutorial at V3

This is a tutorial for Inertia.js on Laravel8. Contribute to shipwebdotjp/Inertiajs-tutorial development by creating an account on GitHub.

Inertiaレスポンス

コントローラーの作成

前回HelloWorldを表示させたときは、直接web.phpでInertiaビューを返しました。静的なページであればそれでも構いませんが、実際は何らかのデータを表示したり、編集削除ができるようにすることが多いと思います。

そうしたデータを取得してビューに渡す役割を果たすのがコントローラーです。今回はブックマークを表示する「BookmarkController」コントローラーを作成していきます。

artisanでコントローラーファイルのテンプレートを作成します。

php artisan make:controller BookmarkController

「app/Http/Controllers/BookmarkController.php」というコントローラーファイルが作成されます。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class BookmarkController extends Controller
{
    //この下にリクエストがあった場合の処理を記述します。    
}

indexアクションを追加

Inertiaをuseしてクラス名だけでInertiaを使用できるようにします。

use Inertia\Inertia;

BookmarkControllerクラスにindexアクションを追加します。

    public function index () 
    {
        $bookmarks = [
            [
                'title' => 'SOHO MIND',
                'url' => 'https://blog.shipweb.jp/',
            ],
            [
                'title' => 'Youtube Checker',
                'url' => 'https://ytc.shipweb.jp/',
            ],
        ];

        return Inertia::render('Bookmark/Index',['bookmarks' => $bookmarks]);
    }

3-12行目：ブックマークのデータを配列で用意します。本来ならモデルから取得しますが、今回は簡略化のため直接データを指定しています。
14行目：Inertiaレスポンスを返しています。「Inertia::render」でInertiaでビューを処理するための関数を呼び出します。引数は、1番目が表示するページ、２番目がそのページに渡すデータです。

BookmarkController全体はこのようになります。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;

class BookmarkController extends Controller
{
    //    
    public function index () 
    {
        $bookmarks = [
            [
                'title' => 'SOHO MIND',
                'url' => 'https://blog.shipweb.jp/',
            ],
            [
                'title' => 'Youtube Checker',
                'url' => 'https://ytc.shipweb.jp/',
            ],
        ];

        return Inertia::render('Bookmark/Index',['bookmarks' => $bookmarks]);
    }
}

ルートの追加

「routes/web.php」に、「/Bookmark」というURLにアクセスしたときに、「BookmarkController」クラスの「index」メソッドを呼び出すルートを追加します。

//web.phpの最後に追加
Route::get('/Bookmark',[App\Http\Controllers\BookmarkController::class, 'index']);

ページの作成

ブックマーク一覧を表示するVueコンポーネントを作成します。先ほどコントローラーで返すInertiaレスポンスはこのようなものでした。

return Inertia::render('Bookmark/Index',['bookmarks' => $bookmarks]);

1番目の引数で表示するページを指定していました。ここでは「Bookmark/Index」というページを指定しています。このページはVueコンポーネントですので、「Bookmark」というフォルダを作成し、その下に「Index.vue」というファイル名でVueコンポーネントファイルを作成します。

Inertiaページの置き場所は「resources/js/Pages/」配下になるため、Index.vueファイルのパスは「resources/js/Pages/Bookmark/Index.vue」となります。

<template>
    <h2 class="text-lg border-b py-2">ブックマーク一覧</h2>
    <ul class="list-disc list-inside p-2">
        <li v-for="bookmark in bookmarks">
            <a :href="bookmark.url" target=_blank class="text-blue-700" >{{ bookmark.title }}</a>
        </li>
    </ul>
</template>

<script>
    export default {
        props:{
            bookmarks: {
                type: Array,
            }
        },
    }
</script>

内容は一般的なVueコンポーネントと変わりません。propsに、コントローラーで返すよう指定したInertiaレスポンスの2番目の引数が入ります。連想配列の名前と、propsで受け取るデータの名前を合わせてください。この場合、「bookmarks」がブックマークの配列データが入った変数名となります。

表示確認

ファイルを保存して、動作確認してみましょう。Vueファイルを編集しているので、JSファイルのコンパイルが必要になります。

npm run watch

この連載記事の「DockerでLaravelの開発環境を構築する」の方法で環境を作っている場合は「make npm-watch」コマンドを実行しておくと、アセットファイルの変更があった時にLaravel Mixが走って自動的にコンパイルされます。

「http://localhost/Bookmark」にアクセスしてブックマーク一覧が表示されるか確認しましょう。次のように表示されれば成功です。

ブックマーク一覧

名前付きルート

ルートを直接記述する場合

前回HelloWorldページからホーム画面に戻るためのInertia-linkを作成したときのリンク先はこのようになっていました。

        <inertia-link href="/" class="text-sm text-blue-700 underline">
                ホームへ戻る
        </inertia-link>

「href=”/”」と、直接URLを指定しています。この書き方でもInertia-linkのおかげでXHRリクエストが代わりに行われてレスポンスもJSONで返って来ました。

名前付きルートを使用する場合

Laravelでは、URLを記述する時に直接URLを記述する代わりに、ルートにあらかじめ付けておいた名前と渡したパラメーターで適切なURLを生成してくれる機能があり、Inertia.jsでもそれが使えます。

名前付きルートはこんな時に便利

後からパスを変えたくなった時に、ルート定義ファイルだけを変更するだけで済む。（コントローラーやビューの中の該当パスを探して変更する手間が省ける）
存在しないルートの場合はエラーが出るため、ミスに気が付きやすい。

名前付きルートの作り方

ルート定義の後にnameメソッドをルート名を渡してチェインします。（末尾に->name(“ルート名”);を追加します。）

このブックマーク一覧を表示するルートに、「bookmark.index」という名前を付ける場合このように末尾にnameメソッドを追加します。

Route::get('/Bookmark',[App\Http\Controllers\BookmarkController::class, 'index'])->name('bookmark.index');

Inertiaページで名前付きルートからURLを生成する

LaravelでInertia.jsを使用する場合、Ziggyライブラリのおかげで、Vueコンポーネントの中で「route」メソッドにルート名を渡して呼び出すことで、定義しておいた名前付きルートのURLを取得できます。

ブックマーク一覧のタイトルに、名前付きルートで作成したURLを使って自身のページへのリンクを張ってみます。H2タグの中を以下のように書き換えます。

# 変更前
    <h2 class="text-lg border-b py-2">ブックマーク一覧</h2> 

# 変更後
   <h2 class="text-lg border-b p-1">
        <inertia-link :href="route('bookmark.index')" class="text-blue-700 underline">
        ブックマーク一覧
        </inertia-link>
    </h2>

:href=”route(‘bookmark.index’)” がポイント！
routeメソッドを’bookmark.index’というルート名の引数を渡して呼び出すことで「/Bookmark」というURLを取得できます。
hrefの前に「:」をつけると、Vueの動作で動的にその属性値を解釈します。つまり、その中の関数などが実行されて、属性値として用いられます。

<inertia-link>を使うために、コンポーネントを登録します。<Script>を次のように変更します。

<script>
    import { InertiaLink } from '@inertiajs/inertia-vue3'

    export default {
        components: {
            InertiaLink,
        },
        props:{
            bookmarks: {
                type: Array,
            }
        },
    }
</script>

inertia-vue3のバージョン0.5.0以降では<inertia-link>コンポーネントが自動的に読み込まれなくなっているため、このように明示的にインポートして登録する必要があります。