【Laravel】+Reactインストール方法：mac

Laravel

2024.12.21 2024.12.19

はじめに

Laravelは、PHPの中でも便利なWebフレームワークの一つです。そしてReactは、モダンなUIの構築に便利なJavaScriptライブラリです。この記事では、Laravel 11とReactをインストールし、認証機能も含めたアプリの構築手順を解説します。デザイン系パッケージを使用するアプローチも追加しています。

システムの前提条件

macOS
PHP 8.2+ (バージョンにより違う可能性があります)
Composer
Node.js (最新バージョン)
NPMまたはYarn

Laravelの新規プロジェクト作成

Laravelのプロジェクトを作成します。

Bash

composer create-project laravel/laravel laravel-react "^11.0"

既存のディレクトリに作成する場合、gitlabなどからクローン後などはクローン後などは一度空にしてから行う

Bash

composer create-project laravel/laravel . "^11.0"

プロジェクトディレクトリに移動します。

Bash

cd laravel-react

Laravelをローカルサーバーで起動して、正常に動作しているか確認します。

Bash

php artisan serve

ブラウザでhttp://127.0.0.1:8000を開き、Laravelのデフォルトページが表示されれば成功です。

Laravel Debugbar追加

Bash

composer require --dev barryvdh/laravel-debugbar

設定ファイルの公開

Bash

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

Reactのインストール

Reactをインストールします。

Bash

composer require laravel/ui
php artisan ui react
npm install
npm run dev

この段階でReactのフロントエンドツールが構築され、resources/jsにReactのファイルが追加されます。

React Developer Toolsの追加

React Developer Toolsは、Reactアプリケーションのデバッグを支援するChrome拡張機能です。以下のリンクからインストールできます。

インストール後、Chromeのデベロッパーツールに「Components」や「Profiler」タブが追加され、Reactコンポーネントの構造や状態を視覚的に確認できます。

React Developer Toolsリンク

Breezeによる認証機能の構築

LaravelのBreezeパッケージを使用すると、認証機能を快速に構築できます。

Breezeのインストール

Bash

composer require laravel/breeze --dev
php artisan breeze:install react
npm install
npm run dev

.envを編集しMySQLを設定する：MySQLの起動が必要

rootやパスワードを変更の際は、MySQLから作成する必要がある。

Bash

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=local_XXXX
DB_USERNAME=root
DB_PASSWORD=

DBなど作成する

Bash

php artisan migrate

ブラウザで認証ページを確認します。

http://127.0.0.1:8000/register

http://127.0.0.1:8000/login

認証関連の画面が正常に表示されれば完了です。

デザイン系パッケージの追加

最近のUIフレームワークを利用すると、デザイン構築が楽になります。下記はTailwind CSSを使用する例です。

Tailwind CSSのインストールinit

Bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

tailwind.config.jsに構成を追加：既にある場合は作業不要

JavaScript

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Tailwind CSSをresources/css/app.cssで有効化：既にある場合は作業不要

@tailwindディレクティブを追加します。

CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

CSSをビルド

Bash

npm run dev

Tailwind CSSが適用されることを確認LaravelのBladeテンプレート内でTailwindのクラスを使用して、デザインが適用されるか確認します。

開発の次のステップ

コンポーネントの分割: Reactコンポーネントを分割して再利用性を高める。
APIとの連携: LaravelのAPIとReactを連携して動的な機能を実装。
テスト: LaravelのPHPUnitとReactのJestを活用してテスト環境を整える。
デプロイ: 本番環境にデプロイし、パフォーマンスを最適化。

これでLaravel 11とReactを組み合わせたアプリケーションの基本的なセットアップが完了です！ Tailwind CSSを使用してデザインも強化されたため、次のステップとしてアプリケーションの機能拡張を進めてみてください。