【第四弾】Laravel入門資料

Windows環境構築

Laravel開発を始めるために、必要なツールをインストールしていきます。
ここでは、Windows環境を前提としています。

VSCode のインストール

Visual Studio Code（VSCode）は、Microsoft が提供する無料のコードエディタです。
軽量ながら強力な機能を持ち、世界中の開発者に愛用されています。

インストール手順

1. 公式サイトにアクセス: https://code.visualstudio.com/
2. 「Download for Windows」ボタンをクリック
3. ダウンロードした .exe ファイルを実行
4. インストーラーの指示に従ってインストール
5. インストール完了後、VSCode を起動

インストール確認

VSCode が正常に起動できれば OK です。

PHP Intelephense のインストール（推奨）

PHP Intelephense は、PHP 開発を強力にサポートする VSCode 拡張機能です。
Laravel 開発において、コード補完・エラー検出・型チェックなどを提供します。

1. VSCode を起動
2. 左側のアクティビティバーから「拡張機能」アイコンをクリック（またはショートカット: Ctrl+Shift+X）
3. 検索バーに「PHP Intelephense」と入力
4. bmewburn 作の「PHP Intelephense」を選択
5. 「インストール」ボタンをクリック

💡 Intelephense をインストールすると、Laravel の開発効率が劇的に向上します。

💡 後ほど、WSL 拡張機能もインストールします。

⚠️ 既に他のエディタをインストール使用している場合は、そちらで進めても構いません

WSL2 のインストール

WSL2（Windows Subsystem for Linux 2）は、Windows 上で Linux 環境を実行できる機能です。
Laravel 開発では、Linux 環境を使用することが推奨されています。

なぜWSL2が必要なのか

Web開発、特にPHP/Laravel開発でWSL2を使う理由は以下の通りです：

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

PowerShell を管理者権限で起動

1. スタートメニューで「PowerShell」と検索
2. 「Windows PowerShell」を右クリック
3. 「管理者として実行」を選択

WSL2 のインストール

PowerShell で以下のコマンドを実行します：

wsl --install

このコマンドで、WSL2 と Ubuntu ディストリビューションが自動的にインストールされます。

再起動

インストール完了後、パソコンを再起動してください。

Ubuntu の初期設定

再起動後、自動的に Ubuntu のターミナルが開きます（開かない場合はスタートメニューから「Ubuntu」を起動）。

初回起動時、以下の設定を求められます：

• ユーザー名：任意のユーザー名を入力（小文字の英数字のみ）
• パスワード：任意のパスワードを入力（入力中は画面に表示されません）
• パスワードの再入力

⚠️ このパスワードは重要です。必ず覚えておいてください。sudo コマンド実行時に必要になります。

Ubuntu のアップデート

Ubuntu ターミナルで以下のコマンドを実行して、システムを最新の状態にします：

sudo apt update && sudo apt upgrade -y

パスワードの入力を求められたら、先ほど設定したパスワードを入力してください。

インストール確認

PowerShell で以下のコマンドを実行：

wsl --list --verbose

Ubuntu が表示され、VERSION が 2 になっていれば成功です。

💡 今後、「Ubuntu ターミナル」または「WSL ターミナル」と記載がある場合は、スタートメニューから「Ubuntu」を起動してください。

Node.js と npm のインストール（Ubuntu内）

Node.js は JavaScript をブラウザ外で実行するためのランタイム環境です。
npm（Node Package Manager）は Node.js に付属するパッケージ管理ツールで、Laravel のフロントエンド開発で使用します。
WSL2 の Ubuntu 環境内にインストールします。

Ubuntu ターミナルで実行

スタートメニューから「Ubuntu」を起動し、以下のコマンドを実行：

sudo apt install nodejs npm -y

インストール確認

Ubuntu ターミナルで以下のコマンドを実行：

node -v

バージョン番号が表示されれば成功です（例: v12.22.9）

npm -v

npm のバージョン番号も表示されます（例: 8.5.1）

💡 より新しいバージョンが必要な場合は、nvm（Node Version Manager）を使用することもできます。

Git のインストール（Ubuntu内）

Git は、ソースコードのバージョン管理システムです。
コードの変更履歴を管理したり、チーム開発で必須のツールです。
WSL2 の Ubuntu 環境内にインストールします。

Ubuntu ターミナルで実行

sudo apt install git -y

インストール確認

git --version

バージョン番号が表示されれば成功です（例: git version 2.34.1）

初期設定

Git の初期設定を行います：

# ユーザー名を設定
git config --global user.name "あなたの名前"

# メールアドレスを設定
git config --global user.email "your.email@example.com"

# 設定確認
git config --list

Docker Desktop for Windows のインストール

Docker は、アプリケーションをコンテナという単位で実行する仮想化技術です。
Laravel の開発環境を簡単に構築・共有できます。

インストール手順

