https://bpstudy.connpass.com/event/230981/ 開発環境の用意にまつわる苦労は色々あると思います。準備や維持、高スペックマシンが欲しくなる、などなど・・・。8月に公開されたGitHub CodespacesとVS Code Webは、そのような苦労を軽減し開発環境の在り方を変えていく可能性があります。 VS Code Web はブラウザ版のVisual Studio Codeで、アプリ版と同じように使えます。GitHub CodespacesはGitHubが提供するRemote Container実行環境です。 今回のBPStudyでは、GitHub CodespacesとVS Code Webを使ってWebアプリケーション開発を行った経験を元に、Codespacesの仕組みや、実際の使い勝手、難点などをデモを交えながら紹介します。

1. ローカル環境を持たずに開発しよう
2021/11/29(月) #BPStudy
Takayuki Shimizukawa
VS Code Web
&
GitHub Codespaces
1

2. ● BeProud 取締役 / IT Architect
○ 受託開発（Webアプリ / 機械学習 / 数理最適化）
○ 自社サービス（connpass / PyQ / TRACERY）
○ Python研修（Python基礎、Django、Pandas、その他）
● 一般社団法人PyCon JP Association 会計理事
● Sphinx コミッター（休業中）
● 書籍執筆・翻訳
おまえ誰よ
2
@shimizukawa （清水川）

3. 開発にまつわる困り事
● ローカル端末に複数の開発環境を維持するのがツラい
● 新メンバーの環境構築は2,3日見ておこう
● 環境が壊れたので修復にまる1日かかりました
● 私の環境では動いてます
● 最近の開発マシンは最低8コア32GBメモリ欲しい
○ Dockerは6コンテナくらい起動している
○ フロントエンドのオートリビルドが重い
○ ブラウザのタブは100個くらい開いてる
○ Docker起動したままZoomすると固まる
○ IDEもコードを常時スキャンしてる
3

4. vscode.dev
● Visual Studio Code ブラウザ版
○ アプリ版とほぼ同じUI、使い勝手
● できること
○ ローカルファイルを編集
○ GitHubでレビュー、編集、コミット
○ VSCodeの設定同期
● できないこと
○ コードの実行
○ コマンドの実行
○ 関数定義の検索
○ 使えるVSCode拡張はまだ少ない
■ （日本語拡張とか）
GitHub
Repo
Visual Studio Code for the Web (Preview)
4
Chrome: vscode.dev
VSCode Web
ローカルファイル
Local File System Access API
GitHub Repositories 拡張
GitHubモード
ローカルモード
どちらかのみ可能のよう
VSCode Web
commit
D&D等でファイル複製
Chrome: vscode.dev

5. GitHub Web Editor
5
任意のRepoを表示して、 . キー押下
● VSCode WebのGitHub版
○ （むしろこっちが先）
● できること
○ GitHubでレビュー、編集、コミット
○ レビューはPR画面で . キー押下でも開始
○ VSCodeの設定同期
● できないこと
○ コードの実行
○ コマンドの実行
○ 関数定義の検索
○ 使えるVSCode拡張はまだ少ない
■ （日本語拡張とか）
GitHub
Repo
GitHub Repositories 拡張
GitHub Web Editor
commit
ローカルファイル
D&D等でファイル複製
Chrome: github.dev

6. GitHub Codespaces
Codespaces VM
● Codespaces
○ 開発環境の高速立ち上げ（数十秒〜数分）
○ 複数起動
● インターフェース
○ VSCode Web
○ VSCode（APp）
○ ssh: gh cs ssh ...
● できること
○ コード編集
○ コードの実行
○ コマンドの実行
○ 関数定義の検索
○ コンテナ起動
○ ポート転送（App or ssh）
6
devcontainer
GitHub
Repo
GitHub
Container
Registry
docker
pull
push
GitHub Web Editor
ローカルファイル
VSCode (App)
Chrome: github.dev
D&D等でファイル複製
terminal
$ gh cs ssh
clone

7. GitHub Codespaces - 価値
● 一貫性がある
○ ローカル環境（実行 OS、VM）依存のトラブルがない
○ バージョン違いのトラブルがない
● 高速
○ 環境のセットアップが早い（数十秒〜 1分程度）
○ 環境を使い捨てしやすい（使い捨ててよい様に手入れしていく）
○ 参加障壁が低い（自動セットアップが日々最新化される）
● 複数起動できる
○ ポートの競合がない（ローカルへの転送は動的に変更できる）
○ マルチトラック開発（複数プロジェクト、 Issue、PR）
● リモート作業
○ ローカルにコードを一切置かずに開発可能
○ 必要なスペックを用意、ローカル環境に依存しない
○ 起動したWebアプリのポートをチームメンバーだけに共有
● GitHubに閉じている
○ GitHub Actions (image build, CI)
○ GitHub Container Registry (image)
○ GitHub Codespaces (実行環境)
○ SSH key, Secrets, Dotfiles
7
Codespaces VM
devcontainer
PJ-A, branch1
GitHub
Container
Registry
GitHub
Repo
GitHub
Secrets, Dotfiles
for
Codespaces
GitHub
Actions
Codespaces VM
devcontainer
PJ-A, branch2
Codespaces VM
devcontainer
PJ-B, branch2

