最終的に作るもの

laravelとreactを使用したwebサービス
amazonの欲しいものリストを取得して商品ごとにメモを作成

サービスでやりたいこと

googleアカウントもしくはメールアドレス&パスワードでユーザー登録をする。
amazonアカウントと紐付けして欲しいものリストを取得（複数のリストの取得可能）
欲しいものリストを指定して取得可能（リンクから取得）

この記事でやること

Laravel & React の環境構築

Laravelのインストール

公式サイトのインストールガイドを参考にLaravelをインストールする
PHPとComposerがすでにインストールされていたので、Composer経由で Laravelインストーラーをインストールした

composer global require laravel/installer

プロジェクトを作成

プロジェクトを作成したい場所に移動
cd xxxxで作成場所に移動
laravel new xxxxでプロジェクトを作成
「スターターキットをインストールするかどうか」を尋ねられるのでNo starter kitを選択

 ┌ Would you like to install a starter kit?────────────────────┐
 │ › ● No starter kit                                          │
 │   ○ Laravel Breeze                                          │
 │   ○ Laravel Jetstream                                       │

選択肢の説明

No starter kit（デフォルト）

認証機能やUIは追加されません。

最小限のLaravelプロジェクトがセットアップされます。

自分で認証機能やフロントエンドを追加したい場合に適しています。

Laravel Breeze

簡単な認証機能（ログイン、ログアウト、登録など）が含まれます。

Tailwind CSSがデフォルトで組み込まれた軽量なスターターキット。

基本的な認証機能をすぐに使いたい場合に適しています。

Laravel Jetstream

高度な認証機能（チーム管理、APIトークン管理など）を含みます。

Tailwind CSSに加え、LivewireまたはInertia.jsを使用する選択肢があります。

複雑な認証やチーム管理が必要な場合に適しています。

テストフレームワークとしてPestまたはPHPUnitを選択するか聞かれるのでPestを選択

Which testing framework do you prefer? ──────────────────────┐
 │ › ● Pest                                                  │
 │   ○ PHPUnit                                               │

選択肢の特徴

Pest

モダンで簡潔な記法を特徴とするテストフレームワーク。

PHPUnitをベースに構築されているため、PHPUnitの拡張機能や既存のスキルを活用可能。

テストコードが読みやすく、学習曲線が緩やか。

初心者にとっても取り組みやすい。

PHPUnit

Laravelにデフォルトで含まれている、PHPの標準的なテストフレームワーク。

非常に柔軟で、PHPの大規模なプロジェクトでも広く使用されています。

Pestほどシンプルではないが、Laravelの公式ドキュメントやリソースが豊富。

データベースは何を使うか聞かれるのでMariaDBを選択

 ┌ Which database will your application use? ───────────────────┐
 │ › ● SQLite                                                   │
 │   ○ MySQL                                                    │
 │   ○ MariaDB                                                  │
 │   ○ PostgreSQL                                               │
 │   ○ SQL Server (Missing PDO extension)                       │

「デフォルトのデータベースマイグレーションを実行するか」聞かれるのでYesを選択

 ┌ Default database updated. Would you like to run the default database migrations? ┐
 │ ● Yes / ○ No

選択肢の説明

Yes
Laravelが提供する初期のデータベース構造（users、password_resets などのテーブル）をMariaDBに作成します。
すぐにユーザー登録や認証機能を追加する準備が整います。
初期状態でマイグレーションを実行することをおすすめします。

No
初期のテーブルを作成しません。手動でマイグレーションを実行したり、後でカスタムテーブルを作成したい場合に選択します。
必要になるまでマイグレーションを保留にしたい場合に有効です。

これでLaravelの初期状態のデータベース構造（users テーブルなど）がMariaDBに作成されました。

Reactのセットアップ

ReactをLaravelプロジェクトのルートディレクトリにインストールする

npm install react react-dom

React用のBabelプリセットをインストール

npm install --save-dev @babel/preset-react

Reactのエントリーポイントを作成
既存のresources/js/app.jsを削除してapp.jsxを作成、以下を記述する。

import React from 'react';
import ReactDOM from 'react-dom/client';

const App = () => {
    return <h1>Hello, React in Laravel!</h1>;
};

ReactDOM.createRoot(document.getElementById('app')).render(<App />);

BladeファイルでReactをレンダリング
resources/views/welcome.blade.phpに以下を追加

<head>
// 省略
    @viteReactRefresh // これがないとapp.jsxgホットリロードされない
    @vite(['resources/css/app.css', 'resources/js/app.jsx'])
</head>

<div id="app"></div>
@vite('resources/js/app.jsx')

Laravelのvite.config.jsにReactプラグインを追加

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.jsx'],
            refresh: true,
        }),
        react(),
    ],
});

必要なパッケージをインストール
@vitejs/plugin-react をインストールします。

npm install @vitejs/plugin-react
npm install vite@latest @vitejs/plugin-react@latest --save-dev

開発サーバーの起動
Viteの開発サーバーを起動してReactをレンダリングできるか確認

npm run dev

出力はこんな感じ

> dev
> vite

  VITE v5.4.11  ready in 423 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

  LARAVEL v11.34.2  plugin v1.1.1

  ➜  APP_URL: http://localhost

サーバーを起動

php artisan serve

DBとの接続エラーが発生
DBが存在するか確認

mysql --version

以下が表示されなければ作成が必要

mysql  Ver 15.1 Distrib 10.6.14-MariaDB, for osx10.16 (x86_64) using readline 5.1

作成する場合

brew install mariadb

起動を確認

brew services list

mariadb の状態が started でなければ、以下のコマンドで起動します。

brew services start mariadb

MariaDBにログイン

sudo mysql -u root

// 現在存在するデータベースを確認
SHOW DATABASES;

// 既存のDBを選択する場合
USE your_database_name;

// 終了コマンド
exit;

パスワードはPCのパスワードを入力

Laravel用のデータベースを作成

MariaDBにログインした状態で以下実行（laravel_dbという名前のデータベースが作成されます）

CREATE DATABASE laravel_db;

ユーザーの作成

CREATE USER 'user_name'@'localhost' IDENTIFIED BY 'your_password';
// 権限の付与(すべての権限付与)
GRANT ALL PRIVILEGES ON laravel_db.* TO 'user_name'@'localhost';
// 権限の適用(権限情報を再読み込み)
FLUSH PRIVILEGES;

.envファイルを更新

DB_CONNECTION=mariadb
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=amazon_memo_project
DB_USERNAME=develop
DB_PASSWORD=develop

Laravelのマイグレーション実行(テーブルを作成)

php artisan migrate

Laravelの開発サーバーを起動

php artisan serve

Laravel開発サーバーの役割
Laravelのバックエンド処理を担当します。
- ルーティング、コントローラー、データベース操作（Eloquent ORMなど）。
- Bladeテンプレートのレンダリング。

Viteのビルドを実行

npm run build

Viteの開発サーバーを起動

npm run dev

Viteの開発サーバーの役割
- Reactのフロントエンドアセット（JavaScriptやCSS）を開発環境でホットリロード（自動更新）しながら提供します。
- Reactコンポーネントやスタイル変更がリアルタイムで反映される。
  ※ 本番環境ではnpm run buildでで生成されたアセットを使用するので起動の必要なし

ブラウザでhttp://localhost:8000 にアクセス

が表示されればLaravelのセットアップは完了。