1. 公式サイトにアクセス: https://www.docker.com/products/docker-desktop/
2. 「Download for Windows」をクリック
3. ダウンロードした .exe ファイルを実行
4. インストーラーの指示に従ってインストール
5. 「Use WSL 2 instead of Hyper-V」にチェックが入っていることを確認
6. インストール完了後、パソコンを再起動

Docker Desktop の起動

スタートメニューから「Docker Desktop」を起動します。

💡 Docker Desktop for Windows は、初回起動時に自動的にWSL2との統合設定を行います。

インストール確認

Ubuntu ターミナルで確認します：

docker --version

バージョン番号が表示されれば OK です（例: Docker version 24.0.6）

docker compose version

Docker Compose のバージョンも確認できます（例: Docker Compose version v2.23.0）

💡 Docker Desktop は常に起動しておく必要があります。開発時は自動起動設定をオンにしておくと便利です。

Claude Code のインストール

Claude Code は、Anthropic が提供する AI 開発アシスタントです。
コード生成、リファクタリング、デバッグなどを AI がサポートしてくれます。

インストールスクリプトでインストール

Ubuntu ターミナルで以下のコマンドを実行します：

curl -fsSL https://claude.ai/install.sh | bash

💡 このスクリプトは、Claude Code を自動的にダウンロードしてインストールします。

インストール確認

インストールが完了したら、バージョンを確認してみましょう：

claude --version

バージョン番号が表示されれば、インストール成功です。

初回セットアップと起動

プロジェクトディレクトリ（またはホームディレクトリ）で以下のコマンドを実行：

claude

Claude.ai での認証が求められます。ブラウザで認証してください。

認証が完了すると、Claude Code のインタラクティブセッションが開始されます。

基本的な使い方

Claude Code では、以下のようなコマンドが使えます：

• /help - 利用可能なコマンド一覧を表示
• /login - アカウントを切り替える
• 質問やリクエストを直接入力 - 例：「このプロジェクトの構造を教えて」

💡 Claude Code でできること：

• コードの生成・修正
• バグの発見と修正
• コードの説明
• リファクタリングの提案
• ファイルの読み書き
• プロジェクト全体の分析

✅ 初回ログイン後は、認証情報が保存されるため、次回からは claude コマンドだけで起動できます。

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

VSCode から WSL 環境に直接アクセスできる拡張機能をインストールします。
これにより、Windows の VSCode で WSL 内のファイルを編集できます。

インストール手順

1. VSCode を起動
2. 左側のアクティビティバーから「拡張機能」アイコンをクリック（または Ctrl+Shift+X）
3. 検索ボックスに「WSL」と入力
4. 「WSL」（Microsoft 公式）を見つけて「インストール」をクリック

WSL で VSCode を開く

Ubuntu ターミナルで、プロジェクトディレクトリに移動してから以下を実行：

# ホームディレクトリで VSCode を開く場合
code .

# 特定のディレクトリで開く場合
cd /path/to/project
code .

初回起動時、VSCode Server のインストールが自動的に行われます。

💡 VSCode の左下に「WSL: Ubuntu」と表示されていれば、WSL 環境に接続されています。

A5M2 のインストール

A5M2 は、Windows で使える無料のデータベース管理ツールです。
MySQL/MariaDB のテーブルの中身を確認したり、SQL を実行したりできます。

インストール手順

1. 公式サイトにアクセス: https://a5m2.mmatsubara.com/
2. 「ダウンロード」をクリック
3. 最新版の .zip ファイルをダウンロード
4. ダウンロードした .zip ファイルを解凍
5. 解凍したフォルダを任意の場所（例: C:\Program Files\A5M2）に配置
6. A5M2.exe を実行

💡 インストーラー不要で、解凍してすぐに使えます。デスクトップにショートカットを作成しておくと便利です。

代替ツール

A5M2 以外にも、以下のようなツールがあります：

• TablePlus - 有料だが高機能（無料トライアルあり）
• DBeaver - 無料でオープンソース
• HeidiSQL - Windows 用の無料ツール

💡 データベース接続情報は、Laravel プロジェクトを作成した後に設定します。今はインストールだけで OK です。

環境構築の確認

すべてのツールが正しくインストールされたか、最終確認をしましょう。

Ubuntu ターミナルで確認

# Node.js
node -v

# npm
npm -v

# Git
git --version

# Docker
docker --version

# Docker Compose
docker compose version

すべてのコマンドでバージョン番号が表示されれば、環境構築は完了です！

Laravelプロジェクトの立ち上げ

環境構築ができたので、実際にLaravelプロジェクトを立ち上げてみましょう。
この講座では、講師が用意したプロジェクトテンプレートを使用します。

GitHubからプロジェクトを取得する（Ubuntu内）

講師のGitHubリポジトリ：

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

手順：

1. 上記のGitHubリポジトリにアクセス
2. 「Use this template」ボタンをクリック
3. 自分のGitHubアカウントにリポジトリをコピー（リポジトリ名は任意）
4. 必ず「Public」を選択してリポジトリを作成
5. コピーしたリポジトリのURLをコピー

Ubuntu ターミナルで、プロジェクトを配置したいディレクトリに移動して、以下を実行：

