【完全ガイド】GitHub Codespaces｜VSCodeのクラウド開発環境を徹底解説

GitHub Codespacesとは？

GitHub Codespacesは、GitHubが提供するクラウドベースの開発環境サービスです。ブラウザやローカルのVSCodeから直接アクセスでき、完全な開発環境を数秒で立ち上げることができます。

従来の開発では、プロジェクトごとに必要なツールやライブラリをローカル環境にインストールする必要がありました。しかし、Codespacesを使えば、そのような手間は一切不要です。

見た目はVSCodeそのもの

GitHub Codespacesの最大の特徴の一つは、UIがVSCodeと完全に同じという点です。

実際には、Codespacesは以下の2つの方法でアクセスできます：

1. ブラウザ版: Webブラウザ上で動作するVSCode (vscode.dev)
2. ローカルVSCode: デスクトップ版VSCodeから接続

どちらを選んでも、使い勝手はほぼ同じです。ローカルVSCodeから接続すれば、完全にローカル開発と同じ感覚で作業できます。

マシンスペックと料金体系

GitHub Codespacesは従量課金制です。マシンスペックが高いほど、料金も高くなります。

利用可能なマシンタイプ

※ 料金は2025年11月時点のものです。最新の料金はGitHub公式サイトでご確認ください。

無料利用枠

料金が上がる要因

GitHub Codespacesの使い方

1. Codespaceの作成

2. 開発環境のカスタマイズ

プロジェクトのルートディレクトリに .devcontainer/devcontainer.json ファイルを配置することで、Codespace起動時に自動的に環境をセットアップできます。

{
  "name": "My Project",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "18"
    }
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ]
    }
  },
  "postCreateCommand": "npm install",
  "forwardPorts": [3000]
}

3. Codespaceの停止・削除

Claude Codeを動かす方法

GitHub Codespaces上でClaude Code（AI開発アシスタント）を使用することも可能です。

GitHub Codespacesのメリット・デメリット

メリット

デメリット

どんな人におすすめ？

まとめ

※ 出典：GitHub Codespaces公式ドキュメント