ぺやろぐ

ぺやろぐ

焼きそばよりチャーハンが好き。

【PHP】XAMPP + VSCodeでPHPの開発環境を作った(Windows)

スポンサーリンク

↑「$_POST」使っとるやん!
どうも、ぺやんぐ(@peyangu485)です。

今回は、最近触り始めたPHPを家でも触れるように環境構築したことを記事にまとめておきます。
仕事で触り始めたのはいいけど、環境構築にそれなりの時間がかかってしまって悔しかったのもある。

今回の構築時間は、記事に書きながらでも2時間もかかってないと思われる。
集中してやれば30分ぐらいでできそう。

現場ではデバッグまでできるようになるまで、半日かかったのに……。


XAMPPのインストール

ここを参考にXAMPPのインストール

qiita.com

http://127.0.0.1/dashboard/phpinfo.php

は、開いたままにしておいてください。

こんな感じで表示されます。




VSCodeでPHPの開発環境を作る

次は、ここを参考にVSCodeでPHPの開発環境を作ります。

www.elp.co.jp

ただ、抜けがあったり、古かったりするのでこちらの方でざっくりとした説明をしていきます。

シンタックスハイライトとかは飛ばして……。


PHP IntelliSense,PHP Debugのインストール

VSCodeの拡張機能(VSCode左側の四角のアイコン)で、PHP IntelliSenseをインストールします。
ついでに、PHP Debugもインストールしておきます。


PHP IntelliSenseの準備

xamppでインストールしている場合、php.iniがすでにありますし、「extension=php_openss1.dll」も「extension_dir=ext」も有効化されているはずです。
一応確認はしてください。

VSCodeの「設定」に3行追加するものは、元記事のままで良くて、「ファイル」→「基本設定」→「設定」から開いた、setting.jsonに以下を追記。

setting.jsonに追加するもの

Dのとこはインストールしているドライブに各々で変更してください。
とりあえず、xampp\phpにあります。

次に、language-serverをインストールするところですが、これをする前に「composer.phar」をダウンロードします。

下記よりダウンロードして、xampp/phpに配置しておく。(最新版でいいと思います)

getcomposer.org

C:\Users\ユーザ名\AppData\Roaming\Composer\composer.jsonを確認し、記載がなければ以下を追記。

composer.json

ここは元記事と同じです。(てか、だれがやっても同じ)

次に、コマンドプロンプト(管理者)で実行するのは下記のコマンドになります。

「D:\xampp\php\php.exe D:\xampp\php\composer.phar global update」

ドライブは各々で…。

問題なければこんな表示になります。




デバッグ準備

で、ここから、デバッグ準備に入ります。

まず、VSCodeでワークスペースの作成、フォルダの追加。
デバッグ機能は、ワークスペース内でないと機能しないようです。

適当にphpファイル作成。
今回は、「testだよ」を出力するファイルを用意しました。(d:\xampp\htdocs直下に置きました。)

そこから、PHP Debugのインストール
そこからは記事通りでいいが、「serverSourceRoot」と「localSourceRoot」が緑波線になってしまうので、「pathMappings」を使います。

launch.jsonに記述するpathMappingsについて

1つ目がサーバーのphpファイルを置くディレクトリで、2つ目がローカルのphpファイルを置くディレクトリになってます。
「Listen for XDebug」の方に追記して、デバッグを開始すると、「127.0.0.1/test.php」につないだ時にブレークポイントで止まります。(XDebug入れてからですよ!)


XDebugの準備

XDebugは、バージョンによっては合わない可能性があるので、下記のサイトを参考に、自環境のPHPに合った、XDebugのdllを落としておきましょう。
phpinfo()の結果をペーストするだけで、判明するとかなんかすごい!

https://samuraishockdo.info/16-code/123-xdebug-doesnot-work.htmlsamuraishockdo.info

落としたdllは「php\ext」の中に置いておきます。

php.iniに以下を追記。

php.iniに追記するXDebugの内容

Apacheを再起動して、最初に開いておいたphpinfo.phpをリロードします。
xdebugの記述があれば、OKです。


終わり

127.0.0.1/test.phpにつなぐとこうなりました。

いけた!
ブレークポイントで止まることも確認しました。

これで、XAMPP + VSCodeでのPHPの開発環境が整いました。
XAMPPを使わず、nginxでも構築しましたが、ほぼ似たような順序になりました。

ただ、XAMPPの方が早いですね。
すごく楽です。

今回、参考にさせていただいた元記事の執筆者には100万の感謝を!