# ホームディレクトリに移動
cd ~

# リポジトリをクローン（URLは自分のリポジトリのURLに置き換える）
git clone https://github.com/あなたのユーザー名/リポジトリ名.git

# クローンしたディレクトリに移動
cd リポジトリ名

環境変数ファイルを準備する

.env.example をコピーして .env ファイルを作成します：

cp .env.example .env

💡 .env ファイルには、データベース接続情報などの設定が含まれます。
このファイルの値は docker-compose.yml で使用されます。

Dockerでプロジェクトを立ち上げる

Docker コンテナを起動します：

docker compose up -d

-d オプションで、バックグラウンドで実行されます。

コンテナが起動したら、appコンテナにroot権限で入ります：

docker compose exec -u root app bash

💡 -u root オプションで、root ユーザーとしてコンテナに入ります。これにより、ファイルのパーミッション問題を回避できます。

Laravelのインストール

コンテナ内でLaravelをインストールします：

composer create-project laravel/laravel:"^12.0" .

⚠️ 最後の .（ドット）を忘れずに！これは「現在のディレクトリにインストール」を意味します。

パーミッションの修正

Laravelのインストールが完了したら、データディレクトリの所有者を変更します：

chown -R 1000:1000 /data

💡 WSL 環境では、ファイルのパーミッション問題が発生することがあります。このコマンドで、適切な権限を設定します。

パーミッション修正後、コンテナから出ます：

exit

ホスト側でのパーミッション修正

コンテナから出た後、Ubuntu ターミナルで以下のコマンドを実行します：

chmod -R 755 src/

💡 コンテナ内で作成されたファイルは、ホスト側（WSL Ubuntu）から編集できない場合があります。このコマンドで、VSCodeなどから編集可能にします。

Laravelのデータベース設定を編集する

src/.env ファイルを開いて、データベース設定を編集します。

VSCodeでファイルを開く（WSL環境から）：

code src/.env

以下の部分を探して、値を変更します：

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

💡 これらの値は、docker-compose.yml で定義されているデータベースコンテナの設定と一致している必要があります。

設定を反映させるため、Dockerコンテナを再起動します：

# コンテナを停止（データベースも削除）
docker compose down -v

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

データベースのマイグレーション

再度appコンテナに入ります（通常ユーザーで問題ありません）：

docker compose exec app bash

データベースのテーブルを作成します：

php artisan migrate

マイグレーションが成功したら、ブラウザでアクセスしてみましょう：

http://localhost

✅ Laravelのウェルカムページが表示されれば成功です！

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

プロジェクト立ち上げ時によく遭遇するトラブルと、その解決方法を紹介します。

❌ トラブル1：ポート番号が被っている

Error: bind: address already in use
Error: Ports are not available
Error: driver failed programming external connectivity: port is already allocated

# 変更前
ports:
  - 80:80      # Webサーバー
  - 3306:3306  # MySQL

# 変更後（例）
ports:
  - 8080:80    # Webサーバーを8080番に変更
  - 3307:3306  # MySQLを3307番に変更

❌ トラブル2：Docker Desktopが起動していない

Cannot connect to the Docker daemon
Is the docker daemon running?

❌ トラブル3：.envファイルの設定が間違っている

SQLSTATE[HY000] [2002] Connection refused
SQLSTATE[HY000] [1045] Access denied for user

DB_CONNECTION=mysql
DB_HOST=db          # コンテナ名と一致させる
DB_PORT=3306        # コンテナ内部のポート
DB_DATABASE=laravel
DB_USERNAME=udemy123
DB_PASSWORD=pass123

❌ トラブル4：docker compose down -v を実行していない

# ボリュームも含めて完全に削除
docker compose down -v

# 再起動
docker compose up -d

# appコンテナに入る
docker compose exec app bash

# マイグレーションを再実行
php artisan migrate

A5M2でMySQLに接続する

データベースクライアントツールを使って、MySQLに接続してみましょう。
ステップ8でインストールした A5M2 を使用します。

A5M2を起動

解凍したフォルダから A5M2.exe を実行します。

新規接続の作成

1. メニューバーから「データベース」→「データベースの追加と削除」を選択
2. 「追加」ボタンをクリック
3. 「MySQL/MariaDB (直接接続)」を選択
4. 以下の情報を入力：

💡 これらの値は、src/.env ファイルに記載されている内容と一致します。

接続テスト

「接続テスト」ボタンをクリックして、接続が成功することを確認します。

成功したら「OK」ボタンをクリックして接続情報を保存します。

データベースの確認

接続できたら、以下を確認してみましょう：

• 左側のツリービューで「laravel」データベースを展開
• マイグレーションで作成されたテーブル（users, migrations など）が表示される
• テーブルをダブルクリックすると、中身を確認・編集できる

✅ テーブルが表示されれば、データベース接続は成功です！

次のステップ

環境構築とプロジェクトの立ち上げが完了しました！
次の章では、Laravel について詳しく学んでいきます。