全ユーザーが使えるようになった GitHub Codespaces が凄いです。
こんにちは森田です。
先日、GitHub Universe 2022 にて GitHub Codespaces が全てのユーザーに提供されることが発表されました。
私は会社のTeamレポジトリでは使えたみたいですが、今まで個人では使えていなかったので触ったことがなかったのですが触ってみたら凄かったので概要を紹介します。
※無料プランの個人ユーザーは毎月60時間まで無料
GitHub Codespaces とは

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

アプリケーションで動く VSCode と遜色ないそのままの VSCode が展開されます。
ハイスペックなサーバーで動作しているので速いみたいです。
ノートPCより高速
https://github.co.jp/features/codespaces
プレビルドされたイメージを使って、あらゆる規模のプロジェクトの新規開発環境を数秒でスピンアップできます。GitHubでは35GBの開発イメージが10秒以内に開始できました。クラウドVMは32コア、64GB RAMまで拡張可能で、4つの地域を結ぶ低遅延接続は、ローカルマシン上で作業しているかのような快適さです。
無料プランでは2コアのプランが使えるようです。スペックアップは有料で可能です。
ブランチの切り替えや拡張機能の更新などでリロードが行われるので体感ではやはり手元の VSCode の方が速いかなと感じました。
GitHub Codespaces の起動方法
Githubのリポジトリを開いた状態で .
キーを押してください。
私は JIS キーなので「る」を押します。

するとあらビックリ、リポジトリをワークスペースとした VSCode がブラウザで開きました。GitHub Codespaces 凄いです。
拡張機能の同期
VSCode で Githubアカウントをログインしていたので GitHub Codespaces にも拡張機能が同期されていました。凄い。

一部、Gitのツリー表示する拡張やTodo拡張などは GitHub Codespaces で使えないようでした。
Git
編集したファイルは VSCode のGit からコミット可能です。
コミットした時点でリポジトリに保存(プッシュ)されます。

mainブランチを直接触ってしまわないよう注意ですね。
コミットしてしまうと自動プッシュされてしまいます。Github上のブランチプロテクトの設定が適用されるか今後確認しようと思います。
ターミナル
ターミナルは使えないようでした。

まとめ
簡単な修正であればもうエディタいらずで直接ブラウザで修正できそうですね。
しかも手元とほぼ同じ環境でできるのは素晴らしいです。
もちろんちゃんと使いこなせばブラウザプレビューや共有設定ファイルも作れるようなので、そのまま開発も可能かもしれません。
色々と試してみて応用編の記事を書ければと考えております。
GitHub Codespaces 凄いです。
Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています
弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!
求人応募してみる!