【Laravel】Breeze + React + TypeScriptインストール方法

Laravel

2024.12.22 2024.12.21

はじめに

LaravelはPHPフレームワークの中でも人気が高く、フロントエンドとの連携が簡単に行えます。本記事では、Laravel 11にBreezeを導入し、ReactとTypeScriptを使ったモダンな開発環境をローカルで構築する手順を紹介します。

事前に以下のツールをインストールしておきましょう。

また、Laravelの開発環境としてLaravel Sailを利用することもおすすめです。

まず、Composerを使って新しいLaravel 11プロジェクトを作成します。

Bash

composer create-project laravel/laravel laravel-react-ts

Bash

cd laravel-react-ts

Laravel Breezeは、認証を簡単にセットアップできる軽量なスターターパックです。

Bash

composer require laravel/breeze --dev

インストールが完了したら、BreezeをReactとTypeScriptオプション付きでセットアップします。

Bash

php artisan breeze:install react --typescript

以下のコマンドを実行して、必要なnpmパッケージをインストールします。

Bash

npm install

コマンドを実行することで、フロントエンドの開発サーバーが起動します。

Bash

npm run dev

Bash

composer require --dev barryvdh/laravel-debugbar

設定ファイルの公開

Bash

php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"

.envファイルを編集して、データベースの接続情報を設定します。

Bash

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel_db DB_USERNAME=root
DB_PASSWORD=your_password

設定を反映するために、以下のコマンドを実行してデータベースをマイグレーションします。

Bash

php artisan migrate

以下のコマンドでLaravelの開発サーバーを起動します。

Bash

php artisan serve

ブラウザでhttp://localhost:8000を開き、Laravelのトップページが表示されることを確認します。

Breezeの初期セットアップにより、ログイン・登録画面がReactとTypeScriptで構築されています。これらの画面が正しく動作しているか確認しましょう。

依存関係の不整合が原因の場合があります。以下のコマンドで解決できる場合があります。

Bash

npm install --legacy-peer-deps

この記事では、Laravel 11、Breeze、React、TypeScriptを使ったモダンな開発環境を構築する手順を紹介しました。この環境を基に、さらなるカスタマイズやプロジェクトの開発を楽しんでください！