Zenn
👾

GitHub Codespaces 使ってみた

2025/01/28に公開

最近「AWS Serverless Patterns Workshop Using LocalStack」を試していて、簡単に環境をセットアップして作業を開始できる GitHub Codespaces が今更ながら便利だと思ったので試しに使ってみました。

https://zenn.dev/kakakakakku/books/aws-serverless-pattern-workshop-using-localstack


GitHub Codespaces とは

codespace は、クラウドでホストされている開発環境です。
構成ファイルをリポジトリにコミットすることで、GitHub Codespaces のプロジェクトを
カスタマイズできます (コードとしての構成とよく呼ばれます)。これにより、プロジェクトの
すべてのユーザーに対して繰り返し可能な codespace 構成が作成されます。

https://docs.github.com/ja/codespaces/overview#what-is-a-codespace

GitHub Codespaces は、GitHub が提供するクラウドベース型のコードエディターです。GitHub リポジトリの環境をクラウドに完全に構築し、Web ブラウザからやローカルの VS Code から直接利用できます。

GitHub Codespaces の利点

  1. 事前構成済みの環境

    • 各リポジトリに適したツールや設定が用意され、全ユーザーが同じ環境で作業できるため、環境関連の問題が発生しにくい。
  2. 高リソースへのアクセス

    • ローカル環境の処理能力や記憶域が不足していても、リモートで十分なリソースを使って作業可能。
  3. どこからでも作業

    • Webブラウザがあれば、どのデバイスからでも作業を再開できる。
  4. エディターの柔軟性

    • ブラウザ版の VS Code か、デスクトップアプリを選んで作業できる。
  5. 複数プロジェクト対応

    • 異なるプロジェクトやブランチでの作業を分離し、影響を最小化できる。
  6. 共同作業の強化

    • Live Share を活用し、チームメイトとリアルタイムでコラボレーション可能。
  7. アプリのプレビューと共有

    • ポート転送機能でアプリを公開し、Pull Request 前に変更を共有できる。
  8. 新しいフレームワークの学習

    • クイックスタートテンプレートで、迅速に環境を構築し、新しい技術を試せる。

GitHub Codespaces の料金体系は、主にコンピューティング時間とストレージ使用量に基づいています。個人アカウントの Free および Pro プランには、毎月一定の無料使用枠が含まれています。

料金について

プラン ストレージ (GB/月) コア時間 (時間/月)
個人用アカウント用の GitHub 15 120
GitHub Pro 20 180

コンピューティング料金:

マシンタイプ コア数 料金 (USD/時間)
Basic 2 $0.18
Standard 4 $0.36
Premium 8 $0.72
Premium Plus 16 $1.44
Ultimate 32 $2.88

ストレージ料金:

ストレージ使用量 料金 (USD/GB/月)
1 GB $0.07

無料枠を超過した場合、上記の料金が適用されます。詳細については、GitHub の公式ドキュメントをご参照ください。

(参考)本記事に記載されているサービスの料金体系は、執筆時点の情報に基づいており、今後変更される可能性があります。最新の情報については、公式ウェブサイトやサービス提供元の最新アナウンスをご確認ください。

始め方

とりあえず自身でリポジトリを作成する場合の使い方を試してみます。

リポジトリの追加と Codespace の作成、Codespace の確認

  1. 新しいリポジトリを作成:

    • GitHub のホーム画面右上にある「+」ボタンをクリックし、「New repository」を選択します。
    • リポジトリ名を入力し、必要に応じて説明や公開/非公開設定を選択します。
    • 「Create repository」ボタンをクリックしてリポジトリを作成します。
  2. リポジトリにコードを追加:

    • 作成したリポジトリに README.md ファイルを追加するか、ローカルのコードをアップロードします。
    • 必要に応じてリポジトリを初期化し、必要なファイルをプッシュしてください。
  3. Codespace を作成:

    • リポジトリのページに移動します。
    • 「Code」ボタンをクリックします。
    • 「Codespaces」タブを選択し、「Create Codespace」をクリックします。
    • Codespace 環境が起動し、ブラウザ上の VS Code で利用可能になります。

      このブラウザ上の VS Code で通常通り開発が行えます!
  4. 作成済みの Codespace の確認:

    • リポジトリのページに移動します。
    • 「Code」ボタンをクリックします。
    • 「Codespaces」タブを選択し、「...」をクリックします。
    • 「Manage codespaces」をクリックします。
       

最後に

すでに存在しているリポジトリでも「Create Codespace」で VS Code が立ち上がるのでいちいちローカルに clone して確認する手間が省けて便利ですね!
それ以外にも devcontainer.json を追加することで構成にツール、ランタイム、またはライブラリを追加じた状態で環境が立ち上がるようです!メンバー間での環境差異がでなくてとても便利ですね。
※立ち上げたインスタンスはアカウント毎に分離されています。

詳しくはこちら
https://docs.github.com/ja/enterprise-cloud@latest/codespaces/setting-up-your-project-for-codespaces/configuring-dev-containers/adding-features-to-a-devcontainer-file

GitHub Codespaces は、ブラウザだけでコードを確認したり、チーム内で環境を揃えて開発をする場合に役立つツールです。ぜひこの機会に使用を検討してみてください。

参考

https://speakerdeck.com/dzeyelid/vs-code-con-2023-github-codespaces-introduction

レスキューナウテックブログ

Discussion

ログインするとコメントできます