Laravel + React(TypeScript)の開発環境を構築する方法 ～DB接続まで～

##はじめに
この記事では、LaravelとReact(TypeScript)の開発環境構築と、DB接続までできるようになります。
React(TypeScript)環境構築の部分については、下記の動画で紹介されている手順とほぼ同じですが、メモも兼ねてまとめさせていただきました。

- [LaravelにReact.jsとTypeScriptをインストール：React.js + LaravelでSPA開発講座#08](https://www.youtube.com/watch?app=desktop&v=GzbyHZTLSIU&t=268s)

##開発環境

- Windows10
- XAMPP
- php version 7.4.18
- laravel version 8.40.0 

##事前準備
以下の項目のインストールが済んでいない場合、下記のサイトを参考にインストールを完了してください。

 - [「php」のインストール](https://techacademy.jp/magazine/11489)
 - [「node.js」のインストール](https://prog-8.com/docs/nodejs-env-win)
 - [「composer」と「XAMPP」のインストール](https://qiita.com/mitashun/items/ced252681edf2b01cd32)

##環境構築

###Laravelのインストール

- 任意のフォルダを作成＆フォルダの階層まで移動し、VScodeのターミナルで以下のコマンドを実行

```
$ composer create-project laravel/laravel example-app "8.*"
```

- 作成されたプロジェクトの階層に移動、インストールされたlaravelのバージョンを確認　

```
$ cd example-app
$ php artisan -V
```
Laravel Framework 8.40.0 と表示されていればOKです。

###ReactとTypeScript のセットアップ
LaravelのプロジェクトでReact(TypeScript)を扱えるようにします。

- TypeScriptとSCSSでビルドするように、webpack.mix.jsを以下の様に書き換え ※webpack.mix.jsはexample-appディレクトリ直下に配置されています

```webpack.mix.js
const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

 mix.ts('resources/ts/index.tsx', 'public/js')
 .sass('resources/sass/app.scss', 'public/css');
```

- ターミナルでnpm install実行

```
$ npm install
```

- ビルドを実行

```
$ npm run prod
```

- Reactのインストール

```
$ npm i -D react react-dom @types/react @types/react-dom
```

- 再度npm install

```
$ npm install
```

- tsconfig.jsonファイル を作成 ※example-appディレクトリ直下に作成される

```
$ ./node_modules/.bin/tsc --init
```
- tsconfig.jsonファイルの内容を下記に書き換え

```tsconfig.json
{
  "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "jsx": "react",
      "strict": true,
      "esModuleInterop": true
  }
}
```

- reourcesディレクトリ直下にtsディレクトリを新しく作成、作成したtsディレクトリ直下にindex.tsxファイルを作成

![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1404827/2f738f94-cc85-0d18-e5b1-912e00e32d04.png)

- index.tsxに下記の内容を記載

```index.tsx
import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
    return (
        <h1>Laravel SPA</h1>
    )
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
)
```

- resourcesディレクトリ直下のcssディレクトリとapp.cssフォルダの名前と拡張子を変更

変更前
![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1404827/cc91cb2c-f7dd-a114-c198-0618a1e80df4.png)
変更後
![画像6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1404827/f0281376-d4a3-b3d1-6a9e-916c7fb56905.png)

- 再度ビルドを実行

```
$ npm run prod
```

- viewディレクトリ直下のwelcome.blade.phpの内容を下記の様に変更

```welcome.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>
    <link rel="stylesheet" href="/css/app.css">
</head>

<body>
    <div id="app"></div>
</body>
<script src="/js/index.js"></script>

</html>
```
- VScodeの「Split Terminal」で2つのターミナルを起動し、それぞれ下記のコマンドを実行する

```
$ php artisan serve
```

```
$ npm run watch
```

- ブラウザが起動し、下記の画面が表示されたらOK

![画像7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1404827/7401c649-4998-4049-2f0c-90175dce4746.png)


##DB接続
###データベース作成
- 「XAMPP」を起動し、ApatcheとMySQLの「Start」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1404827/196e3cd1-5622-cf32-37d0-6dd3838b87ff.png)

- MySQLの「Admin」を押下する。ブラウザが起動しAdmin画面が表示されたら、「データベース」タブを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1404827/2fdb692c-46a7-be69-2bc5-5401b77dec62.png)

- 任意のデータベース名を入力し、「作成」ボタンを押下 ※ここではexample_appと入力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1404827/8ed9ddae-4536-3546-18f7-6d0016331913.png)

- データベースが作成され、テーブルが無い趣旨のメッセージが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1404827/ae19abae-8b9d-3f2b-ae41-4ad33b831d26.png)

###envファイル変更＆マイグレーション

- example-appディレクトリ直下にある、.envファイルの「DB_DATABSE=laravel」を接続したいデータベース名に変更 ※ここではexample_appと入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1404827/4923176f-b424-c8eb-9c87-a984203a5e97.png)

- ターミナルで下記のコマンドを実行

```
$ php artisan migrate
```

- adminを再度確認し、下記の様にテーブルが作成できていればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1404827/33cb6ee0-c801-81a3-ed7f-c66300dd4c62.png)

以上が環境構築からDB接続までの流れになります。次はこの環境でaxiosを利用したCRUD処理の記事を書ければなと思います。

##参考文献

- [LaravelにReact.jsとTypeScriptをインストール：React.js + LaravelでSPA開発講座#08](https://www.youtube.com/watch?app=desktop&v=GzbyHZTLSIU&t=268s)
- [【Windows編】今すぐ簡単にできる！PHPのダウンロード方法](https://techacademy.jp/magazine/11489)
- [Node.jsの開発環境を用意しよう！（Windows）](https://prog-8.com/docs/nodejs-env-win)
- [Windows Laravelの環境構築の手順書](https://qiita.com/mitashun/items/ced252681edf2b01cd32)