11
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-04-23

こんばんは。趣味でプログラミングを勉強している大学二年生のももみんです。
自己紹介のたびに痛い女だと痛感しておりますが、もう後に引けないのでももみんを貫きます。

この記事の目的

長期インターンをきっかけにLaravelを触るようになったのですが、元々触っていたReactも使ってバックもフロントもコードを書きたいと思い、今回の環境構築を試みました。
調べたところ、今回の技術の組み合わせでの環境構築は色々組み合わせがあったので4つほど試し、そんな中で一番スムーズにできた方法を記事にしてみました。
コード書くのは好きだけど環境構築が大嫌いな方の助けになればと思います!
(プログラミング初心者なのでおかしなところがあれば教えて下さい…。)

環境

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の環境構築

1.ターミナルのシェルをbashに切り替える。

プロジェクトのディレクトリに移動し、下記のコマンドを実行。
ターミナルを開き直すと変更が反映される。
(vscodeの場合コマンドじゃなくても切り替えられる)
chsh -s /bin/bash

2.Laravelプロジェクトを作成する。

project_nameの部分は好きに変えて下さい。
curl -s https://laravel.build/project_name | bash

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

cd project_name

4.Laravel Sailを使用してDockerコンテナを起動。

他に起動してるコンテナがあれば先に停止させて下さい。
./vendor/bin/sail up -d

5.localhostにアクセスしてみる。

Laravelのかっこいいページが表示されたら成功です。
何かしらエラーが出ても調べたらすぐ解決できるはず...。
(nodeのバージョン古いことあるので確認してみてください)

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

./vendor/bin/sail stop

②phpmyadminを入れる

1.docker-compose.yamlに下記のコードを書き足す

envファイルを書き換えていなければこのままコピペで大丈夫ですが、何らかの事情で書き換えた場合はその情報と合わせてください。
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 

2.コンテナ起動

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

③React,TypeScriptの環境構築

1.モジュールのインストール

上から
・npm
・TypeScriptのReact
・ViteでReactを利用するためのモジュール
・TypeScript
・Scss
・tsconfig.json作成
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

インストール後package.jsonを見て下記のように追加されているか確認してみて下さい

追加されていたら成功です。
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"
    }
}

2.vite.config.jsの編集

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

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

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

補足

私は上記のディレクトリ構成に加え、componentsディレクトリとApp.tsxファイルを作ってあります。 (ここから先の内容はこれらを加えた状態での説明です)
resources             
  ┗ ts
    ┗ components            
    ┗ index.tsx 
    ┗ App.tsx 

これで環境構築は終わりです!!!!!!!

が、実際に動くかコードを書いて試してみましょう。

④動作確認

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

project_name/routes/web.php
<?php

use Illuminate\Support\Facades\Route;

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

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

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>           
project_name/resources/ts/index.tsx
import { createRoot } from 'react-dom/client';
import App from './App';

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

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

export default App;

localhost/indexに飛び、文字が表示されたら成功です!

良きプログラミングライフを!!!!!!

11
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?