Note
- JetBrains IDE での GitHub Codespaces の使用は現在 パブリック プレビュー 段階であり、変更される可能性があります。
- JetBrains IDE のコードスペースで作業するには、JetBrains ゲートウェイのリリース 2023.3.* または 2024.1.* を使用する必要があります。
GitHub Codespaces での開発について
codespace のコード開発には、お好みのツールを使うことができます。
- GitHub CLI を使って開始され、SSH 接続を介したコマンド シェル
- JetBrains Gateway を介した、JetBrains IDE のいずれか
- Visual Studio Code デスクトップ アプリケーション
- Visual Studio Code のブラウザーベース バージョン
これらの作業方法についてはそれぞれ、この記事のタブを使って情報を切り替えることができます。 現在は、Visual Studio Code の Web ブラウザー バージョンのタブが表示されています。
ブラウザー内の codespace で作業する
ブラウザー内で Codespaces を使うと、フル機能の開発エクスペリエンスを利用できます。 コードの編集、デバッグ、Git コマンドの使用、アプリケーションの実行を利用できます。
ユーザー インターフェイスの主要なコンポーネントは、次のとおりです。
- サイド バー: 既定で、Explorer のこの領域にはプロジェクト ファイルが表示されます。
- アクティビティ バー - これによりビューが表示され、それらを切り替える方法が提供されます。 ビューはドラッグアンドドロップで並べ替えることができます。
- エディター - ここでファイルを編集します。 ファイルのタブを右クリックすると、エクスプローラーでファイルを見つけるなどのオプションにアクセスできます。
- パネル - 出力とデバッグ情報、および統合ターミナルの既定の場所を確認できます。
- ステータス バー - この領域には、codespace とプロジェクトに関する有用な情報が表示されます。 たとえば、ブランチ名、設定されたポートなどです。 GitHub Codespaces での最善の体験のためには、Google Chrome あるいは Microsoft Edge のような Chromium ベースのブラウザーを使うことをおすすめします。詳しくは、「GitHub Codespaces クライアントのトラブルシューティング」をご覧ください。
リポジトリの codespace をカスタマイズする
リポジトリ用に作成された codespace は、リポジトリの開発コンテナー構成を作成または更新してカスタマイズできます。 これは、codespace 内から行うことができます。 開発コンテナー構成を変更した後、codespace の Docker コンテナーを再構築することで、変更を現在の codespace に適用できます。 詳しくは、「開発コンテナーの概要」を参照してください。
Codespace をパーソナライズする
ドットファイル リポジトリと同期設定を使用して、作成した任意の codespace の codespace 環境のアスペクトをパーソナライズすることができます。 パーソナライズには、シェルの環境設定や追加のツールが含まれます。 詳しくは、「アカウントの GitHub Codespaces をパーソナライズする」を参照してください。
Codespace からアプリケーションを実行する
アプリケーションのテストとデバッグのために、codespace中のポートをフォワードできます。 また、ポート プロトコルを管理し、組織内またはパブリックにポートを共有することもできます。 詳細については、「codespace でのポートの転送」を参照してください。
変更をコミットする
新しいコードであれ、構成の変更であれ、codespace に変更を加えたら、その変更をコミットしたくなるでしょう。 リポジトリに構成の変更をコミットすると、このリポジトリから codespace を作成する他の人が、同じ構成を使用するようにできます。 VS Code 拡張機能の追加など、行うすべてのカスタマイズをすべてのユーザーが使えるようになります。
このチュートリアルでは、テンプレート リポジトリから codespace を作成したので、codespace 内のコードはまだリポジトリに格納されていません。 現在のブランチを GitHub に発行することで、リポジトリを作成できます。
詳しくは、「Codespace でソースコントロールを使用する」をご覧ください。
Visual Studio Code Command Palette を使用する
Visual Studio Code Command Palette を使用すると、Codespaces と Visual Studio Code で多くの機能を利用したり、管理したりすることができます。 詳しくは、「GitHub Codespaces で Visual Studio Code のコマンド パレットを使う」を参照してください。
既存の codespace に移動する
-
[コードスペース] ページで、作成したすべての使用可能なすべてのコードスペースを確認できます。 このページを表示するには、GitHub の左上隅にある を選択し、コードスペースをクリックします。 これにより、github.com/codespaces に移動します。
-
開発する codespace の名前をクリックします。
または、そのリポジトリに移動し、[ コード] ボタンをクリックし、[Codespaces] タブを選択することで、特定のリポジトリの任意のコード空間を表示できます。ドロップダウン メニューには、リポジトリのすべてのアクティブなコードスペースが表示されます。
これらの作業方法についてはそれぞれ、この記事のタブを使って情報を切り替えることができます。 現在は、Visual Studio Code のタブが表示されています。
VS Code 内の codespace で作業する
GitHub Codespaces は、Visual Studio Code の完全な開発体験を提供します。 VS Code の codespace で開発をする際に、コードを編集し、デバッグし、Gti のコマンドを使うことができます。 詳しい情報については、VS Code のドキュメントを参照してください。
ユーザー インターフェイスの主要なコンポーネントは、次のとおりです。
- サイド バー: 既定で、Explorer のこの領域にはプロジェクト ファイルが表示されます。
- アクティビティ バー - これによりビューが表示され、それらを切り替える方法が提供されます。 ビューはドラッグアンドドロップで並べ替えることができます。
- エディター - ここでファイルを編集します。 ファイルのタブを右クリックすると、エクスプローラーでファイルを見つけるなどのオプションにアクセスできます。
- パネル - 出力とデバッグ情報、および統合ターミナルの既定の場所を確認できます。
- ステータス バー - この領域には、codespace とプロジェクトに関する有用な情報が表示されます。 たとえば、ブランチ名、設定されたポートなどです。
VS Code の使用方法の詳しい情報については、VS Code ドキュメントでユーザー インターフェイス ガイドを参照してください。
codespace には VS Code から直接接続できます。 詳しくは、「Visual Studio Code で GitHub Codespaces を使用する」を参照してください。
トラブルシューティング情報については、「GitHub Codespaces クライアントのトラブルシューティング」をご覧ください。
リポジトリの codespace をカスタマイズする
リポジトリ用に作成された codespace は、リポジトリの開発コンテナー構成を作成または更新してカスタマイズできます。 これは、codespace 内から行うことができます。 開発コンテナー構成を変更した後、codespace の Docker コンテナーを再構築することで、変更を現在の codespace に適用できます。 詳しくは、「開発コンテナーの概要」を参照してください。
Codespace をパーソナライズする
ドットファイル リポジトリと同期設定を使用して、作成した任意の codespace の codespace 環境のアスペクトをパーソナライズすることができます。 パーソナライズには、シェルの環境設定や追加のツールが含まれます。 詳しくは、「アカウントの GitHub Codespaces をパーソナライズする」を参照してください。
Codespace からアプリケーションを実行する
アプリケーションのテストとデバッグのために、codespace中のポートをフォワードできます。 また、ポート プロトコルを管理し、組織内またはパブリックにポートを共有することもできます。 詳細については、「codespace でのポートの転送」を参照してください。
変更をコミットする
新しいコードであれ、構成の変更であれ、codespace に変更を加えたら、その変更をコミットしたくなるでしょう。 リポジトリに構成の変更をコミットすると、このリポジトリから codespace を作成する他の人が、同じ構成を使用するようにできます。 VS Code 拡張機能の追加など、行うすべてのカスタマイズをすべてのユーザーが使えるようになります。
このチュートリアルでは、テンプレート リポジトリから codespace を作成したので、codespace 内のコードはまだリポジトリに格納されていません。 現在のブランチを GitHub に発行することで、リポジトリを作成できます。
詳しくは、「Codespace でソースコントロールを使用する」をご覧ください。
Visual Studio Code Command Palette を使用する
Visual Studio Code Command Palette を使用すると、Codespaces と Visual Studio Code で多くの機能を利用したり、管理したりすることができます。 詳しくは、「GitHub Codespaces で Visual Studio Code のコマンド パレットを使う」を参照してください。
既存の codespace に移動する
-
[コードスペース] ページで、作成したすべての使用可能なすべてのコードスペースを確認できます。 このページを表示するには、GitHub の左上隅にある を選択し、コードスペースをクリックします。 これにより、github.com/codespaces に移動します。
-
開発する codespace の名前をクリックします。
または、そのリポジトリに移動し、[ コード] ボタンをクリックし、[Codespaces] タブを選択することで、特定のリポジトリの任意のコード空間を表示できます。ドロップダウン メニューには、リポジトリのすべてのアクティブなコードスペースが表示されます。
これらの作業方法についてはそれぞれ、この記事のタブを使って情報を切り替えることができます。 現在は、JetBrains IDE のタブが表示されています。
JetBrains IDE 内の codespace で作業する
JetBrains IDE で GitHub Codespaces を使うには、JetBrains Gateway が既にインストールされている必要があります。 JetBrains Gateway のインストールの詳しい情報については、JetBrains Web サイトを参照してください。
お好みの JetBrains IDE を使って、codespace で作業できます。 codespace を作成したら、JetBrains Gateway アプリケーションを使って、お好みの IDE で codespace を開くことができます。
JetBrains IDE を使って codespace で開発する際は、コードの編集、デバッグ、Git コマンドの使用ができます。 さまざまな JetBrains IDE について詳しくは、JetBrains ドキュメントを参照してください。
IntelliJ IDEA ユーザー インターフェイス
GitHub Codespaces ドキュメントでは、代表的な JetBrains IDE として IntelliJ IDEA を使っています。 JetBrains IDE が異なると、レイアウトが異なる場合があります。
ユーザー インターフェイスの主要なコンポーネントは、次のとおりです。
- ナビゲーション バー - 現在選ばれているファイルまたはディレクトリへのパスが表示されています。 ナビゲーション バーの右側にあるボタンを使って、プロジェクトのビルド、実行、デバッグ、Git コマンドの実行など、さまざまなアクションを実行して、変更をコミットおよびプッシュします。
- プロジェクト ツール ウィンドウ - プロジェクトの構造が表示され、エディターでファイルを開くことができます。
- GitHub Codespaces ツール ウィンドウ - ツール ウィンドウの左側にあるバーで GitHub Codespaces プラグインをクリックすると表示されます。 表示名やコンピューターの種類など、codespace に関する情報が表示されます。 このツール ウィンドウの上部にあるボタンを使用すると、次の操作を実行できます。
- アクティブな codespace のツール ウィンドウの詳細を更新する
- "自分の codespace" Web ページを表示する
- codespace 作成ログを表示する
- エディター - ここでファイルを編集します。 ファイルのタブを右クリックすると、タブを新しいウィンドウに移動するなどのオプションにアクセスできます。
- ターミナル - これは、メイン ウィンドウの下部にあるツール ウィンドウ バー (ステータス バーのすぐ上) で [ターミナル] をクリックすると表示されます。 統合ターミナルを使うと、専用のターミナル アプリケーションに切り替えることなく、コマンド ライン タスクを実行できます。
- ステータス バー - ステータス バーの左側にあるアイコンにカーソルを合わせると、ツールの一覧が表示されます。 アイコンをクリックして、ツール ウィンドウ バーを非表示または表示します。 ステータス バーの右側には、現在の Git ブランチなど、プロジェクトに関する情報が表示されます。
IntelliJ IDEA ユーザー インターフェイスについて詳しくは、IntelliJ IDEA の JetBrains ドキュメントを参照してください。
リポジトリの codespace をカスタマイズする
リポジトリ用に作成された codespace は、リポジトリの開発コンテナー構成を作成または更新してカスタマイズできます。 これは、codespace 内から行うことができます。 開発コンテナー構成を変更した後、codespace の Docker コンテナーを再構築することで、変更を現在の codespace に適用できます。 詳しくは、「開発コンテナーの概要」を参照してください。
Codespace をパーソナライズする
ドットファイル リポジトリを使って、作成する codespace に対して codespace の環境面をパーソナライズできます。 詳しくは、「アカウントの GitHub Codespaces をパーソナライズする」を参照してください。
変更をコミットする
codespace に変更を加えたら、新しいコードであっても、構成の変更であっても、変更内容をコミットしてプッシュします。 リポジトリに変更をプッシュすることで、このリポジトリから codespace を作成する他の人の構成が同じになるように保証できます。 これは、リポジトリ用に作成された codespace の構成を変更するために行うカスタマイズが、そのリポジトリを使うすべての人に利用可能になるということでもあります。
詳しくは、「Codespace でソースコントロールを使用する」を参照してください。
参考資料
これらの作業方法についてはそれぞれ、この記事のタブを使って情報を切り替えることができます。 現在は、GitHub CLI のタブが表示されています。
コマンド シェルの codespace で作業する
GitHub CLI の詳細については、「GitHub CLI について」を参照してください。
GitHub CLI を使って新しい codespace を作成するか、既存の codespace を開始して、それに SSH 接続できます。 接続したら、お好みのコマンドライン ツールを使ってコマンド ラインで作業できます。
GitHub CLI をインストールし、GitHub アカウントで認証したら、コマンド gh codespace [<SUBCOMMAND>...] --help を使ってヘルプ情報を参照できます。 または、https://cli.github.com/manual/gh_codespace で同じ参照情報を表示することもできます。
詳しくは、「GitHub CLI で GitHub Codespaces を使用する」を参照してください。