0️⃣

Inertiaを使ったLaravel 10 (vite) + Reactのベストチュートリアル

2023/02/25に公開

Docker

概要

本記事では、Inertia（イナーシャ）を使ったLaravelとReactの開発チュートリアルを記載しています。
LaravelにReactやVueを導入する時に発生するデメリットは、データのハイドレートと認証などでアプリケーションが複雑になったり、フロントとバックエンドで両方のリポジトリにまたがって調整する必要が起きることなどがあります。
しかし、Inertiaを使用することで、これらの問題が解決され、フロントとバックエンドの連携がシンプルになり、またリポジトリを分けることなく開発していくことができます。

Inertia

LaravelのバックエンドからReactやVueコンポーネントの単一ファイルをレンダーできるようにする小さなライブラリー。

幸運にも、Laravelは両方(VueやReact)の世界の最良を提供しています。Inertiaは、LaravelアプリケーションとモダンなVueまたはReactフロントエンドの間のギャップを埋めるもので、VueやReactを使って本格的でモダンなフロントエンドを構築しながら、ルーティング、データハイドレート、認証にLaravelルートとコントローラを活用できます。すべて単一のコードリポジトリ内で行えます。このアプローチではどちらのツールの能力も損なうことなく、LaravelとVue／Reactの両能力を享受することができます。

Laravel 10.x スターターキットから引用

バージョン情報

Laravel 10.0.0
手元の作業PC: Apple M1 Pro
Docker: 20.10.21
- イメージ: php:8.1-apache
- イメージ: mariadb:10.3
- イメージ: phpmyadmin:latest
- イメージ: mailhog/mailhog:latest
Laravel: 10.1.3
React: 18.2.0
Inertia.js v1.0
Docker-compose: 2.13.0

導入

前提として、Laravelのdocker環境作成で初期環境はできている前提から始めます。また、ドキュメントルートをデフォルトのpublicではなく、htmlで運用する書き方で記載しております。

Laravel 10.x スターターキットに基づいて、記載する。

手順1. Breezeをインストール

composer require laravel/breeze --dev

手順2. 認証機能をアプリケーションへリソース公開

php artisan breeze:install

ログ

  Which stack would you like to install?
  blade ......................................................................................... 0  
  react ......................................................................................... 1  
  vue ........................................................................................... 2  
  api ........................................................................................... 3  
❯ react

  Would you like to install dark mode support? (yes/no) [no]
❯ yes

  Would you like to install Inertia SSR support? (yes/no) [no]
❯ yes

  Would you prefer Pest tests instead of PHPUnit? (yes/no) [no]
❯ no

