SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

VSCodeでPHP開発環境を構築しよう

開発用エディタのド定番「VSCode」を使いこなそう 第16回

基本的な開発環境(2)

PHP Intelephense

 PHP Intelephenseは、組み込みのPHPサポート機能に替わる高機能な言語サーバの拡張機能です。コード補完、パラメーターのヒント、ワークスペース内のシンボルの参照・検索、フォーマッター、公式ドキュメントの参照などの機能が提供されます。

 基本的に無償で利用でき、有償ライセンス(Premium)では、インタフェースなどの実装の検索、名前の変更、コード折りたたみ、型定義・宣言への移動、PHPドキュメントブロック生成などの機能を利用できます。

[NOTE]組み込み言語サポート機能の無効化

 この拡張機能をインストールしたら、組み込みのPHPサポート機能の一部は無効にしておき、既にPHP関連の拡張機能がインストールされていたら無効化するかアンインストールしておきます。機能がバッティングして、使い勝手が悪かったり、思わぬ不具合の原因となるためです。なお、組み込みの拡張機能では、「PHP言語機能」のみを無効にしておきます。「PHPの基本言語サポート」は、PHP Intelephenseがサポートしないシンタックスハイライト機能を提供するので、有効のままにしておきます。

 例えばコード補完は、組み込みの機能に比べて大きく強化されており、引数の詳細な説明や、公式マニュアルへのリンクも表示されます(図5)。

図5:コード補完(PHP Intelephense)
図5:コード補完(PHP Intelephense)

PHP Debug

 PHP Debugは、PHPプログラムの実行やデバッグの機能を提供します。プログラムの実行およびデバッグは、エディタビューの右上にあるで行えます。

 ただし、PHP Debugの利用にはXDebugのインストールが必要なので、XDebugのインストール手順が案内されたページ「Xdebug: Documentation » Installation」にアクセスし、該当するプラットフォームの方法に従ってインストールを済ませます。基本的には、PIE(PHPの拡張機能インストーラ)を使ってXDebugをインストールします。

 XDebugをインストールしたら、php.iniファイルを編集して、XDebugによるデバッグを有効にします。利用中のPHPが使うphp.ini(例えば/usr/local/etc/php/8.5/php.ini)に、リスト1の行を追加します。

リスト1:XDebugを使う設定(php.ini)
; PIE automatically added this to enable the xdebug/xdebug extension
; priority=90
zend_extension=xdebug	PIEにより設定済み

xdebug.mode = debug
xdebug.start_with_request = yes

 VS Codeが実行中であったら再起動し、ウインドウ右上の右から小さな[∨]をクリックして表示されるメニューから[Run PHP File]で実行、[Debug PHP File]でデバッガによる実行が可能です(図6)。

図6:プログラムのデバッグ
図6:プログラムのデバッグ

WordPress開発

 PHPは、有名なコンテンツ管理システム(CMS)であるWordPressの開発言語です。本体はもとより、プラグインやテーマといった拡張機能はPHPで記述されているので、カスタマイズしたい、プラグインやテーマを開発したいとなれば、PHPによるコーディングが求められます。VS Codeにおいても、多数の拡張機能が提供されていますが、その中から本稿では表5に挙げる拡張機能を紹介します。

表5:WordPress開発関連の拡張機能
拡張機能 パブリッシャー ID 概要
WordPress Snippets Elev8 Web Studio wordpresstoolbox.wordpress-toolbox WordPressのためのスニペットコレクション
WordPress Playground for VS Code WordPress Playground WordPressPlayground.wordpress-playground VS CodeのためのWordPress実行環境

[NOTE]同名の拡張機能に注意

 WordPress Snippetsには、似たような名前のWordPress Snippetもありますが、更新が何年も前から途絶えています。パブリッシャーやIDに気を付けて、間違ってインストールしないように注意しましょう。

WordPress Snippets

 WordPress Snippetsは、WordPressのあらゆる関数、クラス、定数についてのスニペットを提供する拡張機能です。コード補完機能を備えて、全ての関数に最小2文字の省略形入力ができるなど、コード入力における便宜が図られています。WordPressのテンプレートタグや関数はとにかく数が多いので、必須ともいえる拡張機能でしょう(図7)。

図7:WordPress Snippetsのコード補完
図7:WordPress Snippetsのコード補完

 省略形入力では、例えばgtiと入力すると候補としてget_the_ID関数が表示されます(図8)。

図8:WordPress Snippetsの省略形入力
図8:WordPress Snippetsの省略形入力

 なお、前述のPHP Intelephenseには「ワークスペース内の関数」を自動補完する機能があるので、WordPressインストールフォルダ以下をワークスペースにする場合は、PHP IntelephenseだけでWordPressの関数も自動補完もできます(WordPressの関数は、全てインストールフォルダ以下のPHPファイル内で定義されているため)。

 しかし、ワークスペースを作成しない場合やテーマフォルダ以下のみをワークスペースに設定する場合などはPHP Intelephenseによる自動補完が働かないので、基本的にはWordPress Snippetsをインストールしておいた方がよいでしょう。

WordPress Playground

 WordPress Playgroundは、ブラウザだけでWordPressの実行環境を構築できるサービスです。WebAssembly技術をベースにしており、PHPインタプリタ自身をWebAssemblyバイナリ化することで、PHPはもとより、Webサーバやデータベースもインストール不要というサービスです。

 本来であればXAMPPなどによる環境構築が必要なところを、ブラウザのみで開発を開始できるのがメリットです。拡張機能WordPress Playground for VS Codeは、VS CodeにおいてWordPress Playgroundを利用するためのフロントエンドです。

[NOTE]Windowsでは動作しない可能性がある

 公式ドキュメントによると、WordPress Playground for VS Codeは、macOSでのみテストされており、Windowsではうまく動かないだろうとされています。このため、Windows環境で試す場合には不具合の生じる可能性のあることを念頭に置いた方がよいでしょう。

 WordPress Playground for VS Codeをインストールすると、アクティビティバーにWordPressアイコンが表示されるようになります。ここをクリックするとプライマリサイドバーがWordPress Playground for VS Codeの説明になるので、[Start WordPress Server]をクリックするとWordPress Playgroundサーバが起動します(図9)。

図9:WordPress Playgroundサーバの起動
図9:WordPress Playgroundサーバの起動

 このとき、ワークスペースの構成に応じて、動作モードが変化します。表6に挙げる動作モードがサポートされています(上から順にマッチ判定する)。

表6:WordPress Playground for VS Codeの動作モード
モード 構成 概要
plugin 「Plugin Name:」を含むPHPファイルが存在 プラグイン開発
theme style.cssが存在 テーマ開発
wp-content pluginsとthemesディレクトリがある コンテンツページ開発
wordpress wp-config.phpが存在 WordPress全体
index index.phpが存在 index.phpをリクエストする
playground いずれでもない 仮想的なWordPressサイトを起動

 サーバが起動している間、プライマリサイドバーは以下のように変化し、[Stop WordPress Server]でサーバを停止できるほか、PHPバージョンの切り替え、WordPressバージョンの切り替えが可能で、動作モードも表示されます。

図10:WordPress Playgroundサーバの停止(その他の情報と設定)
図10:WordPress Playgroundサーバの停止(その他の情報と設定)

 ブラウザには、図11のように作業中のページ(ここでは動作モードはwp-content)が表示されます。

図11:WordPress Playgroundによるページ表示(動作モードはwp-content)
図11:WordPress Playgroundによるページ表示(動作モードはwp-content)

次のページ
Webアプリ開発

この記事は参考になりましたか?

開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/23381 2026/02/25 08:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング