Windows10でLaravel ×Vite×React×TypeScript×WSL2の環境構築（初学者向け）

# 動作環境
+ Windows10 Home
+ VSCode 1.75.1
+ Docker Desktop 4.16.3 (96739) 
+ Ubuntu 22.04.1 LTS（WSL2にインストール）
+ Laravel Framework 10.1.3
+ PHP 8.2.3
+ React 18.2.0
+ TypeScript 4.9.5
+ Vite 4.1.4
※VSCodeはインストールされている前提で進めます。

# 環境構築の流れ
+ [手順1. WSL2のインストール](#手順1-wsl2のインストール) 
+ [手順2. Ubuntuの設定](#手順2-ubuntuの設定) 
+ [手順3. Docker Desktopのインストール](#手順3-docker-desktopのインストール) 
+ [手順4. Laravelのインストール](#手順4-laravelのインストール) 
+ [手順5. sailコマンドのエイリアス設定](#手順5-sailコマンドのエイリアス設定) 
+ [手順6. Reactのインストール](#手順6-reactのインストール) 
+ [手順7. TypeScriptのインストール](#手順7-typescriptのインストール) 
+ [手順8. Ubuntu上のソースをVSCode編集する](#手順8-ubuntu上のソースをvscode編集する) 
+ [手順9. viteの設定](#手順9-viteの設定) 
+ [手順10. index.blade.phpの作成](#手順10-indexbladephpの作成) 
+ [手順11. Index.tsxの作成](#手順11-indextsxの作成) 
+ [手順12. web.phpの設定](#手順12-webphpの設定) 
※今回は特にLaravelのスターターキットなどはインストールしません。

# 対象となる方
+ 取り敢えず爆速でLaravel×React×TypeScriptの開発環境を作りたい方
+ 環境構築？面倒！！早くソース書きたい！！という方

# 手順1. WSL2のインストール
1.　Windows上で`Windows`+`x`キーを押下後に、`a`キーを押下し、PowerShellを起動します。
2.　PowerShellにて、下記コマンドを実行します。
```script:PowerShell
wsl --install
```
下記画像のようになればインストール完了です。
3.　pcを再起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/f913cd04-6e22-d570-8928-85b33ce6a743.png)
4.　再起動後`Linux 用 Windows サブシステム`と`仮想マシン プラットフォーム`が有効になっていることを確認しましょう。
![スクリーンショット 2023-02-23 141347.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/f13e2158-d7ec-107f-b4ec-32da99344bd2.png)

# 手順2. Ubuntuの設定

1.　Windows上で`Windows`+`s`キーを押下してください。
2.　検索項目に`Ubuntu`と入力し、Ubuntuを起動してください。
3.　**ユーザ名**と**パスワード**の設定を求められるので、入力してください。
　　　※パスワードは入力しても表示されないので的確に入力
4.　下記画像のようになれば正しく設定されています。

:::note warn
注意！
この時入力した、ユーザ名とパスワードは後の工程で使いますので、メモなどお願いします。
:::
![スクリーンショット 2023-02-23 143357.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/3670c64a-f76c-1ba3-a591-fa00afbde5c3.png)
5.　WSL2が有効になっているかを確認しましょう！
6.　PowerShellで下記コマンドを叩いてください。
```script:PowerShell
wsl -l -v
```
下記画像のように表示されれば正しく設定できています。
![スクリーンショット 2023-02-23 144223.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/f04f2751-10fb-ff4e-2da1-ff3d9a48b87b.png)
# 手順3. Docker Desktopのインストール
1.　下記URLにて、Windows用のDocker Desktopをインストーラーの指示に従ってインストールしてください。
https://docs.docker.com/desktop/install/windows-install/

2.　インストールが完了したら「Close」を押下してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/496bbd86-0892-f8d9-bb92-9c67e83e03e3.png)


3.　Docker Desktopを起動すると、規約画面が表示されるので、問題なければ「Accept」を押下してください。
![スクリーンショット 2023-02-23 145032.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/6f967e1f-b19e-28e9-7a82-48641fe59cf9.png)

4.　`Settings` > `Resource` > `WSL Integration`を開いてください。
5.　下記画像のように設定し「Apply & restart」を押下してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/66c91f85-550f-e5a7-f47c-a0aa5b72dfec.png)

6.　エクスプローラーを開き`\\wsl$\`を入力してください。
7.　`docker-desktop`、`docker-desktop-data`、`Ubuntu`が見れることを確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/00f676c1-08a2-b30d-35d9-30672fe961d9.png)

# 手順4. Laravelのインストール
1.　エクスプローラーを開き`\\wsl$\`を入力してください。
2.　`Ubuntu`配下の`home`ディレクトリを開きます。
　　　※[手順2. Ubuntuの設定](#手順2-ubuntuの設定) で設定したユーザ名のディレクトリが作成されているかと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/1383a248-955e-2b31-53d5-d509008626aa.png)

3.　ユーザ名のディレクトリ内に移動し、任意のディレクトリを作成します。
　※今回は「Laravel」という名前で作成してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/1295c704-350d-b080-b2fd-609e8f774970.png)


4.　Ubuntuを起動し、先ほど作成した「Laravel」ディレクトリまで移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/b8303844-aae9-7772-f1cd-bd594445f8ff.png)

5.　下記コマンドを入力しLaravelをインストールします。（結構かかるので、お茶でもして気長に待ちましょう）
　　　※`example-app`の部分はプロジェクト名なので、好きなお名前にしてください。
```
curl -s https://laravel.build/example-app | bash
```

下記画像のように、途中でUbuntuのパスワードを求められます。
6.　[手順2. Ubuntuの設定](#手順2-ubuntuの設定)で設定したパスワードを入力してください。
7.　入力して「Enter」キーを押下してください。
![スクリーンショット 2023-02-23 152335.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/04b9128e-851e-b6ed-d8c1-4b205eb0d7bf.png)

下記メッセージが表示されたら、OKです！
```
Thank you! We hope you build something incredible. Dive in with: cd example-app && ./vendor/bin/sail up
```

8.　先ほどLaravelをインストールした`example-app`ディレクトリに移動してください。
9.　下記コマンドを叩いてください。

```script:Ubuntu
./vendor/bin/sail up -d
```

10.　ひとまずLaravelがきちんとインストールできてるか動作確認しましょう！
ブラウザのURL入力部に`localhost`と入力して、Laravelのindex画面が表示されれば成功です！👍
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/be056cd5-f955-a57f-8168-4fb67c7b33aa.png)

# 手順5. sailコマンドのエイリアス設定
`/vendor/bin/sail`コマンドを都度都度呼び出すのは面倒なのでエイリアスを設定します。

1.　下記コマンドを入力し、ファイルを開いてください。
```script:Ubuntu
vim ~/.bashrc
```
2.　「i」キーを押下し、INSERTモードに切り替えます。
3.　下記コードを入力してください。
```script:Ubuntu
alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'
```
4.　「Esc」キーを押下してください。
5.　`:wq`と入力して「Enter」キーを押下し、保存して終了します。
6.　.bashrcに記述したものをすぐ反映させたいので、下記コマンドを叩いてください。

```script:Ubuntu
source ~/.bashrc
```
7.　反映されているか確認のため、下記コマンドを叩いてください
```script:Ubuntu
sail php --version
```

phpのバージョンが表示されれば、エイリアス設定成功です👍

# 手順6. Reactのインストール
必要なパッケージのインストールします。
1.　`example-app`ディレクトリ内で、下記コマンドを叩いてください。
```script:Ubuntu
wsl --install
```

Reactを使用するのに必要なモジュールをインストールします。
2.　下記コマンドを叩いてください。
```script:Ubuntu
sail npm install -D react react-dom @types/react @types/react-dom
sail npm install -D @vitejs/plugin-react
```

# 手順7. TypeScriptのインストール

`example-app`ディレクトリ内で、下記コマンドを叩いてください。
```script:Ubuntu
sail npm install -D typescript
sail npx tsc --init --jsx react-jsx
```

# 手順8. Ubuntu上のソースをVSCode編集する
1.　VSCodeの拡張機能である`WSL`をインストールします。
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl
![スクリーンショット 2023-02-23 162603.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/fb05d17e-2153-2d17-cb8b-897fe249a76a.png)

2.　`Ctrl`+`Shift`+`p`を押下し、コマンドラインを立ち上げます。
3.　`New WSL Window`を入力し、一番上の選択肢を選んでください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/d51d0c12-a72f-57ac-1798-b12287ec4b38.png)

すると新しいVSCodeのウィンドウが開き、WSL上で動いているUbuntuに接続した状態になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247902/b25c9e4b-6f53-6dba-1138-a832fe14ef22.png)

4.　`Ctrl`+`k`を押下後、`Ctrl`+`o`を押下し、対象のプロジェクトを開いてください。

# 手順9. viteの設定
`vite.config.js`ファイル拡張子を`vite.config.ts`にリネームして下記のように編集します。



```vite.config.ts
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'; 

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss', 
                'resources/ts/Index.tsx'
            ],
            refresh: true,
        }),
        react(), 
    ],
    server: {
        hmr: {
            host: 'localhost', 
        },
    },
});
```

:::note warn
警告
下記コードがないと、localhostにアクセスすると画面が真っ白になります。
詳細はGithubのissueにて、ご覧ください。
https://github.com/laravel/vite-plugin/issues/28
:::

```vite.config.ts
    server: {
        hmr: {
            host: 'localhost', 
        },
    },
```
# 手順10. index.blade.phpの作成

views ディレクトリ内に index.blade.php を作成します。

```resouces/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">
        <title>Laravel</title>
        @viteReactRefresh
        @vite(['resources/sass/app.scss', 'resources/ts/Index.tsx'])
    </head>
    <body>
        <div id="index"></div>
    </body>
</html>
```

# 手順11. Index.tsxの作成
resourcesディレクトリ内に ts ディレクトリを追加し、その中に Index.tsx を作成します。

```resouces/ts/Index.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';

 const Index:React.FC=()=>{
    return(
        <div>
            Hello World!!!
        </div>
    );
 }

 const container = document.getElementById('index');
 if (container) {
   const root = createRoot(container);
   root.render(<Index />);
 }

```

# 手順12. web.phpの設定
返却するviewファイルをwelcomeからindexに修正します

```web.php
Route::get('/', function () {
    return view('index');
});
```
ブラウザのURL入力部に「localhost」と入力して、  Hello World!!!と表示されれば成功です！

# まとめ
Laravel Sailを使用するとサクッと開発環境を作れちゃいますね！
Laravel9からMixがViteに置き換わったので、フロントの開発効率が上がりそうですね！
後々、ESLintとPrettierの導入も記事にしようかと思います。