🦁
開発スタイルの１つとしてGitHub Codespacesは良さそう

2025/09/01に公開
 Github CodespacesとはGithub上でローカルのVScodeでの開発とほぼ変わらずブラウザ上で開発できるサービスです

ワンクリックですぐ開発環境が立ち上がるのでいつどこでも開発が可能になります
https://github.co.jp/features/codespaces

 料金利用時間とマシンスペックに応じて料金が発生します

 個人アカウント無料枠
Freeプラン
毎月 120コア時間 + 15GB 永続ストレージが含まれる

Proプラン
毎月 180コア時間 + 20GB 永久ストレージが含まれる


超過分は従量課金
例：2コア / 4GB RAM で 約 $0.18/時間
ストレージは $0.07/GB/月


 OrganizationアカウントTeam / Enterprise プランでは無料枠なし
利用した分がすべて組織の請求に加算される

一元管理可能
管理者が 利用ポリシー（どのリポジトリで使えるか、どのサイズまで許可するか） を設定できる
コストを抑えるために「最大マシンスペックを制限」するのが一般的

課金レート（参考値）
2コア / 4GB RAM：約 $0.18/時間
4コア / 8GB RAM：約 $0.36/時間
8コア / 16GB RAM：約 $0.72/時間
ストレージ：$0.07/GB/月

個人アカウントだと毎月無料枠があるので使い方次第ではずっと無料で開発が可能ですが、Organizationアカウントだと無料枠はなく使い始めから料金が発生するため注意が必要です
https://docs.github.com/ja/billing/concepts/product-billing/github-codespaces

 良さGithub Codespacesにはいくつかの良さがあります

 環境構築の手間を削減OSや依存関係などの違いなく一貫した環境で構築が可能になります

 どこでも開発が可能前述しましたが、クラウド上で開発環境が立ち上がるのでPC性能関係なく、ネットワークとブラウザが開けるデバイスであればどこでも開発可能です
!無料wifiがある環境やカフェなどでの使用は注意が必要です

 チーム開発がスムーズ.devcontainerを使用することでチームメンバーが同じ環境を即利用することが可能です

またプルリク毎に環境を構築出来るのでレビューがしやすくなります

 開発フローの最適化
 CI/CDとの統合同じGithubのサービスというのもあり、Github Actionsとシームレスに連携が可能です
!Github Codespacesとは別にGitub Actionsの料金が発生する可能性があるので注意が必要です

 技術の検証環境を簡単に構築・破棄が可能なので新しい技術が出てきた際にすぐ検証が可能です

また言語のバージョンアップ時のプロジェクトに与える影響の検証も可能です

 環境構築例として簡単に環境構築を行っていきます