./composer.json has been updated
Running composer update inertiajs/inertia-laravel laravel/sanctum tightenco/ziggy
Loading composer repositories with package information
Info from https://repo.packagist.org: #StandWithUkraine
Updating dependencies
Lock file operations: 2 installs, 0 updates, 0 removals
  - Locking inertiajs/inertia-laravel (v0.6.9)
  - Locking tightenco/ziggy (v1.5.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 2 installs, 0 updates, 0 removals
  - Downloading inertiajs/inertia-laravel (v0.6.9)
  - Downloading tightenco/ziggy (v1.5.0)
 0/2 [>---------------------------]   0%
 1/2 [==============>-------------]  50%
 2/2 [============================] 100%
  - Installing inertiajs/inertia-laravel (v0.6.9): Extracting archive
  - Installing tightenco/ziggy (v1.5.0): Extracting archive
 0/2 [>---------------------------]   0%
 1/2 [==============>-------------]  50%
 2/2 [============================] 100%
1 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.  

  inertiajs/inertia-laravel ............................................. DONE
  laravel/breeze ........................................................ DONE
  laravel/sail .......................................................... DONE
  laravel/sanctum ....................................................... DONE
  laravel/tinker ........................................................ DONE
  nesbot/carbon ......................................................... DONE
  nunomaduro/collision .................................................. DONE
  nunomaduro/termwind ................................................... DONE
  spatie/laravel-ignition ............................................... DONE
  tightenco/ziggy ....................................................... DONE

   INFO  No publishable resources for tag [laravel-assets].  

Xdebug: [Step Debug] Could not connect to debugging client. Tried: host.docker.internal:9003 (through xdebug.client_host/xdebug.client_port).
No security vulnerability advisories found

   INFO  Installing and building Node dependencies.  


added 159 packages, and audited 160 packages in 26s

27 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> build
> vite build && vite build --ssr

vite v4.1.4 building for production...
✓ 211 modules transformed.
public/build/manifest.json                                      6.75 kB
public/build/assets/app-77baf6bf.css                           33.58 kB │ gzip:  6.14 kB
public/build/assets/InputLabel-29233f0f.js                      0.22 kB │ gzip:  0.19 kB
public/build/assets/GuestLayout-83b20f48.js                     0.52 kB │ gzip:  0.34 kB
public/build/assets/PrimaryButton-505a02fa.js                   0.63 kB │ gzip:  0.37 kB
public/build/assets/TextInput-c896fe85.js                       0.66 kB │ gzip:  0.39 kB
public/build/assets/Dashboard-e3e7c767.js                       0.70 kB │ gzip:  0.40 kB
public/build/assets/ForgotPassword-18836e7a.js                  1.16 kB │ gzip:  0.66 kB
public/build/assets/Edit-f99c7f87.js                            1.16 kB │ gzip:  0.52 kB
public/build/assets/ConfirmPassword-841ae81e.js                 1.17 kB │ gzip:  0.65 kB
public/build/assets/VerifyEmail-7632b0e4.js                     1.33 kB │ gzip:  0.71 kB
public/build/assets/ResetPassword-bce8b277.js                   1.65 kB │ gzip:  0.69 kB
public/build/assets/Login-4bb8f6b9.js                           2.22 kB │ gzip:  0.98 kB
public/build/assets/Register-1807164c.js                        2.24 kB │ gzip:  0.86 kB
public/build/assets/UpdatePasswordForm-c5915938.js              2.28 kB │ gzip:  0.87 kB
public/build/assets/UpdateProfileInformationForm-0ddd08c7.js    2.34 kB │ gzip:  1.02 kB
public/build/assets/ApplicationLogo-3229ca07.js                 3.11 kB │ gzip:  1.32 kB
public/build/assets/AuthenticatedLayout-ae647691.js             6.49 kB │ gzip:  2.01 kB
public/build/assets/transition-bd208843.js                     12.85 kB │ gzip:  5.04 kB
public/build/assets/Welcome-0dbe7f1c.js                        15.59 kB │ gzip:  4.42 kB
public/build/assets/DeleteUserForm-cc546f05.js                 24.80 kB │ gzip:  9.06 kB
public/build/assets/app-0f051617.js                           247.63 kB │ gzip: 82.11 kB
vite v4.1.4 building SSR bundle for production...
✓ 30 modules transformed.
bootstrap/ssr/assets/InputLabel-ea80803f.mjs                     0.32 kB
bootstrap/ssr/assets/GuestLayout-3c06d5ac.mjs                    0.74 kB
bootstrap/ssr/assets/PrimaryButton-e0cba7f6.mjs                  0.76 kB
bootstrap/ssr/assets/TextInput-2ecbad64.mjs                      1.02 kB
bootstrap/ssr/assets/Dashboard-ef0c6e0a.mjs                      1.15 kB
bootstrap/ssr/assets/Edit-1909b5bb.mjs                           1.93 kB
bootstrap/ssr/assets/VerifyEmail-4b19d4ee.mjs                    1.95 kB
bootstrap/ssr/assets/ForgotPassword-3cedf250.mjs                 1.97 kB
bootstrap/ssr/assets/ConfirmPassword-117f3911.mjs                2.12 kB
bootstrap/ssr/assets/ApplicationLogo-f5319d5c.mjs                3.21 kB
bootstrap/ssr/assets/ResetPassword-204c23c1.mjs                  3.21 kB
bootstrap/ssr/assets/Login-c7e8572c.mjs                          3.91 kB
bootstrap/ssr/assets/UpdateProfileInformationForm-dc02a45d.mjs   4.10 kB
bootstrap/ssr/assets/UpdatePasswordForm-72417c63.mjs             4.26 kB
bootstrap/ssr/assets/Register-0974a917.mjs                       4.33 kB
bootstrap/ssr/assets/DeleteUserForm-47ef68f1.mjs                 6.68 kB
bootstrap/ssr/assets/AuthenticatedLayout-a06873bd.mjs           10.42 kB
bootstrap/ssr/assets/Welcome-2d89121f.mjs                       23.48 kB
bootstrap/ssr/ssr.mjs                                           26.17 kB

   INFO  Breeze scaffolding installed successfully.

php artisan migrate
npm install

手順3. viteの設定を更新

目的は以下の２つ

npm run buildの出力先をデフォルトのpublic/buildからhtml/buildに変更するために、publicDirectoryの設定
vite dev serverからの受信を拒否されないようにhost,hmrの設定

www/vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    server: {
        host: true, // --hostオプションでも同じ設定が可能
        hmr: {
            host: 'localhost',
        },
    }, 
    plugins: [
        laravel({
            publicDirectory: 'html', // public(デフォルト) から htmlに変更
            input: 'resources/js/app.jsx',
            ssr: 'resources/js/ssr.jsx',
            refresh: true,
        }),
        react(),
    ],
});

