VSCodeのGit連携をさらに便利に！ 拡張機能Git History、Git Graph、GitLensを解説

開発用エディタのド定番「VSCode」を使いこなそう　第8回

GitHub Codespaces

　最後に、GitHub Codespacesを紹介します。GitHub Codespacesは、GitHubが提供する開発環境です。Webブラウザ、VSCode、JetBrains IDE、GitHub CLIから利用できます。特にWebブラウザから利用すると、場所やデバイスを選ばずにリポジトリでの編集作業を全て完結できるので非常に便利です。Codespacesは、Microsoft Azure上にホストされたLinux仮想マシンで、Dockerコンテナを動作させてそこにリポジトリのクローンや開発ツールなどを配置して動作させます。技術的な詳細は、「GitHub Codespaces の概要 - GitHub Docs」を参照してください。Codespacesは、GitHub無料プランの個人ユーザの場合は月間15GB、120時間まで無料で使えます。

　では、WebブラウザからCodespacesを利用してみます。GitHubのリポジトリを表示させたWebブラウザで［ . ］（ドット）キーを押すと、GitHub Codespacesに切り替わりVisual Studio Code for the Webが起動してリポジトリでの作業を開始できます。図24は、筆者のPrivateなリポジトリです。

図24：リポジトリを表示させた状態

　ここで、［ . ］キーを押すと同じタブ内でCodespacesの画面に切り替わります（図25）。URLのホストがgithub.devとなっているように、GitHub側でホストされていることがわかります。

図25：Codespacesでリポジトリを開いた状態

　ひとまずREADME.mdが表示されていますが、エクスプローラーからファイルを選択すれば、そのファイルを編集できます（図26）。

図26：適当なファイルを開いた状態

　ファイルを編集して、リポジトリに反映させたいときは［ソース管理］アイコンをクリックしてメッセージとともにコミットしますが、通常のコミットとは異なり、コミット後にすぐにプッシュされる点に注意が必要です（図27）。

図27：コミットとプッシュ

今回登場のショートカットキー

今回登場のショートカットキー

機能	macOS	Windows
GitHub Codespacesの呼び出し（Webブラウザ）	［ . ］	［ . ］

まとめ

　今回は、前回に引き続きVSCodeのGit連携機能をGitHubを中心に紹介しました。さらにGit連携が便利になる拡張機能をいくつか紹介し、オンラインでリポジトリの管理とコード編集が可能になるGitHub Codespacesを紹介しました。

　次回は、VSCodeの備える便利な編集機能を紹介します。