Laravel 11 & React でサービス作成【環境構築編】

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

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

## この記事でやること
Laravel & React の環境構築

## Laravelのインストール
- [公式サイト](https://laravel.com/)のインストールガイドを参考にLaravelをインストールする<br> `PHP`と`Composer`がすでにインストールされていたので、Composer経由で Laravelインストーラーをインストールした
```
composer global require laravel/installer
```

## プロジェクトを作成
- プロジェクトを作成したい場所に移動<br>`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のエントリーポイントを作成 <br>既存の`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をレンダリング<br>`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(),
    ],
});

```

1. 必要なパッケージをインストール
@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 にアクセス
![localhost_8000_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840015/bcb7bd9c-1522-f1f4-51a0-3d341ed3dafb.png)
が表示されればLaravelのセットアップは完了。