『Open in GitHub Codespaces』バッヂを追加して、Dev Container環境をブラウザですぐ動かせるようにする！

以前の記事で、Dev Container を使うと、開発環境をすぐに用意することができました。
https://zenn.dev/takeyuweb/articles/fb18d3fb54d369

ところで、ブラウザで利用できる統合開発環境 GitHub Codespaces では Dev Container を利用することができます。

Dev Container設定を配置したリポジトリは、特別な操作なしに GitHub Codespacesでいつでも Dev Container を動かすことができます。

https://youtu.be/4gat7umAu-U

GitHub Codespaces とは？

クラウドでホストされているVSCodeで、ローカルにDockerなど環境構築不要です。ブラウザか、Codespaces拡張をインストールしたVSCodeから接続して利用できます。

詳しくは他の方の記事や公式のドキュメント参照
https://docs.github.com/ja/codespaces
https://qiita.com/uikou/items/1feb83865f9d638807ad
https://zenn.dev/search?q=Github%2520Codespaces&page=1&source=articles

『Open in GitHub Codespaces』バッヂを追加する

公式ドキュメントに手順があります。
https://docs.github.com/ja/codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge

1. GitHubにpushする
2. リポジトリの Code > Codespaces > … > New with options... をクリック
3. Create codespace for ... ページのURLを控える
4. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](3で控えたURL) をREADMEなどに追加する
5. GitHubにpushする

以上でGitHubのリポジトリページから直接GitHub Codespacesで開くことができるようになりました。

実例

https://github.com/takeyuweb/my_app

まとめ

GitHubから直接ブラウザでVSCodeが開いて触ってみられる体験はとても面白いですね。
たとえばデモやサンプルプログラムを確認するとき、手元にcloneして試すのはとても面倒ですが、これならその場ですぐ試せて快適ですね。