Laravel,React,TypeScript,Mysqlの環境構築

こんばんは。趣味でプログラミングを勉強している大学二年生のももみんです。
自己紹介のたびに痛い女だと痛感しておりますが、もう後に引けないのでももみんを貫きます。
# この記事の目的
長期インターンをきっかけにLaravelを触るようになったのですが、元々触っていたReactも使ってバックもフロントもコードを書きたいと思い、今回の環境構築を試みました。
調べたところ、今回の技術の組み合わせでの環境構築は色々組み合わせがあったので４つほど試し、そんな中で一番スムーズにできた方法を記事にしてみました。
コード書くのは好きだけど環境構築が大嫌いな方の助けになればと思います！
（プログラミング初心者なのでおかしなところがあれば教えて下さい…。）
# 環境
Laravel-11.4.0
PHP-8.3.6
React-18.2.0
TypeScript-5.4.5
Mysql-8.0.32
Docker-25.0.3
mac M2
# 流れ
⓪GitHub上に新しいリポジトリを作成し、vscodeにクローン
①Laravelの環境構築
②phpmyadminを入れる
③React,TypeScriptの環境構築
④動作確認
# ①Laravelの環境構築
<h4>1.ターミナルのシェルをbashに切り替える。</h4>
プロジェクトのディレクトリに移動し、下記のコマンドを実行。<div></div>
ターミナルを開き直すと変更が反映される。<div></div>
（vscodeの場合コマンドじゃなくても切り替えられる）

```
chsh -s /bin/bash
```

<h4>2.Laravelプロジェクトを作成する。</h4>
project_nameの部分は好きに変えて下さい。

```ruby
curl -s https://laravel.build/project_name | bash
```

<h4>3.作ったLaravelプロジェクトのディレクトリに移動。</h4>

```ruby
cd project_name
```

<h4>4.Laravel Sailを使用してDockerコンテナを起動。</h4>
他に起動してるコンテナがあれば先に停止させて下さい。

```ruby
./vendor/bin/sail up -d
```

<h4>5.localhostにアクセスしてみる。</h4>
Laravelのかっこいいページが表示されたら成功です。<div></div>
何かしらエラーが出ても調べたらすぐ解決できるはず...。<div></div>
（nodeのバージョン古いことあるので確認してみてください）

http://localhost/

<h4>6.下記コマンドでコンテナを停止させる。</h4>

```ruby
./vendor/bin/sail stop
```

# ②phpmyadminを入れる
<h4>1.docker-compose.yamlに下記のコードを書き足す</h4>
envファイルを書き換えていなければこのままコピペで大丈夫ですが、何らかの事情で書き換えた場合はその情報と合わせてください。

```ruby:docker-compose.yaml
phpmyadmin:
        image: phpmyadmin/phpmyadmin
        links:
           - mysql:mysql
        ports:
           - 8080:80
        environment:
           MYSQL_USERNAME: '{DB_USERNAME}'
           MYSQL_ROOT_PASSWORD: '{DB_PASSWORD}'
           PMA_HOST: mysql
        networks:
           - sail 
```

<h4>2.コンテナ起動</h4>
コンテナ起動後、以下のリンク先がphpmyadminのログイン画面なら成功です。<div></div>
ユーザー名、パスワードはenvファイルで好きに変えれます。<div></div>
下記のリンクからログインできない場合はdocker desktopのコンテナ内のリンクから飛んでみてください。

```ruby
./vendor/bin/sail up -d
```

http://localhost:8080/

# ③React,TypeScriptの環境構築
<h4>1.モジュールのインストール</h4>
上から<div></div>
・npm<div></div>
・TypeScriptのReact<div></div>
・ViteでReactを利用するためのモジュール<div></div>
・TypeScript<div></div>
・Scss<div></div>
・tsconfig.json作成

```ruby
npm install
npm install -D react react-dom @types/react @types/react-dom
npm install -D @vitejs/plugin-react
npm install -D typescript
npm add -D sass
npx tsc --init --jsx react-jsx
```

<h4>インストール後package.jsonを見て下記のように追加されているか確認してみて下さい</h4>
追加されていたら成功です。

```ruby:package.json
{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@types/react": "^18.2.79",
        "@types/react-dom": "^18.2.25",
        "@vitejs/plugin-react": "^4.2.1",
        "axios": "^1.6.4",
        "laravel-vite-plugin": "^1.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "sass": "^1.75.0",
        "typescript": "^5.4.5",
        "vite": "^5.0"
    }
}

```

<h4>2.vite.config.jsの編集</h4>
一番下くらいにこの名前のファイルがあるはずなので見つけてください。<div></div>
まず今回はTypeScriptを使うので、このファイルの拡張子をjsからtsに変更して下さい。

```ruby
変更後 ： vite.config.ts
```

次にvite.config.tsファイルの中身を下記のように編集して下さい。
tsディレクトリ、scssディレクトリ、app.scssファイル、index.tsxファイルはこれから作ります。

```ruby:vite.config.ts
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'; <---追加

export default defineConfig({
    plugins: [
        react(),<-----------------------------追加
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js', <-------削除
                'resources/scss/app.scss', <---追加
                'resources/ts/index.tsx' <-----追加
            ],
            refresh: true,
        }),
    ],
});
```

tsディレクトリ、scssディレクトリ、app.scssファイル、index.tsxファイルを下記の位置に作成して下さい。

```
resources             resources
　　┗ ts                   ┗ scss
　　　　┗ index.tsx             ┗ app.scss
```

<h4>補足</h4>
私は上記のディレクトリ構成に加え、componentsディレクトリとApp.tsxファイルを作ってあります。
（ここから先の内容はこれらを加えた状態での説明です）

```
resources             
　　┗ ts
　　　 ┗ components            
　　　 ┗ index.tsx 
　　　 ┗ App.tsx 
```

<h3>これで環境構築は終わりです！！！！！！！</h3>
が、実際に動くかコードを書いて試してみましょう。

# ④動作確認
ただの動作確認なのでガンガンコピペしてメッセージが表示されるか確認してみて下さい。

```ruby:project_name/routes/web.php
<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/index',function () {
    return view('index');
});

```

```ruby:project_name/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">


    <title>環境構築</title>
    @viteReactRefresh
    @vite([
        'resources/css/app.css',
        'resources/scss/app.scss',
        'resources/ts/index.tsx',
    ])
</head>
<body>
    <div id="app">
    </div>
</body>
</html>           
```

```ruby:project_name/resources/ts/index.tsx
import { createRoot } from 'react-dom/client';
import App from './App';

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

```

```ruby:project_name/resources/ts/App.tsx
function App() {
    return <h1>環境構築大成功ーーーー！！！！！</h1>;
}

export default App;
```
localhost/indexに飛び、文字が表示されたら成功です！
<h2>良きプログラミングライフを！！！！！！</h2>