「Visual Studio Code」と「WSL」＋「Docker」をもっと便利に使いこなそう

はじめに

アプリケーション開発において、エディターや統合開発環境(IDE)は欠かせないツールです。シンプルなエディターでもコードを書くことはできますが、補完機能やデバッグ機能が充実したIDEを使えば開発効率が大幅に向上します。IDEにはさまざまな選択肢があり、IntelliJ IDEA、Eclipse、Visual Studioなどが有名です。その中でも「Visual Studio Code」(以下、VS Code)は無料で利用でき、軽量かつ拡張性が高いことから、多くの開発者に支持されています。

特にVS CodeはWSL(Windows Subsystem for Linux)との親和性が高く、Linux環境での開発をスムーズに行うことができます。さらに「Docker」向けの拡張機能(Extensions)を導入すれば、コンテナ開発をより手軽に行うことができます。

本記事では、VS CodeのDocker拡張機能を活用し、どのようにコンテナ開発を効率化できるのかを解説します。実際の開発で役立つ具体的な活用方法も紹介するので、初心者でも無理なくDocker開発を始められるようになります。VS Codeを使いこなして、WSL + Docker環境をより便利に活用しましょう。

Visual Studio Codeとは

Visual Studio Code(VS Code)はMicrosoftが開発し、独自のライセンスのもと提供されているコードエディターです。公式に配布されているバージョンはMicrosoft Software License Termsに基づいています。軽量ながら高機能で多くのプログラミング言語をサポートしており、初心者から上級者まで幅広いユーザーに利用されています。特に拡張機能が充実しており、好みに合わせたカスタマイズが可能です。

VS Codeはシンタックスハイライト、オートコンプリート、デバッグ機能、Git連携などを標準で備え、快適な開発環境を提供します。またWindows、macOS、Linuxのすべての主要なOSで動作し、WSLやDockerとの統合もスムーズに行えます。

さらに、リモート開発機能を使うことで、WSL内の環境やコンテナー内のコードを直接編集できるのが大きな特徴です。

VS Codeのインストールと起動

VS Codeは、WSLやDockerと組み合わせることで効率的な開発環境を構築できます。ここでは、VS Codeのインストール方法と起動方法を紹介します。

VS Codeのインストール

まず、公式サイトからVS Codeをダウンロードします。Windows版のインストーラー(.exeファイル)を取得し、ダブルクリックしてインストーラーを起動したら、画面の指示にしたがってインストールを完了させてください。

VS Codeの起動

インストールが完了すると、スタートメニューやデスクトップのショートカットからVS Codeを起動できます。また、PowerShellから以下のコマンドを実行すると、VS Codeでカレントディレクトリを開けます。

これでVS Codeの準備が整いました。次は、WSLやDockerとの連携を進めていきましょう。

※以降ではVS Codeのテーマをライトテーマに変更しています。

拡張機能とは

拡張機能とは、文字通りエディターを拡張し、機能を追加するための仕組みです。アドオンやプラグインなどと呼ばれることもあります。VS Codeにはデフォルトでも多くの機能が備わっていますが、拡張機能を追加することで特定のプログラミング言語のサポートを強化したり、開発の効率を向上させたりできます。

例えば、Docker関連の開発をする場合は、「Docker」拡張機能を導入するとコンテナの管理やDockerfileの補完が可能になります。また、WSLを活用するなら「WSL」拡張機能を入れることで、シームレスにWSL環境で開発できるようになります。

拡張機能は、VS Codeの「拡張機能(Extensions)」ビューから簡単に検索・インストールが可能です。用途に応じて必要な拡張機能を導入することで、より快適な開発環境を構築できます。

拡張機能のインストール

例として、Dockerの拡張機能をインストールしてみましょう。VS Codeで拡張機能をインストールする場合、左側のアクティビティバーから拡張機能ビューを開き、検索バーにインストールしたい拡張機能の名前を入力して検索します。ここでは「docker」と入力します。

検索結果にDockerの拡張機能が表示されたら、「インストール」ボタンを押してインストールします。インストールが完了すると自動的に有効化され、すぐに使用できるようになります。

コンテナを動かしてみよう

Docker拡張機能(以降、VS Codeの拡張機能のことを指す)でコンテナを起動し、操作の流れを確認しましょう。ここでは、公式のNginxイメージを使ってWebサーバーを起動してみます。

ただし、Docker拡張機能にはコンテナイメージの取得機能がありません。そこで、あらかじめターミナルからイメージを取得しておきましょう。メニュー >　ターミナル > 新しいターミナルからターミナルを起動して、以下のコマンドを実行してください。

イメージが取得できたら、アクティビティサイドバーを確認してみましょう。Dockerビューのイメージセクションに「nginx」が表示されているはずです。

次に、取得したnginxイメージを使ってコンテナを起動します。イメージセクションからnginxイメージを右クリックし、「Run」を選択して起動します。

コンテナが起動すると、コンテナセクションに起動したコンテナが表示されます。

起動しているコンテナが確認できたら、Webブラウザでhttp://localhostにアクセスして、Nginxのデフォルトページが表示されることを確認します。

これで、VS Codeの拡張機能を使ってDockerコンテナが起動できました。確認できたら、起動中のコンテナを停止してみましょう。コンテナセクションから起動中のコンテナを右クリックして「Stop」を選択します。

Dockerfileからコンテナを起動する

Dockerfileを使ってコンテナを起動する方法も、VS Codeの拡張機能を使えば簡単に実行できます。ここでは、簡単なWebアプリケーションを作成し、Dockerfileを使ってコンテナを起動してみましょう。

