LaravelやVueの開発環境構築について学ぶときのロードマップまとめ

LaravelやVueを使って開発を始めたいけど、
「環境構築がよくわからないまま、コマンドをコピペしてなんとなく動かしている」
そんな状態から卒業したい人向けに、開発環境構築に必要な知識のステップを整理しました。

✅ LaravelやVue自体の書き方は対象外です。
✅ あくまで開発環境を作るために学ぶべき内容に絞ってまとめています。

---

✅ 目的

LaravelやVueの開発環境を 「理解して」自分で構築できるようになること をゴールにしています。

---

🔧 ステップ一覧（基礎から順に）

1. Homebrew（macOS用パッケージマネージャー）

• ソフトウェアをターミナルで簡単にインストールできる

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node
brew install --cask docker

---

2. PATH（パス）の設定

• ターミナルでコマンドを実行できるようにするための「通り道」

export PATH="/opt/homebrew/bin:$PATH"

---

3. Node.js / npm（JavaScriptの実行環境とパッケージ管理）

• VueやViteなどのライブラリを扱うために必要

node -v
npm -v
npm install

---

4. package.json（npmの設定ファイル）

• プロジェクトで使うライブラリやスクリプトを記述

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.0"
  }
}

---

5. Vite / Webpack / Laravel Mix（アセットバンドラ）

• JS/CSSなどの資産をまとめて最適化
• LaravelではViteが主流（Laravel Mix＝Webpackのラッパー）

---

6. Gulp（必要なら）

• 古いプロジェクトやテンプレートで見かけることがある
• WebpackやViteと役割は似ているが用途が異なる

---

7. PHP / Composer（Laravel実行に必要）

php -v
composer -V

---

8. Laravelインストール方法

方法1：Laravelインストーラーを使う

composer global require laravel/installer
laravel new プロジェクト名

方法2：create-projectを使う

composer create-project laravel/laravel プロジェクト名

---

9. Docker（仮想開発環境の構築）

• PHP・MySQL・Nginxなどをコンテナで構築できる
• イメージ／コンテナの概念を理解する

---

10. docker-compose（複数コンテナの管理）

• docker-compose.yml で構成定義

services:
  app:
    build: .
    ports:
      - "8000:8000"
    volumes:
      - ./:/app

---

11. Laravel Sail（Laravel公式のDocker構成）

• Laravelに標準で含まれる簡易なDocker環境

./vendor/bin/sail up -d
./vendor/bin/sail artisan migrate

---

12. データベース接続（MySQLなど）

.env ファイルに接続情報を記述

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

---

13. DockerのVolumeとファイル権限

• ホストOSとコンテナ間でファイル共有
• storage/ や bootstrap/cache/ の書き込み権限設定に注意

---

14. ホットリロード（Viteなど）

• 開発中の変更を即座にブラウザに反映

npm run dev

---

15. Gitと.gitignore

• プロジェクトに含めないファイルの指定
• .gitignore に以下を追加：

/node_modules
/vendor
.env

---

🎯 最終的にできるようになること

• Laravel + VueをDocker上で動かす開発環境を自分の理解で構築できる
• npmやDockerコマンドを意味を理解して使える
• .env や Vite、Docker Compose などの設定を自力で読める／書ける

---

📌 おすすめの学習順

1. Homebrew
2. Node.js / npm
3. PHP / Composer
4. Laravelインストール（まずはローカルで）
5. Docker & docker-compose
6. Laravel Sailまたは独自Docker構築
7. ViteやWebpackの構成理解
8. .env やDB接続の理解
9. Git・コード整形ツール（任意）

---

💬 最後に

このステップを1つずつ丁寧に学べば、
「コピペで動かしていた開発環境」が、「理解して自分で再現できる環境」に変わっていきます。

Laravel × Vue の開発を本気でやっていきたい人は、ぜひこのマップを参考にしてみてください！

---