【Laravel + React + Inertia + Vite】Inertia.jsを使ったSPAの環境構築～Laravel Breeze認証の動作確認

# はじめに
今回は、LaravelとReactを統合したInertia環境のプロジェクト構築と、Laravel Breeze認証について、勉強したことをまとめました。

Laravel SailのDocker環境は使用しません。

**アプリケーションの構成** 
- バックエンド：Laravel, PHP
- フロントエンド：React, TypeScript（or JavaScript）, Inertia.js, vite（ビルド用）
:::note
Laravel環境下にフロントエンド環境を構築し、Inertia.jsを介してデータの送受信を行う
:::

![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740809/5db325f0-aa0f-1fe6-56d5-e3cb9847761a.png)

※おことわり※
基本的に学習内容のアウトプットです。
初学者であるため、間違い等あればご指摘いただけますと嬉しいです。

# この記事の目的
以下内容のアウトプット
- Laravel Breezeのインストールと動作確認
- Inertia環境のプロジェクト構築
- LaravelとReactの統合

# 開発環境
- PHP 8.1.10
- Laravel Framework 10.9.0
- React 18.2.0
- TypeScript 5.0.4
- inertiajs/inertia-react 0.8.1
- inertiajs/react 1.0.6
- node 18.15.0
- vite 4.3.3
- npm 9.5.0
- composer 2.2.21


# この記事の内容
1. プロジェクトの作成
2. Inertiaのインストール（サーバーサイド）
3. Inertiaのインストール（クライアントサイド）
4. データベースの設定
5. Laravel Breeze認証でログイン機能の動作確認
6. 参考

# 1. プロジェクトの作成
１）プロジェクトを配置するディレクトリに移動し、以下コマンドを実行します。
    
```shell
# Laravelプロジェクトを作成
composer create-project --prefer-dist laravel/laravel sample_app
#                                                     ^^^^^^^^^^ 任意のプロジェクト名
```

２）プロジェクトのディレクトリに移動し、以下コマンドを実行します。

```shell
# Laravel Breezeパッケージをインストール
composer require laravel/breeze --dev
```

**行っていること：**
- composer.jsonに、laravel/breezeパッケージの依存関係を追加
- --dev オプションは、Breezeが開発環境でのみ使用されることを意味する

３）フロントエンドのセットアップのため、以下コマンドを実行します。

```shell
# breezeをインストール
php artisan breeze:install react
#                          ^^^^^ Reactを指定
```

**行っていること：**
- インストール時に下記のいずれかを指定する
    - デフォルト
    - Inertia.js + Vue.js
    - Inertia.js + React
- 認証ビュー、ルート、コントローラなどのファイルが追加される

**Tips：**

:::note
TypeScript or JavaScriptの選択はここで行う
:::

上記コマンドをReactなど指定せずに実行すると、コンソールに選択画面が現れます。
  - 今回のようにコマンド実行にReactを選択した場合
  `jsx` 拡張子（JavaScript）のビューファイルが生成される

   - コマンド実行ではなくコンソール上でReactを選択した場合
   `tsx` 拡張子（TypeScript）のビューファイルが生成される

# 2. Inertiaのインストール（サーバーサイド）
１）LaravelでInertia.jsを使用するため、以下コマンドを実行します。

```shell
# inertia-laravelパッケージをインストール
composer require inertiajs/inertia-laravel
```

**行っていること：**
- composer.jsonに、inertiajs/inertia-laravelパッケージの依存関係を追加

# 3. Inertiaのインストール（クライアントサイド）
１）ReactアプリケーションにInertia.jsを導入するため、以下コマンドを実行します。

```shell
# @inertiajs/inertia-reactパッケージをインストール
npm install @inertiajs/inertia-react
```

**行っていること：**
- ReactアプリケーションでInertia.jsを使用するためのコンポーネントとフックが提供される

２）プロジェクトの作成ができたので、起動します。
```shell
# 開発サーバーの起動
npm install
npm run dev

# Laravelサーバーの起動
php artisan serve
```

http://127.0.0.1:8000 にアクセスし、以下画面が開いたら成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740809/a9c1cfa2-51e1-13d9-99f6-dedb1996f3a3.png)

# 4. データベースの設定
１）.envにDB情報を追記します。
```php
// DB情報
DB_CONNECTION=
DB_HOST=
DB_PORT=
DB_DATABASE=
DB_USERNAME=
DB_PASSWORD=
```

２）SQLエラー防止のため、以下コードを追記します。

```php:app/Providers/AppServiceProvider.php

public function boot(): void
{
    \Illuminate\Support\Facades\Schema::defaultStringLength(191);  // この行を追加
}
```
**Tips：**
上記のコードを追加しないと、下記エラーが発生します。
詳細は、参考URLを確認ください。
- エラー内容： `QLSTATE[42000] Specified key was too long`
- 参考：https://akamist.com/blog/archives/982


３）マイグレートを実行し、データベースを作成します。
```shell
php artisan migrate
```

# 5. Laravel Breeze認証でログイン機能の動作確認
１）右上の `Register` からユーザー登録を行います。
　　ユーザー情報は `users` テーブルに登録されます。

**アクセス後のトップページ**
![トップページ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740809/54b482f8-de9f-806c-b6ff-ba988ba45207.png)

**新規ユーザー登録画面**
![新規登録.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740809/bb30ed23-15e3-e40d-374d-1023d5d395fe.png)

**ログイン画面**
![ログイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740809/c23255d1-5a93-0ae7-00ff-a7e9325b1375.png)

**Tips：**
Laravel Breezeによって、ログイン等の認証に関する実装を行ってくれます。
（以下公式ページ引用）

>Laravel Breezeは、ログイン、ユーザー登録、パスワードリセット、メール確認、パスワード確認など、すべての認証機能を最小かつシンプルにLaravelへ実装したものです。
>さらに、Breezeには、ユーザーが名前、電子メールアドレス、パスワードを更新できるシンプルな「プロファイル」ページが含まれています。

web.phpの最後の行で読み込まれている `auth.php` に認証機能のルーティング情報が記載されています。
どういった処理が行われているか気になる方は、ここから追ってみてください。

```php:web.php
// 省略
equire __DIR__.'/auth.php'; 
```

# 6. 参考
https://biz.addisteria.com/laravel_inertia_install2/

https://blog.capilano-fw.com/?p=10845

**※ Laravel11の場合**

https://macocci7.net/blog/2024/09/30/%E3%80%90laravel11-inertia-vue3%E3%80%91%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89/