Webアプリケーションの作成

動作確認用にFastAPIの公式サイトにあるサンプルコードを使って、簡単なWebアプリケーションを作成します。以下のコードをmain.pyというファイル名で保存してください。

次に、FastAPIを動作させるために必要なライブラリを記述したrequirements.txtを以下の内容で作成します。

Dockerfileの作成

Webアプリケーションを動かすコンテナをビルドするため、Dockerfileを作成します。最終的に、以下のような内容になります。

それでは、Dockerfileの内容を見ていきましょう。今回は、Pythonの3.8をベースイメージとしています。

作業ディレクトリを/appに設定し、requirements.txtをコピーしてパッケージをインストールします。先に依存関係をインストールすることで、キャッシュを活用してビルド時間を短縮できます。Dockerfileを作成する際によく使われるテクニックの1つです。

最後に、FastAPIアプリケーションを起動するために必要なコマンドを記述します。EXPOSEでポート番号を指定し、CMDでアプリケーションを起動します。

コンテナイメージのビルド

作成したDockerfileからコンテナイメージをビルドします。[Ctrl]キー＋[Shift]キー＋[P]キーを押してコマンドパレットを開き、「Docker Images: Build Image...」を選択してください。続いてコンテナイメージに付ける名前を入力します。デフォルトでは開いているディレクトリの名前が自動的に設定されていますが、分かりやすい名前に変更することをオススメします。ここではdocker-sampleとしました。

ビルドが完了すると、イメージセクションにdocker-sampleのイメージが追加されます。

イメージを右クリックし、「Run」を選択してコンテナを起動すると、コンテナセクションに起動したコンテナが表示されます。Webブラウザでhttp://localhost:8000/docsにアクセスするとFastAPIのデフォルトページが表示されることを確認します。

リモート開発環境とは

単に「リモート開発環境」と聞くと、社内サーバーやクラウド上に立てたインスタンスへSSHなどで接続して、コマンドを操作しながら利用する開発環境を想像するかもしれません。

VS Code上でリモート開発環境とは、ローカルPC上のVisual Studio Codeを通じてリモートマシンに接続し、VS Codeの使い勝手をそのままにリモートマシン上の開発環境を操作することを指します。VS Codeのリモート開発環境は接続先を選ばないため、WSLやDockerコンテナ、クラウド上の仮想マシンなど、さまざまな環境と接続しながら、ローカルPC上のVS Codeの使い勝手を損なうことなくリモート環境で開発ができます。

詳しくは、VS Codeの公式ドキュメント「VS Code Remote Development」を参照してください。

Dev Containersとは

Dockerコンテナをリモート開発環境として利用可能にする拡張機能が「Dev Containers」です。

Dev Containersは、Dockerコンテナ上にリモート開発環境を立ち上げてくれるだけのツールではなく、設定ファイル(.devcontaienrs)を使ってコンテナ内の環境設定や拡張機能のインストールを自動化するなど、開発環境の構築を効率化する機能も備わっています。

リモート開発環境へ接続してみよう

Dockerの拡張機能をインストールした同じ手順で「Dev Containers」拡張機能をインストールします。

先ほど立ち上げたコンテナへ接続してみましょう。コンテナセクションから起動中のコンテナを右クリックします。Dev Containers拡張機能がインストールされる前には表示されていなかった「Attach Visual Studio Code」が新しく追加されているので、これを選択します。

接続前に確認ダイアログが表示されます。外部の公開リポジトリから取得したコードでDev Containersを起動する場合、悪意を持ったコードを実行される可能性があります。今回は自分で作成したコンテナなので問題なしとして「Got it」をクリックします。

リモート開発環境としてコンテナに接続され、VS Codeのウィンドウが開きます。左下の青いバーに「Container docker-sample:latest...」と表示されていれば、リモート開発環境に接続されています。

このようにリモート開発環境上でVS Codeが利用できるため、直接ローカル環境に実行環境やツールをインストールする必要な環境構築ができます。

VS CodeからWSLに接続してみよう

WSLを直接利用したいときには、WSL拡張機能を使うと便利です。まずは、WSL拡張機能をインストールします。拡張機能ビューで「WSL」を検索し、検索結果に表示されたWSLをインストールします。

インストールできたら、アクティビティバーにあるリモートエクスプローラービューを開きます。リモートエクスプローラービューの上部にあるリストダウンから「WSL Targets」を選択します。

新しく環境を追加します。リモートエクスプローラービューの左上にある「+」をクリックして、接続先のWSLディストリビューションを選択します。今回は「Ubuntu 24.04 LTS」を選択します。

インストールが完了すると、リモートエクスプローラービューにWSLディストリビューションが表示されます。もし表示されない場合は、リロードボタンをクリックしてみてください。

セクション上にWSLディストリビューションが表示されたら、右クリックして「Connect in New Window」を選択します。接続が完了すると、リモートエクスプローラービューにWSLディストリビューションが表示されます。

これで、VS CodeからWSLに接続できました。

おわりに

本記事ではVS CodeのDocker拡張機能を活用し、WSL＋Docker環境をより便利に使う方法や、VS CodeからWSL環境に直接接続する方法を解説しました。VS Codeを使いこなすことで、コンテナやWSLを活用したリモート開発環境を簡単に構築できます。コマンド操作に不慣れな方でも、VS Codeの直感的なインターフェイスを活かし、効率的な開発環境を整えてスムーズに開発を進められます。