Skip to main content

codespace で開発する

codespace では、ブラウザー、Visual Studio Code、またはコマンド シェルを使って作業できます。

GitHub Codespaces での開発について

codespace のコード開発には、お好みのツールを使うことができます。

  • GitHub CLI を使って開始され、SSH 接続を介したコマンド シェル
  • Visual Studio Code デスクトップ アプリケーション
  • Visual Studio Code のブラウザーベース バージョン

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

ブラウザー内の codespace で作業する

ブラウザー内で Codespaces を使うと、フル機能の開発エクスペリエンスを利用できます。 コードの編集、デバッグ、Git コマンドの使用、アプリケーションの実行を利用できます。

ユーザー インターフェイスの 5 つの主要コンポーネント (サイド バー、アクティビティ バー、エディター、パネル、ステータス バー) の注釈付きスクリーンショット。

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

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

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

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

    https://github.com/codespaces のページで 3 つの codespace の一覧のスクリーンショット。

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

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

VS Code 内の codespace で作業する

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

ユーザー インターフェイスの 5 つの主要コンポーネント (サイド バー、アクティビティ バー、エディター、パネル、ステータス バー) の注釈付きスクリーンショット。

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

  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 の名前をクリックします。

    https://github.com/codespaces のページで 3 つの codespace の一覧のスクリーンショット。

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

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

コマンド シェルの codespace で作業する

Note

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 を使用する」をご覧ください。