docker-compose.ymlにて、5173のポートフォワード設定も必要です。

docker-compose.yml

version: "3"
services:
  app:
    build:
      context: "docker/app/"
    ports:
      - 80:80
      - 8000:80
      - 5173:5173 # viteで使用するポートをフォワード

(npm run build)
npm run dev

Webブラウザでアプリケーションの/loginまたは/registerのURLにアクセスしてください。Breezeのすべてのルートは、`routes/auth.php'ファイル内に定義しています。

localhost/login
localhost/register

画面が確認できると思います。

手順4. ログイン機能の準備をする

シーダを生成

php artisan make:seeder UserSeeder

上記コマンドで、database/seeders/UserSeeder.phpが生成されます。

artisanコマンドでシーダを実行するリストにUserSeederを追加

www/database/seeders/DatabaseSeeder.phpを編集します。
$this->call(UserSeeder::class);を一行追加するのみです。

DatabaseSeeder.php

<?php

namespace Database\Seeders;

// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

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

        // \App\Models\User::factory()->create([
        //     'name' => 'Test User',
        //     'email' => 'test@example.com',
        // ]);
        $this->call(UserSeeder::class); // 追加
    }
}

UserSeederクラスを編集

database/seeders/UserSeeder.php

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

use App\Models\User;

class UserSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        // 50件レコード作成
        User::factory(50)
        ->create();
    }
}

モデルファクトリの利用

www/database/factories/UserFactory.php はすでに作られている状態です。
今回はこのまま利用しましょう。
パスワードはpasswordで作られていることがわかります。

シードを投入

php artisan migrate:fresh --seed　を実行します。

ログ

# php artisan migrate:fresh --seed

  Dropping all tables .................................................. 71ms DONE

   INFO  Preparing database.  

  Creating migration table ............................................. 14ms DONE

   INFO  Running migrations.  

  2014_10_12_000000_create_users_table ................................. 21ms DONE
  2014_10_12_100000_create_password_reset_tokens_table ................. 26ms DONE
  2019_08_19_000000_create_failed_jobs_table ........................... 20ms DONE
  2019_12_14_000001_create_personal_access_tokens_table ................ 25ms DONE

   INFO  Seeding database.  

  Database\Seeders\UserSeeder ............................................ RUNNING  
  Database\Seeders\UserSeeder ..................................... 159.34 ms DONE

http://localhost:8080 でPhpMyAdminから50件ユーザーが作られていることが確認できる。

ログインしてみる

npm run dev実行して、http://localhost/login にアクセスし、任意のユーザーのメール、パスワードでログインする。

ログイン成功したら、ダッシュボードに遷移することが確認できる。

ダッシュボード (http://localhost/dashboard)
プロフィール (http://localhost/profile)
ログアウト実行

ちなみに、テンプレートは、resources/js/Pagesの中にはいっています。
ReactやInertiaはこの中で使ってください。

このように、とても面倒なフロントとバックエンドの連携の基盤がしっかりできている状態で、アプリケーションが構築されることがわかります。

まとめ

今回は、Laravel 10.x スターターキットをベースに、Laravel + Reactを用いた公式推奨の実装方法を紹介いたしました。
コントローラやルーティングファイルを見ればわかると思いますが、JSXの呼び出し方や、ルーティング、コンポーネントのレンダリングもびっくりするくらいシンプルで、inertiaはReactやVueを採用する場合は絶対に採用したいライブラリでした。
加えて、導入方法も非常にシンプルで、手軽に初期設定されている状態で導入できる点も最高でした。
「npmの競合でエラー出るじゃん！」とか、「導入までの手順長すぎ...」とか、「ネットの記事通りにやったのに、こんなエラー聞いていない...」みたいな苦痛に悩まされずに手軽に環境が出来上がるので、非常にお勧めできる実装方法です。