Web開発環境の全体像を理解しよう

JavaScript応用までは、ブラウザで動くコードを中心に学びました。次に学ぶPHPは、ブラウザではなくサーバー側で動きます。

PHPを書き始める前に、どこでPHPを動かすのかを準備します。この入門シリーズでは、Windows上にWSL 2とDockerを用意し、PHPとMySQLを同じ手順で起動できる環境を作ります。

このシリーズでは、Windows 11環境を推奨します。記事内の画面表示や操作手順はWindows 11を基準に説明します。Windows 10などでも利用できる場合がありますが、WSL 2やDocker Desktopの導入条件、設定画面、表示内容が異なる可能性があります。

この記事を終えると、次のことができるようになります。

• 開発環境が必要な理由を説明できる
• Windows、WSL、Ubuntuの関係を説明できる
• Dockerとコンテナの役割を説明できる
• ホスト、WSL、コンテナのどこでコマンドを実行するか区別できる

開発環境とは

開発環境は、プログラムを書き、実行し、動作を確認するために必要なソフトウェアや設定の組み合わせです。

PHPを使ったWebシステムでは、主に次のものが必要です。

• PHPを実行する仕組み
• HTTPリクエストを受け取るWebサーバー
• データを保存するデータベース
• ソースコードを書くエディター
• コマンドを実行するターミナル

一つずつWindowsへ直接インストールする方法もあります。しかし、バージョンや設定が端末ごとに異なると、「自分の環境では動くが、別の環境では動かない」という問題が起きやすくなります。

今回採用する環境構成

このシリーズでは、次の構成を使用します。

Windows
└── WSL 2
    └── Ubuntu
        ├── プロジェクトのファイル
        ├── Git
        ├── Dockerのコマンド
        └── Dockerコンテナ
            ├── php：ApacheとPHP
            ├── db：MySQL
            └── phpmyadmin：データベース管理画面

Windowsは普段操作するOSです。WSL 2の中ではLinuxを動かし、Dockerコンテナの中でPHPやMySQLを動かします。

なぜWindows上で直接開発しないのか

PHPやGitは、Windowsへ直接インストールして使用することもできます。

それでも、このシリーズではWindows上にWSL 2を用意し、WSL内のUbuntuで開発を進めます。

主な理由は次の四つです。

• Webサーバーの多くがLinuxで動いている
• Linuxのコマンド操作を学べる
• Dockerと組み合わせたときに動作が速く安定しやすい
• AIを活用した開発ツールを使いやすい

WSLとは

WSLは、Windows Subsystem for Linuxの略です。

Windowsを使用しながら、UbuntuなどのLinux環境を動かすための仕組みです。

通常、WindowsでLinuxを使用するには、別のPCを用意したり、仮想マシンへLinuxをインストールしたりする必要があります。

WSLを使えば、Windowsを終了することなく、Windows TerminalなどからLinuxを起動できます。

Windows
├── ブラウザ
├── VS Code
├── Docker Desktop
└── WSL 2
    └── Ubuntu
        ├── Linuxコマンド
        ├── Git
        ├── プロジェクト
        └── Dockerの操作

Windows側ではブラウザやVS Codeなどの使い慣れたアプリケーションを使い、プログラムの実行やファイル操作はLinux側で行えます。

つまりWSLは、WindowsとLinuxの両方の利点を利用するための仕組みです。

Web開発ではLinuxを使う機会が多い

実際にWebサイトやWebシステムを公開するサーバーでは、Linuxが広く使用されています。

そのため、開発時からLinux環境を使用しておくと、本番環境との違いを小さくできます。

たとえば、次のような操作はLinuxサーバーでも頻繁に使用します。

cd
ls
cp
mv
rm
mkdir
chmod
grep
git
docker compose

WSLでこれらのコマンドに慣れておくと、将来VPSやクラウドサーバーを操作するときにも、そのまま知識を活用できます。

GUIとCLIの違い

コンピューターの操作方法は、大きくGUIとCLIに分けられます。

GUIとは

GUIは、Graphical User Interfaceの略です。

ウィンドウ、アイコン、メニュー、ボタンなどを、マウスで操作する方法です。

たとえば、Windowsのエクスプローラーでフォルダーを作成する操作はGUIです。

