Windows環境構築ガイド

Laravel開発環境をWindowsにセットアップしよう

VSCode、WSL2、Docker、Gitなどの必須ツールをインストール

インストール対象ツール一覧

必須ツール（推奨順）

1️⃣ 📝

VSCode

コードエディタ（基盤）

2️⃣ 🐧

WSL2 + Ubuntu

Linux開発環境

3️⃣ 📦

Node.js と npm

JavaScriptランタイム

4️⃣ 🔧

Git

バージョン管理

5️⃣ 🐳

Docker Desktop

コンテナ環境

6️⃣ 🤖

Gemini CLI

AIコーディングアシスタント

7️⃣ 🔌

WSL拡張機能

VSCode統合

8️⃣ 🗄️

A5M2

データベース管理ツール

1️⃣ VSCode のインストール

📥 ダウンロード

公式サイトからVSCodeをダウンロードします。

公式サイト

https://code.visualstudio.com/

インストール手順

  1. 1. 「Download for Windows」をクリック
  2. 2. VSCodeUserSetup-{version}.exeをダウンロード
  3. 3. インストーラーを実行
  4. 4. 「PATHへの追加」にチェックを入れる（推奨）
  5. 5. インストール完了後、VSCodeを起動

✅ PHP Intelephense 拡張機能をインストール

高速なコード補完、型推論、エラー検出、定義ジャンプ、リファレンス検索が使えます。

  1. 1. VSCodeで Ctrl+Shift+X を押す
  2. 2. 「PHP Intelephense」を検索
  3. 3. 作成者: bmewburn のものをインストール

2️⃣ WSL2 + Ubuntu のインストール

💡 WSL2とは？

Windows Subsystem for Linux 2 - WindowsとLinuxを同時に実行できる技術です。

  • • 実際のLinuxカーネルが軽量仮想マシン上で動作
  • • WindowsとLinuxのファイルシステムを相互にアクセス可能
  • • Dockerの実行に必要
  • • 本番環境（Linux）と同じ環境で開発できる

WSL2の仕組み - シンプルに理解する

Windows 11

アプリ、エクスプローラー、VSCode

Ubuntu (Linux)

Docker、Git、Node.js

Hyper-V（仮想化レイヤー）

両方のOSがこの層を通じてハードウェアにアクセス

物理ハードウェア

CPU、メモリ、SSD、ネットワーク

🔑 重要: WindowsもLinuxも、両方ともHyper-V経由で同じハードウェアにアクセスします。これにより両者が対等な立場で動作し、ほぼネイティブに近い速度を実現しています。

インストール手順

  1. 1. PowerShellを管理者権限で開く

    スタートメニュー → 「PowerShell」を右クリック → 「管理者として実行」

  2. 2. 以下のコマンドを実行 
    wsl --install

    このコマンドで自動的にUbuntuもインストールされます

  3. 3. PCを再起動
  4. 4. 初回起動でユーザー名とパスワードを設定

    Ubuntuが自動で起動するので、Linuxのユーザー名とパスワードを設定します

確認コマンド

PowerShellで実行:

wsl --version

⚠️ 注意: WSL2はWindows 10バージョン2004以降、またはWindows 11が必要です。

3️⃣ Node.js と npm のインストール

⚠️ WSL2では権限問題を避けるため、nvmを使います

インストールコマンド

WSL2（Ubuntu）内で実行:

# curlをインストール
sudo apt update && sudo apt install -y curl

# nvmをインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

# 設定を再読み込み
source ~/.bashrc

# Node.js 24をインストール
nvm install 24
nvm use 24

確認コマンド

node -v
npm -v

4️⃣ Git のインストール

💡 重要: GitもNode.jsと同様にWSL2（Ubuntu）内にインストールします。

インストールコマンド

WSL2（Ubuntu）内で実行:

sudo apt install -y git

確認コマンド

git --version

初期設定

Gitを使うために、ユーザー名とメールアドレスを設定します。

