【環境構築】Laravel11 + React + Typescriptのセットアップ

## はじめに
ご覧いただきありがとうございます！
今回はLaravel11とReactの環境構築の方法についてご紹介いたします。
方法については何パターンかあるかと思いますが、一番手軽に行えるLaravel Sailとviteを使った方法で環境構築を行います。
前提としてWSLのセットアップとDockerのセットアップが完了している必要があります。
まだの方は、WSL環境構築やDocker環境構築などで検索をして、先にセットアップをお願いします。

筆者の環境については下記のとおりです。
```
OS:Windows11
WSL:Ubuntu-24.04
docker:version 26.1.4
node:
npm:
```

## Laravelのセットアップ
Laravel日本語ドキュメントを参考にセットアップを進めて行きます。
https://readouble.com/laravel/11.x/ja/installation.html

1. Laravelプロジェクトの作成
    1. `curl -s "https://laravel.build/example-app?with=mysql" | bash`
    2. example-appの部分に関しては、プロジェクト名になりますので各自任意の名前に変更してください  
2. ターミナルを開き、WSL上の任意のディレクトリで上記コマンドを実行します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533349/5b3e0cdf-3c7a-f0f7-a8eb-b828ac29f891.png)
    1. インストールが完了するまでしばらく待ちます
    2. 途中でパスワードを求められたらWSLのパスワードを入力してください
    3. 下記のような画面が表示されたらインストールは完了です  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533349/16dd9bab-97fa-7053-908e-45c174fe8eb7.png)
3. コンテナの立ち上げ
    1. 画面の指示に従って下記のコマンドを入力してください
    2. `cd アプリ名 && ./vendor/bin/sail up -d`
    3. 最後に-d オプションをつけることでバックグラウンド実行してくれます
4. データベースのマイグレーションと起動確認
    1. 続いてデータベースのテーブルを作成していきます。
    2. `./vendor/bin/sail artisan migrate`
    3. 上記のコマンドをWSL上で入力してエンターキーを押してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533349/7efab793-2e3d-d72d-68b6-0b9373be20bc.png)
    4. このような画面が出れば成功です
    5. `http://localhost`にアクセスをして画面が表示されるか確認しましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533349/5df5fb83-4936-5145-884c-5675948be45a.png)
5. エイリアスの設定
    1. 先ほどから頻繁に使う`./vendor/bin/sail`をエイリアスに登録してみましょう
    2. `alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'`
    3. 上記コマンドをWSL上で入力してください
    4. `sail php -v`とコマンドを入力してPHPのバージョンが出力されれば成功です

以上でLaravelの環境構築は終了です。お疲れさまでした！続いてReactの環境構築を行っていきましょう！
    

## Reactのセットアップ
それでは続いてLaravelプロジェクトの中にReactの環境を構築していきます。

1. モジュールのインストール
    1. `sail npm install`
    2. `sail npm install -D react react-dom @types/react @types/react-dom`
    3. `sail npm install -D @vitejs/plugin-react`
    4. 上記のコマンドを実行してください
2. Typescriptのインストール
    1. `sail npm install -D typescript`
    2. `sail npx tsc --init --jsx react-jsx`
    3. 上記コマンドを実行してください
3. Viteの設定
    1. Laravelプロジェクト配下にある`vite.config.js`ファイルを開きます
    2. ファイルを以下のように変更してください
```
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'; //追加する

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/ts/app.tsx'], // ts/app.tsxに変更 ※tsディレクトリは後ほど作成する
            refresh: true,
        }),
        react(), //追加する
    ],
});
```

4. Viewファイルの修正
    1. プロジェクトディレクトリの`resources/views/welcome.blade.php`を削除する
    2. `resources/views/index.blade.php`ファイルを新しく作成する

```
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>

    @viteReactRefresh
    @vite(['resources/css/app.css', 'resources/ts/app.tsx'])
    
</head>
<body>
<div id="app"></div>
</body>
</html>
```

5. app.tsxを作成
    1. プロジェクトディレクトリのresourcesディレクトリにtsフォルダを作成
    2. tsディレクトリに`app.tsx`ファイルを作成
    3. 中身を下記のように記述してください

```
import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { Index } from './components';

const container = document.getElementById('app');
const root = createRoot(container!);

root.render(
      <StrictMode>
            <Index />
      </StrictMode>
);
```

6. コンポーネントの作成
    1. 続いて実際に表示される画面のコンポーネントを作成していきます
    2. tsディレクトリにcomponentsディレクトリを新たに作成し「index.tsx」ファイルを作成しましょう
    3. index.tsxファイルを下記のように記述してください

```
import React from 'react';

export const Index = () => {
    return (
        <div>
            <h1>環境構築 成功！！！</h1>
        </div>
    );
};
```

7. Laravelのルーティングの編集
    1. Laravelプロジェクト配下にあるroutesディレクトリ内の「web.php」を編集していきます

```
<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('index');  // welcomからindexへ変更
});
```

##  動作確認
1. 最後に作成したプロジェクトが動作するか確認してみましょう
2. ターミナルを開き、プロジェクトディレクトリ上で`sail npm run dev`と入力してみましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533349/476a1cac-dce6-c874-9eab-2908b5711960.png)
3. このような画面が表示されれば環境構築は完了です！おつかれさまでした。

## 最後に
以上でLaravelプロジェクト内にReactをインストールする方法の解説は終了です。
最後までご覧いただきありがとうございました。このあとは、作りたいアプリケーションに合わせてライブラリのインストールを行ったり、更にコンポーネントを作成して自由なアプリケーションを作成してみてください！