こんばんは。趣味でプログラミングを勉強している大学二年生のももみんです。
自己紹介のたびに痛い女だと痛感しておりますが、もう後に引けないのでももみんを貫きます。
この記事の目的
長期インターンをきっかけに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ファイルを書き換えていなければこのままコピペで大丈夫ですが、何らかの事情で書き換えた場合はその情報と合わせてください。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を見て下記のように追加されているか確認してみて下さい
追加されていたら成功です。{
"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ファイルはこれから作ります。
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
これで環境構築は終わりです!!!!!!!
が、実際に動くかコードを書いて試してみましょう。④動作確認
ただの動作確認なのでガンガンコピペしてメッセージが表示されるか確認してみて下さい。
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Route::get('/index',function () {
return view('index');
});
<!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>
import { createRoot } from 'react-dom/client';
import App from './App';
createRoot(document.getElementById('app')as HTMLElement).render(<App />);
function App() {
return <h1>環境構築大成功ーーーー!!!!!</h1>;
}
export default App;
localhost/indexに飛び、文字が表示されたら成功です!