また、Github Codespaces上でDocker Composeを使用できるように docker in docker で構築しています(でないとdocker compose upなどが使用できないため)
!Chromeなどの拡張機能としてVimiumを使用している場合はGithub CodespacesのURLでは無効化するようにしないと想定外なブラウザ操作がされます


 devcontainer.jsonを整える.devcontainer/devcontainer.json
{
  // 開発コンテナの名前
  "name": "Docker in Docker Development",
  // Dockerfileを使用してコンテナをビルド
  "build": {
    "dockerfile": "Dockerfile"
  },
  // Dev Container Featuresの設定
  "features": {
    // Docker in Docker機能を有効化
    "ghcr.io/devcontainers/features/docker-in-docker:2": {
      "moby": true,
      "dockerDashComposeVersion": "v2"
    }
  },
  // VSCodeのカスタマイズ設定
  "customizations": {
    "vscode": {
      // インストールする拡張機能
      "extensions": [
        "Github.copilot",
        "Github.copilot-chat",
        "streetsidesoftware.code-spell-checker",
        "vscodevim.vim",
        "k--kato.intellij-idea-keybindings",
        "mhutchie.git-graph",
        "eamodio.gitlens",
        "github.github-vscode-theme",
        "pkief.material-icon-theme",
        "ms-azuretools.vscode-docker"
      ],
      // VSCode設定
      "settings": {
        // Linuxターミナルプロファイル設定
        "terminal.integrated.profiles.linux": {
          "bash": {
            "path": "/bin/bash"
          }
        },
        // デフォルトターミナルをbashに設定
        "terminal.integrated.defaultProfile.linux": "bash"
      }
    }
  },
  // ホストに転送するポート番号
  "forwardPorts": [
    3000,  // Next.js開発サーバー
    5432   // PostgreSQL
  ],
  // ポートの属性設定
  "portsAttributes": {
    "3000": {
      "label": "Next.js App",
      "onAutoForward": "notify"    // 自動転送時に通知
    },
    "5432": {
      "label": "PostgreSQL",
      "onAutoForward": "silent"    // 自動転送時は通知しない
    }
  },
  // コンテナ作成後に実行するコマンド
  "postCreateCommand": "bash .devcontainer/setup.sh",
  // リモートユーザーを指定
  "remoteUser": "node"
}
そこまで難しい設定は行っていませんが、今回はdevcontainer.jsonにてインストールするvscodeの拡張機能は記述していますが設定は.vscode/settings.jsonで別に管理する形にしています
!settings.jsonは長いため記事には書きません

気になる方はこちらから

 setup.shを整える.devcontainer/setup.sh
#!/bin/bash

# GitHub Codespaces用初期セットアップスクリプト（Docker in Docker）

echo "🚀 Starting Docker in Docker development environment setup..."

# 作業ディレクトリに移動
cd /workspaces/github-codespaces

# Node.js依存関係のインストール
echo "📦 Installing Node.js dependencies..."
npm ci

# Dockerが利用可能になるまで待機
echo "⏳ Waiting for Docker to be available..."
until docker info > /dev/null 2>&1; do
    echo "Waiting for Docker daemon..."
    sleep 2
done

# 環境構築が完了した旨のメッセージを表示したい
echo "🎉 Development environment setup complete"
echo "Happy coding! 🚀"
ライブラリのインストールなどを行う簡単なシェルスクリプトになります

 Dockerfileを整える.devcontainer/Dockerfile
FROM mcr.microsoft.com/devcontainers/typescript-node:20

# Set working directory
WORKDIR /workspaces/github-codespaces
今回の場合だとそこまで必要ありませんが念の為追加しています

 起動ここまで3つのファイルが書き終わったらリポジトリにプッシュをしてGithub Codespacesを起動・環境構築をしていきます
該当のリポジトリのCodeをクリック

Codespacesと書かれたタブをクリック

Create codespace on mainをクリック
無料枠で構築しているため時間がかかる場合がありますがこれで環境構築が行われます

構築できたら下記画像のような画面が表示されます

この状態で開発が可能になっています(簡単)
ローカルサーバーを起動して表示されるか確認してみます
!.envを作成しますが各プロジェクトによって変わってくる内容なので記述はしません
docker compose up -dでローカルサーバーを起動してきます

画像だとMakefileを用意しているためmake upでコマンドを叩いています
起動すると右下にモーダルが表示されるのでブラウザーで開くをクリックしてください

すると開発するプロジェクトの画面が表示されます

簡単に環境構築されて直ぐに開発を進めることが出来ます

 まとめ記事を書いていましたが新しい開発スタイルの1つとしてGithub Codespacesは良いと思いました

個人なら無料枠で手軽に試せて、組織ならチーム開発を効率化できるのが大きなメリットなりえます

ぜひ1度触ってみてほしいサービスの1つです
Github Codespacesとは

料金

個人アカウント

Organizationアカウント

良さ

環境構築の手間を削減

どこでも開発が可能

チーム開発がスムーズ

開発フローの最適化

CI/CDとの統合

技術の検証

環境構築

devcontainer.jsonを整える

setup.shを整える

Dockerfileを整える

起動

まとめ

Discussion
