はじめに
今回は、LaravelとReactを統合したInertia環境のプロジェクト構築と、Laravel Breeze認証について、勉強したことをまとめました。
Laravel SailのDocker環境は使用しません。
アプリケーションの構成
- バックエンド：Laravel, PHP
- フロントエンド：React, TypeScript（or JavaScript）, Inertia.js, vite（ビルド用）
Laravel環境下にフロントエンド環境を構築し、Inertia.jsを介してデータの送受信を行う
※おことわり※
基本的に学習内容のアウトプットです。
初学者であるため、間違い等あればご指摘いただけますと嬉しいです。
この記事の目的
以下内容のアウトプット
- 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
この記事の内容
- プロジェクトの作成
- Inertiaのインストール（サーバーサイド）
- Inertiaのインストール（クライアントサイド）
- データベースの設定
- Laravel Breeze認証でログイン機能の動作確認
- 参考
1. プロジェクトの作成
１）プロジェクトを配置するディレクトリに移動し、以下コマンドを実行します。
# Laravelプロジェクトを作成
composer create-project --prefer-dist laravel/laravel sample_app
# ^^^^^^^^^^ 任意のプロジェクト名
２）プロジェクトのディレクトリに移動し、以下コマンドを実行します。
# Laravel Breezeパッケージをインストール
composer require laravel/breeze --dev
行っていること：
- composer.jsonに、laravel/breezeパッケージの依存関係を追加
- --dev オプションは、Breezeが開発環境でのみ使用されることを意味する
３）フロントエンドのセットアップのため、以下コマンドを実行します。
# breezeをインストール
php artisan breeze:install react
# ^^^^^ Reactを指定
行っていること：
- インストール時に下記のいずれかを指定する
- デフォルト
- Inertia.js + Vue.js
- Inertia.js + React
- 認証ビュー、ルート、コントローラなどのファイルが追加される
Tips：
TypeScript or JavaScriptの選択はここで行う
上記コマンドをReactなど指定せずに実行すると、コンソールに選択画面が現れます。
-
今回のようにコマンド実行にReactを選択した場合
jsx拡張子（JavaScript）のビューファイルが生成される -
コマンド実行ではなくコンソール上でReactを選択した場合
tsx拡張子（TypeScript）のビューファイルが生成される
2. Inertiaのインストール（サーバーサイド）
１）LaravelでInertia.jsを使用するため、以下コマンドを実行します。
# inertia-laravelパッケージをインストール
composer require inertiajs/inertia-laravel
行っていること：
- composer.jsonに、inertiajs/inertia-laravelパッケージの依存関係を追加
3. Inertiaのインストール（クライアントサイド）
１）ReactアプリケーションにInertia.jsを導入するため、以下コマンドを実行します。
# @inertiajs/inertia-reactパッケージをインストール
npm install @inertiajs/inertia-react
行っていること：
- ReactアプリケーションでInertia.jsを使用するためのコンポーネントとフックが提供される
２）プロジェクトの作成ができたので、起動します。
# 開発サーバーの起動
npm install
npm run dev
# Laravelサーバーの起動
php artisan serve
http://127.0.0.1:8000 にアクセスし、以下画面が開いたら成功です。
4. データベースの設定
１）.envにDB情報を追記します。
// DB情報
DB_CONNECTION=
DB_HOST=
DB_PORT=
DB_DATABASE=
DB_USERNAME=
DB_PASSWORD=
２）SQLエラー防止のため、以下コードを追記します。
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
３）マイグレートを実行し、データベースを作成します。
php artisan migrate
5. Laravel Breeze認証でログイン機能の動作確認
１）右上の Register からユーザー登録を行います。
ユーザー情報は users テーブルに登録されます。
アクセス後のトップページ
新規ユーザー登録画面
ログイン画面
Tips：
Laravel Breezeによって、ログイン等の認証に関する実装を行ってくれます。
（以下公式ページ引用）
Laravel Breezeは、ログイン、ユーザー登録、パスワードリセット、メール確認、パスワード確認など、すべての認証機能を最小かつシンプルにLaravelへ実装したものです。
さらに、Breezeには、ユーザーが名前、電子メールアドレス、パスワードを更新できるシンプルな「プロファイル」ページが含まれています。
web.phpの最後の行で読み込まれている auth.php に認証機能のルーティング情報が記載されています。
どういった処理が行われているか気になる方は、ここから追ってみてください。
// 省略
equire __DIR__.'/auth.php';
6. 参考