もう迷わない！VS CodeとDev Containerで始める理想の開発環境

本記事はエディタウィーク 5日目の記事です。
👩‍🏫 4日目 ▶▶ 本記事👨‍🏫

はじめまして、髙田です。入社以来さまざまな拠点を転々と渡り歩いて、現在は大阪でバックエンドシステムの保守業務に携わっています。「VS Code＋Dev Containerを普段使いしているからエディタウィークにブログ出さない？」と推薦されたので初ブログに挑戦です！

今回は「エディタウィーク」の一環として、Visual Studio Code (VS Code) と Development Containers (Dev Container) を使った効率的な開発環境の構築方法についてご紹介します。この組み合わせにより、「どのマシンでも同じ環境で開発できる」という夢が現実になります。

👉 VS Code とは

Visual Studio Code (VS Code) は Microsoft が開発した無料のソースコードエディタです。Windows、macOS、Linux で動作し、デバッグ支援、Git 制御の組み込み、構文強調表示、インテリジェントなコード補完、スニペット、コードリファクタリングなどの機能を備えています。

なによりも、VS Code の最大の強みは拡張機能（Extensions）のエコシステムです。数千もの拡張機能により、ほぼすべてのプログラミング言語やフレームワークをサポートでき、自分の好みにカスタマイズすることができます。

👉 Dev Container とは

Development Containers（Dev Container）は VS Code の機能で、Docker コンテナ内で完全な開発環境を実行できるようにします。これにより次のようなメリットが生まれます。

環境の一貫性: 「私のマシンでは動くのに…」という問題から解放されます
素早いセットアップ: 新しいメンバーが参加しても、すぐに開発を始められます
プロジェクト間の分離: 異なるプロジェクトで異なるバージョンの言語やツールを使っても衝突しません
クリーンな環境: ホストマシンを汚さずに開発できます

👉 Dev Container の設定方法

前提条件

VS Code がインストールされていること
docker コマンドが使える状態であること
VS Code の「Remote Development」拡張機能パックがインストールされていること

基本的な設定手順

プロジェクトのルートディレクトリに .devcontainer ディレクトリを作成します
このディレクトリ内に以下の2つのファイルを作成します
- devcontainer.json: VS Code の設定ファイル
- Dockerfile: コンテナイメージの定義ファイル
```
  # フォルダ構成
  .
  └── .devcontainer
      ├── devcontainer.json
      └── Dockerfile
```

👉 実際の使い方

VS Code でプロジェクトフォルダを開きます
コマンドパレット（Ctrl+Shift+P または Cmd+Shift+P）を開きます
「Remote-Containers: Reopen in Container」を選択します
VS Code が自動的にコンテナをビルドし、その中でプロジェクトを開きます

これで、完全に分離された一貫性のある開発環境の中で作業ができるようになります！

👉 高度な使い方

Dev Container Templates を活用する

Dev Container Templates は、さまざまな開発環境のための事前定義されたテンプレートです。これらを使用することで、開発環境のセットアップが劇的に簡単になります。

Templates のメリット

迅速な環境構築: 一からDev Container設定を書く必要がなく、すぐに開発を始められます
ベストプラクティスの適用: Microsoft や各言語のエキスパートによって最適化された設定が利用できます
継続的な更新: コミュニティによって維持・更新されるため、常に最新の状態が保たれます

現時点で100以上のテンプレートが用意されており、Node.js、Python、Ruby、Go など、さまざまな言語やフレームワークに対応しています。

参考: Available Dev Container Templates

Templates の使い方

VS Code でプロジェクトを開きます
コマンドパレットから「Remote-Containers: Add Development Container Configuration Files...」を選択します
テンプレートのリストから適切なものを選びます（例：Node.js、Python、Ruby など）
必要に応じてバージョンやオプションを選択します
自動的に .devcontainer ディレクトリと設定ファイルが生成されます

Dev Container Features を活用する

Dev Container Features は、開発環境に特定の機能や追加ツールをモジュール方式で追加できる仕組みです。

Features のメリット

モジュール性: 必要な機能だけを選んで追加できます
再利用性: 複数のプロジェクトで同じ機能セットを簡単に適用できます
メンテナンス性の向上: 機能ごとに分離されているため、更新や問題解決が容易です
カスタマイズの柔軟性: 自分専用の Features を作成・共有することも可能です

Features については、1000以上が公開されています。「python」「Docker (Docker-in-Docker)」「act (via Github Releases)」あたりは普段から愛用しています。

参考: Available Dev Container Features

よく使われる Features の例

Docker-in-Docker: コンテナ内でDockerを実行可能に
Git: 最新のGitとよく使われるGit LFSなどの拡張機能を追加
GitHub CLI: GitHub操作をターミナルから行うためのツール
Python: 特定バージョンのPythonと一般的なパッケージのインストール

Features の追加方法

devcontainer.json の features セクションで必要な機能を指定します。

{
  "name": "My Dev Environment",
  "image": "mcr.microsoft.com/devcontainers/base:bullseye",
  "features": {
    "ghcr.io/devcontainers/features/common-utils:2": {},
    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
    "ghcr.io/devcontainers-extra/features/act:1": {},
    "ghcr.io/devcontainers-extra/features/actionlint:1": {},
    "ghcr.io/devcontainers/features/python:1": {
      "version": "3.11"
    }
  }
}

この例では、Python 3.11、Docker-in-Docker、GitHubワークフローのサポート機能をコンテナに追加しています。

VS Code Extensions を活用する

VS Code Extensions は、VS Code の機能を拡張するためのプラグインです。これにより、特定の言語やフレームワークに特化した機能を追加できます。

VS Code Extensions のメリット

機能の拡張: コード補完、デバッグ、Linting など、さまざまな機能を追加できます
カスタマイズ性: 自分の好みに合わせてエディタを調整できます
コミュニティのサポート: 多くの開発者が作成した拡張機能が利用でき、問題解決が容易です
プロジェクトごとの管理: プロジェクトごとに必要な拡張機能を選択してインストールできます
軽量化: 必要な拡張機能だけを選んでインストールできるため、エディタのパフォーマンスを最適化できます

VS Code Extensions を入れすぎると、起動が遅くなったり、メモリを大量に消費したりすることがあります（クラッシュして作成途中のファイルが消えて、よく泣かされました）。

VS Code Extensions は Dev Container 内でも利用可能で、「○○作業用の Dev Container にはこの Extensions を、XX作業用にはこの Extensions を」といった具合に、プロジェクトごとに必要なものだけを選んでインストールできます。

Dev Container Templates には、あらかじめ推奨される Extensions が設定されています。これを利用することで、開発環境のセットアップがさらに簡単になります。

参考例: Template Python Docker (DinD) の Extensions 設定
参考例: Template Markdown の Extensions 設定

🫵 まとめ

VS Code と Dev Container の組み合わせは、開発環境の一貫性と再現性を確保するための強力なツールです。特に Templates と Features の活用により、環境構築の工数を大幅に削減しながらも、高度にカスタマイズされた開発環境を実現できます。

チーム開発では特に威力を発揮し、「環境構築」という名のよくある時間の無駄を大幅に削減できます。新しいメンバーがプロジェクトに参加しても、単に「Reopen in Container」を実行するだけで、完全に設定された開発環境が手に入ります。また、個人開発においても、プロジェクトごとに環境を分離できるため、依存関係の衝突に悩まされることがなくなりプロジェクトの立ち上げも素早く行えます。

皆さんもぜひ VS Code と Dev Containers、そして Templates と Features を活用して、より効率的な開発ライフを始めてみてください！個人開発・チーム開発どちらにもおすすめです。