本記事はNRIネットコム Advent Calendar 202224日目の記事です。
🎁 23日目▶▶Happy Christmas Eve! ▶▶25日目 🎄
はじめまして、入社7年目の川畑です。主にPHPを使ったWebアプリの開発・保守・運用を担当しております。
今日はクリスマスイブですね。私は枕元に現ナマが置かれる予定です。夢はないけど嬉しい。
ローカルに開発環境を構築する際にDockerを利用されている方も多いですよね。作って壊してが楽、ローカルにプログラミング言語を入れなくても開発環境が構築できるなどメリットにあふれています。そんなDockerを利用して環境を構築!人気エディタVisual Studio Code(以下、VS Code)でいざソースコードを書くぞ!と勇むと、下記のようなメッセージが通知されます。(PHP環境だとお考え下さい)
Cannot validate since a PHP installation could not be found. Use the setting 'php.validate.executablePath' to configure the PHP executable.
ローカルにPHPがないからコード補完とかできないよ、といった内容です。このようにローカル側に言語やライブラリがないと動かない拡張機能がちらほらあるため、このままだと快適な開発が行えません。せっかくDockerを使っているのに拡張機能のためにローカルにプログラミング言語やライブラリを入れるというのも気が進みませんよね。そんな時に役に立つ拡張機能をご紹介していきます。
※今回はVS Code拡張機能の紹介のため、DockerやVS Code自体の説明、導入方法は割愛します。
今回導入するのはDev Containersという拡張機能です。
Dev Containers - Visual Studio Marketplace
VS CodeでDockerコンテナにリモート接続し、Dockerコンテナ内で開発を行える素敵な拡張機能です。公式サイトによると下記のような仕組み。コンテナに接続した際にVS Code Serverがインストールされることで、ローカルのVS Codeを介してコンテナ内でのシステム開発を可能にするとのこと。拡張機能などはVS Code Server側にインストールされるため、ローカル設定に依存されずコンテナごとに管理できるようです。

引用元:https://code.visualstudio.com/docs/devcontainers/containers
VS CodeにDev Containersをインストールしておきます。
開発環境を準備します。今回は簡易的に下記のリポジトリを利用させていただきます。
docker compose up -dで各コンテナを起動します。
VS Codeでサイドバーからリモートコンテナーを選択すると起動中のコンテナが確認できます。
接続したいコンテナ名を右クリックしてAttach to Containerをクリックします。