git config --global user.name "あなたの名前"
git config --global user.email "your.email@example.com"
git config --list

5️⃣ Docker Desktop for Windows のインストール

⚠️ 事前確認

WSL2が正しくインストールされていることを確認してください。

Docker DesktopはWSL2上で動作します。

📥 ダウンロード

公式サイト

https://www.docker.com/products/docker-desktop/

インストール手順

  1. 1. 「Download for Windows」をクリック
  2. 2. Docker Desktop Installer.exeをダウンロード
  3. 3. インストーラーを実行
  4. 4. 「Use WSL 2 instead of Hyper-V」にチェック（推奨）
  5. 5. インストール完了後、PCを再起動
  6. 6. Docker Desktopを起動して利用規約に同意

確認コマンド

WSL2（Ubuntu）内で実行:

docker --version
docker compose version

💡 補足: Docker Desktopが起動していないとコマンドが使えません。タスクバーでDockerアイコンが起動していることを確認してください。

6️⃣ Gemini CLI のインストールと基本操作

✅ 無料で利用可能！

個人のGoogleアカウントなら無料で利用できます。

無料枠: 60リクエスト/分、1,000リクエスト/日

⚠️ 重要: 個人アカウントでログイン

必ず個人のGmailアカウント（Workspaceではないアカウント）でログインしてください。Workspaceアカウントでは無料枠が利用できない場合があります。

公式ドキュメント

https://geminicli.com/

インストールコマンド

WSL2（Ubuntu）内で実行:

# Gemini CLIをインストール
npm install -g @google/gemini-cli

# 確認
gemini --version

初回セットアップ

gemini
  1. 1. テーマカラーを選択
  2. 2. 認証方法で「Login with Google」を選択
  3. 3. ブラウザで個人のGoogleアカウントで認証

ファイル指定方法 (`@`マーク)

プロンプト内で `@` に続けてファイルパスを入力すると、そのファイルをコンテキストとして Gemini に渡すことができます。これにより、ファイルの内容に基づいた質問や指示が可能になります。

単一ファイルの例:

@routes/web.php このファイルを解説して

複数ファイルの例:

@app/Models/User.php @app/Http/Controllers/UserController.php リレーション確認

7️⃣ VSCode WSL拡張機能のインストール

💡 なぜWSL拡張機能が必要？

VSCodeからWSL2内のファイルを直接編集できるようになります。

  • • Windows側のVSCodeでLinux側のファイルを編集
  • • ターミナルも自動的にWSL2に接続
  • • シームレスな開発体験

インストール手順

  1. 1. VSCodeで拡張機能を開く

    Ctrl+Shift+X を押す

  2. 2. 「WSL」を検索
  3. 3. 「WSL」拡張機能をインストール

    作成者: Microsoft

使い方

方法1: VSCodeから接続

  1. 1. VSCodeで F1 キーを押す
  2. 2. 「WSL: Connect to WSL」を選択

方法2: WSLから起動

cd ~/Documents
code .

✅ 成功: VSCodeの左下に「WSL: Ubuntu」と表示されていれば接続成功です。

8️⃣ A5M2 のインストール

💡 A5M2とは？

A5:SQL Mk-2 - 日本製の高機能なデータベース管理ツールです。

  • • 無料で利用可能
  • • 日本語完全対応
  • • MySQL、PostgreSQL、SQLiteなど多数のDB対応

公式サイト

https://a5m2.mmatsubara.com/

インストール手順

  1. 1. 公式サイトから「ダウンロード」をクリック
  2. 2. インストーラー版（a5m2_*_x64.exe）をダウンロード
  3. 3. インストーラーを実行
  4. 4. インストールウィザードの指示に従う

代替ツール

  • • HeidiSQL - 無料・オープンソース
  • • TablePlus - 有料、無料トライアルあり
  • • DBeaver - 無料・オープンソース
  • • MySQL Workbench - MySQL公式ツール

環境構築確認チェック

✅ 確認コマンド一覧

WSL2（Ubuntu）内で実行:

