Laravel8のinertia.jsって何者

Laravel8になり認証のパッケージがJetstreamに変わったこともあり、inertia.js、 Livewireと新しい機能を理解する必要があります。

Laravel8ではinertia.jsを選択すればvue.jsで作成されたscaffolding(プロファイル画面など)、Livewireを選択すればPHP + Bladeで作成されたscaffolding(プロファイル画面など)となります。vue.jsの開発者はinertia.js、PHPでバックエンドのLaravelとフロントエンド部分を作成したい開発者はLivewireを利用することになります。

本文書はinertia.jsってどんな技術なの頭の中が??だらけの人を対象にinertia.jsの使い方をシンプルなコードを利用して説明しています。

vue.jsのpropsなどvue.jsの基本知識を持っている人を前提に説明しています。

Laravelのインストール

最初にLaravel8のインストールを行います。Mac環境でのLaravel8のインストールは下記の文書で公開ずみなので参考にしてください。

inertia.jsをすぐに利用するために、laravelコマンドでオプションの–jetを使い、Inertiaの選択を行います。

 % laravel new laravel8 --jet

livewireとinertiaの選択ができますが、ここではinertiaを選択します。

Which Jetstream stack do you prefer?
  [0] livewire
  [1] inertia
 > 1

teamsを利用するかどうか確認がありますが今回は利用しないのでNoを選択します。

 Will your application use teams? (yes/no) [no]:
 > no

laravelのインストール後はJavaScriptのライブラリのインストールとコンパイルを行うため以下のコマンドを実行します。

% cd laravel8 
% npm install && npm run dev

Laravelにアクセスするためにはデータベースが必要になるのでデータベースの準備をしてください。本文書ではSqliteを利用してデータベースを作成しています。

データベス作成後はphp artisan migrateコマンドを実行してください。

 % php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (2.90ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (1.37ms)
Migrating: 2014_10_12_200000_add_two_factor_columns_to_users_table
Migrated:  2014_10_12_200000_add_two_factor_columns_to_users_table (1.30ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (1.55ms)
Migrating: 2019_12_14_000001_create_personal_access_tokens_table
Migrated:  2019_12_14_000001_create_personal_access_tokens_table (2.10ms)
Migrating: 2020_09_09_115305_create_sessions_table
Migrated:  2020_09_09_115305_create_sessions_table (3.09ms)

データベース作成後にphp artisan migrateを実行して以下の画面が表示されるか確認してください。左上にはLoginとRegisterのリンクが表示されます。

ユーザの登録

右上のRegisterのリンクからユーザの登録を行い、Dashboardの画面を表示してください。

このDashboardがどのように表示されるかを確認するためweb.phpファイルを開きます。Inertia\Inertia::renderを確認することができます。

Route::get('/', function () {
    return view('welcome');
});

Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
    return Inertia\Inertia::render('Dashboard');
})->name('dashboard');

render関数で指定しているDashboardはresources¥viewsディレクトリの中ではなくresources¥js¥Pagesの下にあるDashboard.vueファイルです。bladeファイルではなくvueファイルなのもポイントです。

本当にこのファイルか確認するためにDashboardの文字を変更してみてください。bladeファイルではないので更新しても反映されません。vueファイルであるため更新させるためにはJavaScriptのコンパイルが必要なのでnpm run watchコマンドを実行しておく必要があります。

 % npm run watch

実行後にDashboard.vueファイルを下記のように変更するとブラウザにも変更が反映されます。DashboardにInertiaを追加しています。

<template>
    <app-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Dashboard Inertia
            </h2>

DashboardにInertiaが追加されたので、間違いなくweb.phpファイルで指定されているDashboardがこのresources¥js¥PagesにあるDashboard.vueファイルであることがわかります。

ここまでの動作確認でinertiaを利用することはvueを利用してページを作成しているということが理解できたかと思います。

なぜこれまでのバージョンとは異なりvue.jsを利用するのにinertiaが入っているのでしょう？この疑問についてこれから確認していきます。

Userデータの作成

inertiaの動作確認に利用するためにseedingでUserテーブルにダミーデータを登録します。

ダミーデータを入れるためにdatabase¥seeders¥DatabaseSeeder.phpファイルを開いてコメントアウトを外します。Modelの保存場所もLaravel8からデフォルトでapp¥modelsになっているので注意が必要です。

namespace Database\Seeders;

use Illuminate\Database\Seeder;

use App\Models\User;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        User::factory(10)->create();
    }
}

php artisan db:seedコマンドを実行します。

 % php artisan db:seed
Database seeding completed successfully.

データの準備は完了です。データが登録されているかはTablePlusなどのアプリケーションが直接データベースへの接続、php artisan tinkerを利用してください。

inertiaを利用してユーザ一覧を表示

Userコントローラーを作成

php artisan make:controllerコマンドでUser用のコントローラーを作成します。

% php artisan make:controller UserController
Controller created successfully.

ルーティングを追加

web.phpファイルにルーティング/userを追加し、UserControllerを指定します。

Route::resource('/user','App\Http\Controllers\UserController');

User/Index.vueファイルを作成

ルーティングの追加が完了したのでUserController.phpファイルを更新します。Inertia::renderを使ってUser/Indexを指定します。これはDashboardの時に説明しましたがbladeファイルではなくvueファイルでresource/js/Pages以下のUser/Indexを指しています。そのファイルにUser:all()でユーザテーブルのユーザ情報をusersという名前で渡しています。

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\User;

use Inertia\Inertia;

class UserController extends Controller
{

    public function index()
    {

        return Inertia::render('User/Index',['users' => User::all()]);
        
    }

}

resource/js/Pagesの下にはUser/Index.vueファイルは存在しないので作成を行います。Inertiaのrender関数で渡していたusersはvueファイルにpropsとして渡すことができます。

これまでLaravelのvueファイル内でユーザ一覧を取得使用とした場合は大まかに以下のような処理を行う必要がありました。

1. api.phpファイルにルーティングを追加
2. vueファイルのライフサイクルフック内でaxios, fetchのgetメソッドで追加したルーティングにアクセス
3. 取得したデータをvueのデータプロパティに保存

しかし、Inertiaを利用すると上記のような手間をかける必要がなくUserController.phpで取得したユーザ一覧のデータusersをpropsとしてIndex.vueファイルに渡すことができます。

vueファイルでの処理

vueファイル内ではpropsとしてusersを受け取ることができるので追加の設定や処理は必要ありません。

propsで受け取ったusersをtemplateタグで展開することでブラウザに表示させることができます。

<template>
    <div class="p-4">

        <h1 class="text-lg font-bold">ユーザ一覧</h1>
        <ul>
            <li v-for="user in users" :key="user.id">{{ user.name }}</li>
        </ul>

    </div>
</template>
<script>
    export default {
        props:{
            users: {
                type: Array,
            }
        }
    }
</script>

ユーザ一覧を表示するというシンプルな例でしたが、inertiaを利用することでバックエンドからのデータ取得の処理が大幅に楽になったことがわかるのではないでしょうか。

dashboardへのリンク設定

dashboardへのリンクを設定したい場合は、aタグではなくinertia-linkタグを利用します。

<inertia-link href="/dashboard">Dashboard</inertia-link>

inertia-linkを使用するとページをリロードすることなくdashboardの内容が画面に表示されます。