8. GitHub Codespaces - devcontainer カスタマイズ
● devcontainer.json によるチーム環境の共通化
○ devcontainer docker image指定
○ ランタイム要件（言語、バージョン、他）
○ VSCode設定、拡張機能インストール
○ 環境変数設定
○ 起動後の後処理設定（プログラム起動など）
● devcontainer image は標準を使うのが良い
○ mcr.microsoft.com/vscode/devcontainers/univers
al:linux
■ https://github.com/microsoft/vscode-dev-contai
ners/tree/main/containers/codespaces-linux#re
adme
■ 15言語入り
■ このimageはCodespacesにcacheされている
○ カスタマイズする場合は？
■ 上記をFROMに使うとcacheが効く
■ GHCRに置いておく例:
https://github.com/beproud/codespaces
8
Codespaces VM
devcontainer
GitHub
Repo
GitHub
Container
Registry
docker
pull
push
docker image cache
clone

9. GitHub Codespaces - プランと料金
● 利用可能なプラン
○ Team ($4/月/人)
○ GitHub Enterprise Cloud
● 料金
9
SKU RAM DISK Price 8hx20day 8時間x20日
2 core 4 GB 32 GB $0.18/h $28.8 3,168円
4 core 8 GB 32 GB $0.36/h $57.6 6,345円
8 core 16 GB 64 GB $0.72/h $115.2 12,690円
16 core 32 GB 128 GB $1.44/h $230.4 25,381円
32 core ?? ?? $2.88/h $460.8 50,762円

10. 私のユースケース
● 業務PC、個人PC、Chromebook、VSCode、ブラウザ、どこからでも、作業の続
きを行える
○ Macに水をかけて起動しなくなっても大丈夫
○ VSCodeの設定をGitHub経由で同期、vimキーバインドで操作
● 実装中にレビュー依頼が来た
○ 別ブランチで環境を立ち上げて動作を確認
○ さらに別案件のレビュー依頼も来たので別環境起動
● OSSのコードを読むとき、GitHub上で読むのがダルい
○ おもむろに . で GitHub Web Editor(VSCode)を起動
● 他
10

11. [参考] Gitpod - 先行する類似サービス
● Gitpod
○ https://www.gitpod.io/
● 無料枠
○ 50h/月
● pre-build あり
○ 任意のカスタムDocker Imageから即時起動
● 誰でも利用可能
○ 個人、チーム、有料無料問わず
● オープンソース
○ GKE, K3s, EKS, AKS への self-hostも可能
● 複数のGitホスティングサービスで利用可能
○ GitHub, Bitbucket, GitLab のURL先頭に gitpod.io/# を付ける
● 複数のIDEに対応
○ VSCode, VSCode Web, JetBrains系
11

12. 参考資料📚
公式
● Codespaces | GitHub
○ https://github.co.jp/features/codespaces
● GitHub Universe 2021 - GitHubブログ
○ https://github.blog/jp/2021-10-28-universe/
● GitHub Codespaces overview - GitHub Docs
○ https://docs.github.com/ja/codespaces/overview
● GitHub開発チームでのCodespacesの利用 - GitHubブログ
○ https://github.blog/jp/2021-08-30-githubs-engineering-team-moved-codespaces/
記事
● GitHub開発チームの開発環境がCodespacesに移行、セットアップ時間が45分から10秒に - GIGAZINE
○ https://gigazine.net/news/20210812-github-codespaces/
● 「GitHub Codespaces」が法人向けに提供開始 ～［.］キーでリポジトリを「Visual Studio Code」開くショートカットも - 窓の杜
○ https://forest.watch.impress.co.jp/docs/news/1344025.html
● CodespacesがEmacsとVimをサポートしてGitHubの新しい開発プラットフォームになった
○ https://www.infoq.com/jp/news/2021/08/GitHub-codespaces-transition/
● 【特集】Visual Studio Codeのブラウザ版は何ができて何ができないのか? - PC Watch
○ https://pc.watch.impress.co.jp/docs/topic/feature/1366363.html
● GitHub/GitLabとの統合用WebIDE「Gitpod」がオープンソースで公開。GitHub Codespacesを先取りする開発環境 － Publickey
○ https://www.publickey1.jp/blog/20/githubgitlabwebidegitpodgithub_codespaces.html
● Gitpodがパブリックおよびプライベートリポジトリの一般提供開始を発表
○ https://www.infoq.com/jp/news/2021/09/gitpod-general-availability/
Blog
● VSCode Remote Containerが良い - Qiita
○ https://qiita.com/d0ne1s/items/d2649801c6f804019db7
● VSCode devcontainerを使って面倒な開発環境を作る - Qiita
○ https://qiita.com/kishibashi3/items/e20aecef45ed8341e739
● GitHub Codespaces vs Gitpod – Full Stack Development Moves to the Cloud
○ https://www.freecodecamp.org/news/github-codespaces-vs-gitpod-cloud-based-dev-environments/ 12