GitHub には 「Code」ボタンから即座にクラウド開発環境を立ち上げる機能（GitHub Codespaces） が用意されています。
これを使うと、環境構築なしで VS Code 上に開発環境を一瞬で用意できるようになります。
この記事では、
- GitHub から Codespaces を立ち上げる方法
- ローカル VS Code で Codespaces を開く方法
- Codespaces の仕組み（クラウド上の VM＋Dev Container）
-
.devcontainerがある場合／ない場合の違い
をまとめて解説します。
1. Codespaces とは何か？
GitHub Codespaces は、GitHub がクラウド上に用意した開発用 VM（仮想マシン）＋ Docker コンテナです。
https://github.co.jp/features/codespaces
ポイントは：
- コードも処理もクラウド側で動く
- ローカル VS Code は UI だけを担当
- ブラウザ版 VS Code（vscode.dev）でも同じように接続できる
つまり、ローカル環境を汚さずに、クラウド上で統一された開発環境を使えるという仕組みです。
[ローカル VS Code] ← リモート接続 → [GitHub Codespaces VM]
└─ [Dev Container (Docker)]
2. GitHub から Codespaces を即座に立ち上げる方法
GitHub のリポジトリ画面で Code → Create codespace を押すだけです。
- GitHub のリポジトリを開く
- 緑の Code ボタンをクリック
- Codespaces タブを選択
- Create codespace on main をクリック
これだけで、クラウド上に開発環境が立ち上がり、ブラウザ版 VS Code が起動します。
生成された Codespace には自動的に名前が付けられます。Dockerのコンテナやk8sのPodと似ていますね。
今回私は animated broccoli となりました。
ローカルのVSCodeを使用したい場合は、その後生成されるCodespaces横の三点リーダー(…)から、Open in Visual Studio Code を選びます。
余談ですが、ブラウザ版のVSCodeを一度も立ち上げたくなかったら、
GitHubのCodespaces設定欄でデフォルトを変更することもできます。
https://github.com/settings/codespaces
なお、VSCodeとの連携は下記を参照するとよいです。
https://docs.github.com/ja/codespaces/developing-in-a-codespace/using-github-codespaces-in-visual-studio-code
3. ローカル VS Code で Codespaces を開く方法
Codespaces はブラウザだけでなく、ローカル VS Code からも接続できます。
必要なもの
- VS Code 本体
- GitHub Codespaces 拡張
- GitHub アカウントでのサインイン
開き方（2通り）
① ブラウザの Codespaces 画面から開く
Codespaces を開いた状態で右上の：
「Open in…」 → 「Open in VS Code」
をクリックすると、ローカル VS Code が起動して接続されます。
② VS Code 側から直接開く
VS Code のコマンドパレット（Ctrl+Shift+P）で：
- Codespaces: Connect to Codespace
を選ぶと、一覧から選んで接続できます。
4. .devcontainer は必須？何が動いているの？
結論：必須ではないが、あると Codespaces の環境を完全にカスタムできる。
.devcontainer がある場合
プロジェクト内の .devcontainer/ フォルダが最優先で参照されます。
例：
.devcontainer/
├─ devcontainer.json
├─ Dockerfile（任意）
└─ その他設定
これにより：
- 使用する Docker イメージ
- Node / Python / Go などのバージョン
- VS Code 拡張
- 環境変数
- ポート設定
- 起動スクリプト
などを自由に定義できます。
プロジェクト専用の開発環境を完全に再現できるのが強みです。
.devcontainer がない場合
GitHub が用意した デフォルトの Dev Container が使われます。
内容は：
- Ubuntu ベース
- Git / Node / Python / Go / Java など一般的なツール
- GitHub CLI
- よく使われる VS Code 拡張
つまり、汎用的な開発環境が自動で立ち上がります。
5. ローカル clone 開発との違い
GitHubが用意した環境で実行するという制約上、開発の分野に得意・不得意が生じます。
軽量なWeb / API / フロントエンド開発であればCodespacesが便利ですが、
ML / ゲーム 等の GPU 必須な開発は不向きといえるでしょう。
また、無料枠には使用可能時間に制限があることはデメリットです。
デフォルトでは60時間となっています。(120時間/2core)
| 項目 | ローカル clone | Codespaces |
|---|---|---|
| コードの場所 | PC | クラウド |
| 実行場所 | PC | クラウド |
| 環境構築 | 自分でセットアップ | 自動（.devcontainer） |
| オフライン | 強い | 弱い |
| GPU | 使える | 使えない |
| チーム開発 | 差異が出やすい | 全員同じ環境 |
| 利用制限 | なし | 無料枠に時間制限あり |
※ 時間は「Codespace が起動している時間」でカウントされる
（閉じ忘れに注意）
予期せぬ支払いが発生しないため、念のためGitHubのbudgetの設定を確認しておくとよいです。
(デフォルトでは無料枠を使い果たすと単に使えなくなるだけのため問題はない)
6. まとめ
- GitHub の Code → Create codespace で即座にクラウド開発環境が立ち上がる
- ローカル VS Code からも接続可能
- Codespaces は クラウド上の VM＋Dev Container
-
.devcontainerがあると環境を完全にカスタムできる - ローカル clone と Codespaces は「コードの場所」「実行場所」「環境構築」が根本的に違う