右クリック
→ 新規作成
→ フォルダー
→ 名前を入力

操作内容が画面で見えるため、初めて使用するソフトウェアでも比較的理解しやすい特徴があります。

CLIとは

CLIは、Command Line Interfaceの略です。

ターミナルへ文字でコマンドを入力し、コンピューターを操作する方法です。

先ほどと同じフォルダー作成をCLIで行う場合は、次のように入力します。

mkdir sample

最初はGUIより難しく感じるかもしれません。

しかし、CLIには次の利点があります。

• 操作手順をそのまま文字として記録できる
• 同じ操作を何度でも正確に実行できる
• 複数の処理をまとめて自動化できる
• エラー内容をコピーして調べやすい
• 別の人へ操作手順を共有しやすい

たとえば、GUIで「どのボタンをどの順番で押したか」を説明するには、画面の状態を含めた長い説明が必要です。

CLIなら、実行するコマンドをそのまま共有できます。

docker compose up -d

この一行だけで、Docker Composeに定義された複数のコンテナを起動できます。

GUIとCLIには、それぞれ得意なことがあります。

操作方法	得意なこと
GUI	画面を見ながら直感的に操作する
CLI	正確な操作、繰り返し処理、自動化、手順共有

このシリーズではGUIを使わないわけではありません。

VS Code、Docker Desktop、ブラウザなどはGUIで操作し、ファイル操作やDockerの起動にはCLIを使用します。

GUIとCLIを目的に応じて使い分けます。

AIを活用するためにもCLIを理解しておく

AIを活用した開発ツールでは、CLIを使用する場面が増えています。

たとえばAIへプログラムの修正を依頼すると、内部または手元の環境で次のような操作が行われます。

git status
git diff
php artisan test
npm run build
docker compose exec php php -v

AIが作成したコードが正しく動くか確認するためにも、テスト、ビルド、Git、Dockerなどのコマンドが使用されます。

AIへすべてを任せる場合でも、利用者がCLIを理解していると、次のことが判断しやすくなります。

• AIが何のコマンドを実行しているか
• どのディレクトリで操作しているか
• エラーがどの処理で発生したか
• ファイルがどのように変更されたか
• 実行しても問題のないコマンドか
• テストが本当に成功しているか

AIは便利ですが、実行場所や環境を間違えることもあります。

CLIの基本を理解していれば、AIの提案をそのまま受け入れるのではなく、内容を確認しながら安全に利用できます。

これからのWeb開発では、人間がすべてのコマンドを暗記する必要は少なくなるかもしれません。

一方で、AIへ適切な指示を出し、結果を確認するために、CLIの仕組みを理解する重要性は高くなります。

Dockerを高速に動かすためにWSLを使う

Dockerで一般的に使用するWeb開発用コンテナは、Linuxを基準に作られています。

Docker DesktopはWindows上で動いているように見えますが、Linuxコンテナを実行するときは、内部でLinux環境を使用しています。

Windows
└── Docker Desktop
    └── WSL 2のLinux環境
        └── Linuxコンテナ

Windows側に保存したプロジェクトをLinuxコンテナから読み書きすると、WindowsとLinuxのファイルシステムをまたぐ処理が発生します。

Windowsのファイル
↓
WSL 2
↓
Dockerコンテナ

一方、プロジェクトをWSL内へ保存すると、Linux環境内でファイルをやり取りできます。

WSL内のファイル
↓
Dockerコンテナ

この違いは、ファイルを頻繁に読み書きするWebフレームワークで特に影響します。

Laravelでは、一度の画面表示やコマンド実行でも、多数のPHPファイルや設定ファイルを読み込みます。

また、開発中は次のようなディレクトリへ頻繁にアクセスします。

vendor/
storage/
bootstrap/cache/
node_modules/

プロジェクトをWindows側へ置いた場合、環境によっては画面表示、Composer、テスト、キャッシュ生成などが遅く感じられることがあります。

プロジェクトをWSL内へ置くことで、Laravelの画面表示やコマンド実行が、体感できるほど速くなる場合があります。

そのため、このシリーズではプロジェクトをWindowsの次のような場所には保存しません。

C:\Users\ユーザー名\projects

WSLから見ると、Windows側のファイルは次の場所にあります。

/mnt/c/Users/ユーザー名/projects

