こんにちは、さち です。
普段、ウェブサイトを作るときは「Visual Studio Code(以下:VSCode)」を使っています。動作が軽く色々な機能も追加できるのに、無料で利用できる最強のコードエディターアプリです。
先日、その VSCode を使って「PHP」を編集したいことがありました。
しかし、PHP はサーバー上で動くプログラミング言語なので、PC(ローカル) 上では動きません。この状態では、PHP の「デバッグ」ができません……。
そこで今回は、VSCode で PHP をデバッグできる環境を準備していきます。
準備する環境
VSCode で PHP をデバッグできるようにするために、用意する環境はこんな感じ。
- XAMPP(PC 上にサーバーを作るアプリ)
- Xdebug(PHP の拡張モジュール)
- PHP Debug(VSCode の拡張機能)
これより便利な環境もあるかもしれませんが、今回はこの環境でいきます。
まずは、この「XAMPP」のインストールと設定をしていきましょう。
「XAMPP」は、PC 上にサーバーと同じような環境を作るアプリ(ソフトウェア)です。
XAMPP の「AMPP」は、Apache(サーバー)・MariaDB(データベース)・PHP(プログラミング言語)・Perl(プログラミング言語) の頭文字で、インストールすると、これらが使えるようになります。
「XAMPP」の準備をする
ダウンロード&インストール
- 「Apache Friends(XAMPP 配布サイト)」にアクセス。自分の PC の OS に合った「XAMPP」をダウンロードします。今回は「8.1.2」にしますが、サーバー等で使用する PHP のバージョンに合わせて選んで下さい。
- ダウンロードした「インストーラー」ファイルを開きます。(「ユーザーアカウント制御」が表示されたら、「はい」をクリック)
- 『ウィルス対策ソフトが動いていると、インストールが遅くなったり、失敗したりすることがあります。続けますか?』というダイアログが出たら、「Yes」ボタンをクリック。
- 『書き込み権限の関係上、「C:\Program Files」にインストールするのは避けて下さい』というダイアログが出るので、「OK」ボタンをクリック。
- インストールするものを選びます。基本的に全部選べばOK。
- インストール場所を選びます。理由がない限り
C:\xampp
のまま変えないで下さい。
- 使用する言語を選びます。日本語は未対応なので、「English(英語)」のままで良いです。
- 「Bitnami」について知りたい訳ではないので、チェックは入れないで次に進みます。
- インストールが終わるまで待ちます。
- 「ファイアウォール」の設定が表示されたら、「プライベート ネットワーク」だけにチェックを入れて進みます。
これで「XAMPP」のインストールは完了です。
ドキュメントルートの指定
「ドキュメントルート」はウェブブラウザーから http://localhost
または http://127.0.0.1
のアドレスでアクセスできる場所(フォルダー)で、ここで「PHP」を動かせます。
初期設定では、XAMPP をインストールした場所にある「htdocs」フォルダーになっているので、VSCode で扱いやすい場所に変更していきます。
- 「XAMPP Control Panel」を起動します。
- Apache の「Config」→「Apache (httpd.conf)」と進みます。
- 初期設定では、「DocumentRoot」の指定が
C:/xampp/htdocs
になっているので、VSCode で扱いやすい場所に書き換えて、上書き保存します。
続きの設定は、また次回
XAMPP のインストールと設定をしましたが、まだ「Xdebug」と「PHP Debug」の設定が残っています。
これ以上書くと長くなってしまうので、続きは別の記事にします。
近日中に投稿予定なので、しばらくお待ち下さい。【追記】 続きの「Xdebug」の設定についての記事を投稿しました。

コメント