codespace で開発する

これらの作業方法についてはそれぞれ、この記事のタブを使って情報を切り替えることができます。 現在は、Visual Studio Code のタブが表示されています。

VS Code 内の codespace で作業する

GitHub Codespaces は、Visual Studio Code の完全な開発体験を提供します。 VS Code の codespace で開発をする際に、コードを編集し、デバッグし、Gti のコマンドを使うことができます。 詳しい情報については、VS Code のドキュメントを参照してください。

ユーザー インターフェイスの主要なコンポーネントは、次のとおりです。

1. サイド バー: 既定で、Explorer のこの領域にはプロジェクト ファイルが表示されます。
2. アクティビティ バー - これによりビューが表示され、それらを切り替える方法が提供されます。 ビューはドラッグアンドドロップで並べ替えることができます。
3. エディター - ここでファイルを編集します。 ファイルのタブを右クリックすると、エクスプローラーでファイルを見つけるなどのオプションにアクセスできます。
4. パネル - 出力とデバッグ情報、および統合ターミナルの既定の場所を確認できます。
5. ステータス バー - この領域には、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 に移動する

1. [コードスペース] ページで、作成したすべての使用可能なすべてのコードスペースを確認できます。 このページを表示するには、GitHub の左上隅にある を選択し、コードスペースをクリックします。 これにより、github.com/codespaces に移動します。

2. 開発する codespace の名前をクリックします。

   

または、そのリポジトリに移動し、[ コード] ボタンをクリックし、[Codespaces] タブを選択することで、特定のリポジトリの任意のコード空間を表示できます。ドロップダウン メニューには、リポジトリのすべてのアクティブなコードスペースが表示されます。