node -v
npm -v
git --version
docker --version
docker compose version
gemini --version

📋 チェックリスト

Laravelプロジェクト立ち上げ

💡 重要: 以下の操作はすべてWSL2（Ubuntu）内で実行します。

📦 GitHubテンプレートを使う

GitHubリポジトリ

https://github.com/sbtest1218-oss/udemy-aws3-laravel-new

手順

  1. 1. 「Use this template」をクリック
  2. 2. 自分のGitHubアカウントにコピー
  3. 3. 「Public」を選択してリポジトリ作成

クローンコマンド

WSL2（Ubuntu）内で実行:

cd ~/Documents
git clone https://github.com/あなたのユーザー名/リポジトリ名.git
cd リポジトリ名

環境ファイル準備

cp .env.example .env

Docker立ち上げと権限設定

# Dockerコンテナ起動
docker compose up -d

# rootユーザーでコンテナに入る
docker compose exec -u root app bash

# /dataの所有者をappuserに変更
chown -R appuser:appuser /data

# exitして通常ユーザーで入る
exit
docker compose exec app bash

# Laravelプロジェクト作成
composer create-project laravel/laravel:"^12.0" .

# 完了したらexit
exit

データベース設定

編集ファイル

src/.env を編集します。

設定内容

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=udemy123
DB_PASSWORD=pass123

コンテナ再起動

docker compose down -v
docker compose up -d

マイグレーション実行

docker compose exec app bash
php artisan migrate

✅ 確認

ブラウザで以下のURLにアクセス:

http://localhost

A5M2でのMySQL接続

接続情報

接続名: Laravel Project
DBMS: MySQL
ホスト: 127.0.0.1 または localhost
ユーザーID: udemy123
パスワード: pass123
ポート: 3306
データベース: laravel

💡 ヒント: A5M2を起動したら、「データベース」→「接続の追加と削除」から上記の情報で新しい接続を作成してください。

よくあるトラブルと対処法

トラブル1: WSL 2エラー

エラー: "WSL 2 installation is incomplete"

解決策:

  1. 1. PowerShellを管理者権限で開く
  2. 2. 以下のコマンドを実行:
wsl --install
wsl --set-default-version 2

3. PCを再起動してDocker Desktopを再度起動

トラブル2: ポート番号被り

エラー: "address already in use"

解決策: docker-compose.ymlのポート番号左側を変更します。

ports:
  - 8080:80    # Webサーバー
  - 3307:3306  # MySQL

アクセスURL: http://localhost:8080

トラブル3: Docker未起動

エラー: "Cannot connect to the Docker daemon"

解決策: スタートメニューからDocker Desktopを起動します。タスクバーにDockerアイコンが表示されていることを確認してください。

トラブル4: .env設定誤り

エラー: "SQLSTATE[HY000]"

解決策: src/.envの設定値をdocker-compose.ymlと一致させて再起動します。

docker compose down -v
docker compose up -d

トラブル5: ボリュームの問題

症状: 古い設定が残っている

解決策: -vオプション付きで削除します。

docker compose down -v
docker compose up -d
docker compose exec app bash
php artisan migrate

⚠️ 警告: 本番環境では-vオプションは使用禁止です！

トラブル6: VSCodeがWSLに接続できない

症状: 「WSL: Ubuntu」と表示されない

解決策:

  1. 1. WSL拡張機能が正しくインストールされているか確認
  2. 2. VSCodeを再起動
  3. 3. WSL2（Ubuntu）を再起動
  4. 4. それでもダメなら、VSCodeの設定から「Remote.WSL: Ubuntu」を検索して有効化

よく使うDockerコマンド集

💡 すべてWSL2（Ubuntu）内で実行

docker compose up -d

コンテナ起動

docker compose down

コンテナ停止

docker compose down -v

コンテナ停止＋ボリューム削除

docker compose exec app bash

appコンテナに入る

docker compose ps

起動中コンテナ確認

docker compose logs

ログ確認

exit

コンテナから出る