【VSCode】PHP のデバッグ環境を準備する その1(XAMPP 編)

この記事は約4分で読めます。
記事内に広告が含まれています

XAMPP ロゴ

こんにちは、さち です。

普段、ウェブサイトを作るときは「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」の準備をする

ダウンロード&インストール

  1. Apache Friends(XAMPP 配布サイト)」にアクセス。自分の PC の OS に合った「XAMPP」をダウンロードします。今回は「8.1.2」にしますが、サーバー等で使用する PHP のバージョンに合わせて選んで下さい。
    ダウンロード
  2. ダウンロードした「インストーラー」ファイルを開きます。(「ユーザーアカウント制御」が表示されたら、「はい」をクリック)
    インストーラー
  3. 『ウィルス対策ソフトが動いていると、インストールが遅くなったり、失敗したりすることがあります。続けますか?』というダイアログが出たら、「Yes」ボタンをクリック。
    ダイアログ
  4. 『書き込み権限の関係上、「C:\Program Files」にインストールするのは避けて下さい』というダイアログが出るので、「OK」ボタンをクリック。
    ダイアログ
  5. インストールするものを選びます。基本的に全部選べばOK。
    インストーラー
  6. インストール場所を選びます。理由がない限り C:\xampp のまま変えないで下さい。
    インストーラー
  7. 使用する言語を選びます。日本語は未対応なので、「English(英語)」のままで良いです。
    インストーラー
  8. 「Bitnami」について知りたい訳ではないので、チェックは入れないで次に進みます。
    インストーラー
  9. インストールが終わるまで待ちます。
    インストーラー
  10. 「ファイアウォール」の設定が表示されたら、「プライベート ネットワーク」だけにチェックを入れて進みます。
    Winodws Defender ファイアウォール

これで「XAMPP」のインストールは完了です。

ドキュメントルートの指定

「ドキュメントルート」はウェブブラウザーから http://localhost または http://127.0.0.1 のアドレスでアクセスできる場所(フォルダー)で、ここで「PHP」を動かせます。

初期設定では、XAMPP をインストールした場所にある「htdocs」フォルダーになっているので、VSCode で扱いやすい場所に変更していきます。

  1. XAMPP Control Panel」を起動します。
    XAMPP Control Panel
  2. Apache「Config」→「Apache (httpd.conf)と進みます。
    Apache (httpd.conf)
  3. 初期設定では、「DocumentRoot」の指定が C:/xampp/htdocs になっているので、VSCode で扱いやすい場所に書き換えて、上書き保存します。
    httpd.conf
編集した「httpd.conf」ファイルは、C:\xampp\apache\conf フォルダーにあります。自分の好きなエディターで開きたい場合は、「エクスプローラー」から直接開いて下さい。

続きの設定は、また次回

XAMPP のインストールと設定をしましたが、まだ「Xdebug」と「PHP Debug」の設定が残っています。

これ以上書くと長くなってしまうので、続きは別の記事にします。

近日中に投稿予定なので、しばらくお待ち下さい。
【追記】 続きの「Xdebug」の設定についての記事を投稿しました。

【VSCode】PHP のデバッグ環境を準備する その2(Xdebug 編)
こんにちは、さち です。この VSCode で PHP をデバッグできる環境の準備として、前回の記事では XAMPP の設定をしました。その続きとして、今回は「Xdebug」の設定をしていきます。

コメント

タイトルとURLをコピーしました