代わりに、WSL内のホームディレクトリへ保存します。

/home/ユーザー名/projects

コマンドでは、次のように作成します。

mkdir -p ~/projects
cd ~/projects

~は、現在ログインしているLinuxユーザーのホームディレクトリを表します。

~/projects

は、実際には次のような場所です。

/home/ユーザー名/projects

WSL内のプロジェクトは、VS CodeのWSL連携機能を使ってWindows側から編集できます。

そのため、ファイルをWSL内へ保存しても、使い慣れたVS Codeを手放す必要はありません。

WSLを使う目的

このシリーズでWSLを使用する目的は、単にPHPを動かすことだけではありません。

• Windowsを使いながらLinuxを学ぶ
• 本番サーバーに近い環境で開発する
• Dockerを効率よく動かす
• Laravelのファイルアクセスを高速化する
• CLIによる操作に慣れる
• GitやAI開発ツールを使いやすくする

これらの知識は、PHPやLaravelだけでなく、Node.js、Python、クラウド、VPS、AIを活用した開発でも役立ちます。

WindowsとLinuxを区別する

WindowsはホストOS

DockerやWSLを動かしている元のWindowsを、ホストOSと呼びます。ブラウザ、Windows Terminal、VS Code、Docker DesktopなどはWindows側で起動します。

WSLはWindows上のLinux環境

WSLはWindows Subsystem for Linuxの略です。Windowsを使いながら、Linuxのファイルシステム、コマンド、開発ツールを利用できます。

このシリーズでは、WSL 2上でUbuntuを使用します。UbuntuはLinuxを利用しやすい形にまとめたLinuxディストリビューションの一つです。

• Linux：OSの中核となる仕組み
• Ubuntu：Linuxと各種コマンド、パッケージ管理などをまとめた環境
• WSL 2：Windows上でLinux環境を動かす仕組み

Dockerとコンテナを区別する

Dockerは、アプリケーションの実行環境をコンテナとして作成・実行するための仕組みです。

コンテナごとに役割を分けられます。

• phpコンテナ：Apacheでリクエストを受け、PHPを実行する
• dbコンテナ：MySQLでデータを保存する
• phpmyadminコンテナ：ブラウザからMySQLを確認する

PHPのバージョンや必要な設定をファイルへ記録できるため、別の端末でも同じ構成を再現しやすくなります。

三つの場所を意識する

環境構築では「今どこにいるか」が重要です。

場所	主に行うこと
Windows	ブラウザ、Docker Desktop、Windows Terminalを起動する
WSLのUbuntu	ファイル操作、Git、docker composeを実行する
Dockerコンテナ	PHP、Apache、MySQLなどを実行する

たとえばPHPのバージョンを確認するときは、PHPコンテナ内で実行します。

docker compose exec php php -v

docker compose exec phpは、起動中のphpサービス内で後ろのコマンドを実行するという意味です。

開発環境と本番環境を区別する

自分のPC上で開発・確認する環境を開発環境、利用者へ公開する環境を本番環境と呼びます。

今回作るのは開発環境です。学習用の簡単なパスワードやデバッグ設定を、そのまま本番環境で使用してはいけません。

開発環境
├── 自分のPCで動かす
├── コードを頻繁に変更する
└── エラーの詳細を確認する

本番環境
├── 利用者がアクセスする
├── セキュリティと安定性を優先する
└── 秘密情報やエラー詳細を公開しない

このシリーズで到達する状態

9記事を終えると、Gitで変更履歴を記録し、次のDocker Compose操作ができる状態になります。

docker compose up -d
docker compose exec php php -v
docker compose ps
docker compose logs php
docker compose down

ブラウザでは次のURLを使用します。

• PHPのWebページ：http://localhost:8000
• phpMyAdmin：http://localhost:8080

まとめ

• PHP学習にはPHP、Webサーバー、データベースなどの実行環境が必要になる
• Windows上でWSL 2を使うとLinux環境を利用できる
• DockerコンテナへPHP、MySQL、phpMyAdminの役割を分ける
• Windows、WSL、コンテナのどこで操作しているかを意識する
• 今回作るのは学習用の開発環境であり、本番環境とは設定目的が異なる

次の記事では、WindowsへWSL 2とUbuntuをインストールします。