ウィンドウが開きなおされ、画面左下にContainer <コンテナ名>が表示されていれば接続できていますので、フォルダを開くからソースコードの格納場所を指定して開きましょう。
見事コンテナに接続できました。ターミナルもコンテナに対して接続されているので、コンテナ内でコマンド実行する際にも毎回docker compose exec <コンテナ名> shと実行する必要がなくなります。
さて、この設定で拡張機能が使えるかを試してみましょう。PHPをインストールしていないと使えない拡張機能として下記を入れてみます。
PHP IntelliSense - Visual Studio Marketplace
拡張機能をインストール後phpファイルで適当に入力してみるとコード補完をしてくれるようになりました。
ネット上によく転がっている内容ではありますが、備忘もかねて簡単な使用例をご紹介させていただきました。下記気になる点もありますので、また使用感が分かったら記事を書きたいと思います。
拡張機能の管理
コンテナ接続時とリモートでは拡張機能が共有されませんので、接続先のコンテナごとにミニマムな拡張機能構成でVS Codeを使うことができます。またdevcontainer.jsonという設定ファイルで拡張機能の自動インストールも管理できるようなのでチーム開発にも向いていそうです。
Docker代替ツールへの拡張性
裏取りができているわけではないですが、Podmanでもdev containerでコンテナ接続が出来そうです。Docker Desktop離れを考えると他のツールで使えることも重要ですね。
リダイレクト時のaddAttributeとaddFlashAttributeの違い【Spring…
アーキテクチャConference 2025 に参加して~アーキテクチャの整理と向き合い方
GitHub Copilot Coding Agent を使って「AIに委託」してみた
Vertex AI 入門 Function Calling(関数呼び出し)を使ってみよう
id:h-ishikura
id:r3-yamazaki
id:r-ide-ryota
id:cqwfunp
id:s3-matsumura
id:t3-hayashi
id:Y-youyou
id:nnc-y-higashikage
id:nnc-h-yamada
id:m-danjo
id:m4-yamamoto
id:t2-furuta
id:f-masaoka
id:m-kuwano
id:nnc-m-nakayama
id:c-koyama
id:nnc-t-kita
id:s4-ito
id:m2-yokota
id:s2-shimizu
id:m2-kamimura
id:n-hidaka
id:e-unno
id:t3-kato
id:h-katsuura
id:m-fuyutsume
id:s-fujimura
id:uio8
id:naruhide-202405-netcom
id:maokurita
id:t7-watanabe
id:nnc-y-matsuo
id:n-fukase
id:r-osawa
id:y2-kitano
id:m6-yamada
id:y-obayashi
id:nnc-t-fujimoto
id:y2-shibahara
id:y-utsugi
id:m4-nakamura
id:m-terashima
id:k2-fukui
id:t-matsuzawa
id:h3-sasaki
id:h-ukita
id:r-horiuchi
id:r-sekiya
id:t-onouchi1
id:y3-shimizu
id:nnc-y-nishi
id:a2-koizumi
id:s5-takahashi
id:nnc-y-sakamoto
id:s3-sato
id:k-kanzaki
id:k2-kobayashi
id:h-kajix
id:n1-kobayashi
id:s2_ono
id:t-koshikawa
id:takurosasaki
id:nnc-k-ozawa
id:k-nishiuchi
id:r-goto
id:tan12
id:nnc-shigemoto
id:t2-tsutsumi
id:k-tamamura
id:t5-takahashi
id:k-umehara
id:t-nakayama-nnc
id:nnc-k-takata
id:a-isogawa
id:t-iwasaki_nnc
id:nnc_hayashi
id:h-hagiwara
id:n-aota
id:s-nakahira
id:k-osada
id:u-kobayashi
id:maehiranetcom
id:k2-kato
id:s3-goto
id:m-takahata
id:k-morimura
id:baba0
id:j-yoshii
id:y2-haga
id:k2-maki
id:y-funakawa
id:k4-aoki
id:m-ishigami
id:m2-toyoda
id:t-idenoue
id:r-ito
id:h-susano
id:n-tsunekawa
id:n-yamagaya
id:m-kontani
id:c2-ishikawa
id:h-iino
id:a-nagakawa
id:e-fukuda
id:r3-takahashi
id:ka-araki
id:m-tanibe
id:m-sakaii
id:k-nakatsuka
id:a-ikeshita
id:y3-imamura
id:m2-kojima
id:t-kofude
id:s-yatagai
id:t3-kawabata
id:y-sanekata
id:r-kusano
id:a-matsuno
id:y-ushizuka
id:m-takeshita
id:nnc-sato
id:r2-sasaki
id:r-tsuboi
id:nnc-yamamoto
id:k1-wakabayashi
id:s3-nakagawa
id:j-takahashi
id:n-ishimoto
id:kumazc0914
id:e-nishigaya
id:n-kuwahara
id:r-gulley
id:t-shiomi
id:nnc-k-tsujishita
id:nnc-h-nishimoto
id:m-kobatake
id:m-shimazaki2
id:nnc-k-nakano
id:y4-kobayashi
id:t-kinoshita
id:nnc-t-mochizuki
id:t2-sakamoto
id:y6-nakamura
id:y-nishimoto-blog
id:y2-kuroki
id:a-kisou
id:t-takanashi
id:r-igarashi
id:nnc-r-yamada
id:nnc-y-hanada
id:nnc-d-ootsubo
id:n-wada
id:m-toda
id:k3-watanabe
id:nnc_shibuya
id:k-horiyama
id:d-naito_nnc
id:a-ochi
id:nnc-r-nagatsuji
id:y2matsumoto-nnc
id:n-tokunaga
id:a2-sakamoto
id:t-nishibe
id:yocchan-ika
id:y10-watanabe
id:a-mitsui
id:k-zenigame
id:k5-matsumoto
id:nnc-k-kawano
id:t-fukushima
id:m3-kimura
id:t-nagasako
id:nnc-h-fujimoto
id:k3-kawashima
id:s3-masuda
id:s-fukukawa
id:y5-hirose
id:y2-ozawa
id:y7-hayashi
id:miyata-h
id:y-ohno
id:m6-nakagawa
id:m2-fujii
id:n-kojima
id:n-kawabe
id:m-kunihiro
id:a-ushiroya
id:h2-nakano
id:m1-hasegawa
id:h-kawai
id:shiota708nc
id:h-okuno
id:r-hu
id:m-yamaoka
id:k-shioya
id:k3-mizuno
id:shimbe256
id:k-horix
id:c-hayashi
id:t-yamakawa-nrinetcom
id:c-hirooka
id:nnc-r-shimizu
id:nnc_a_tomono
id:m-ajima
id:h-minatogawa
id:a-nishida
id:r3-yamada
id:nnc-m-moriguchi
id:a-kako
id:s-kanai
id:nnc-y-tahara
id:fu3ak1
id:h2-ohkubo
id:nnc-n-matsumoto
id:y-mita
id:n-hommoto
id:y-oka
id:m2-kikuchi
id:s-arai
id:s2-iwasaki
id:t-jinno
id:nnc_t_yamasawa
id:nnc_r_morita
id:nnc_m2_yamada
id:m-nakahara
id:kajino10914
id:t10-suzuki
id:y-osanai
id:k9-matsumoto
id:sho_ishi
id:s2-tada
id:y-arimitsu
id:m-ono
id:r2-fujino
id:r-sakuraba
id:t5-takeuchi
id:y2-arakawa
id:nnc-t2-hashimoto
id:m-yamanishi
id:nnc-kobayashi
id:TERU_YAMADA
id:k3-saito
id:kondo_a
id:c-sawai
id:h-hoji
id:m3-wada
id:t-tezuka
id:c2-nishimura
id:nnc-j2-baba
id:nnc-n-makita
id:nnc-k-yanagida
id:ckakizaki
id:k-minaba
id:MHnnc
id:tmktkg
id:ankjm0
id:nnc_s-koide
id:n-adachi
id:nnc-t-matsuda
id:j-takasuka
id:NaohiroOtake引用をストックしました
引用するにはまずログインしてください
引用をストックできませんでした。再度お試しください
限定公開記事のため引用できません。