テンプレートから codespace を作成する

GitHub Codespaces のテンプレートについて

新しいプロジェクトを開始する場合、テンプレートから codespace を作成すると、開発作業をすばやく開始できます。 クラウドベースの開発環境でプロジェクトに取り組み、ファイルをクラウドに保存し、新しいリモート リポジトリに作業内容を公開することで、他のユーザーと共有したり、ローカル コンピューターに複製したりできます。

空のテンプレートから開始する、GitHub が管理するテンプレートから React や Jupyter Notebook などの一般的なテクノロジを選ぶ、または GitHub 上の任意のテンプレート リポジトリから codespace を起動できます。

空のテンプレートを使う場合は、まず空のディレクトリから始めます。クラウドベースのコンピューティング リソースと、デフォルトの開発者コンテナー イメージにプレインストールされているツール、言語、ランタイム環境にアクセスできます。 他のテンプレートを使う場合は、扱うテクノロジのスターター ファイルに加え、通常は、README ファイル、.gitignore ファイル、カスタム環境構成を含む開発コンテナー構成ファイルなどの追加ファイルをいくつか取得します。 開発コンテナーと既定のイメージについて詳しくは、「開発コンテナーの概要」をご覧ください。

たとえば、GitHub の React テンプレートから codespace を作成すると、index.js、app.js、package.json など、シンプルなアプリケーション向けのテンプレート ファイルが用意されているワークスペースが表示されます。 codespace が開いた直後に、開発サーバーが自動的に起動し、VS Code Web クライアント内のシンプルなブラウザー タブで、実行中のアプリケーションを表示できるようになります。

テンプレートに含まれるファイルと構成は、テンプレート リポジトリで定義されています。 codespace を作成すると、テンプレート リポジトリは codespace に複製されます。 その後、リンクは切断され、公開するまで codespace はリモート リポジトリにリンクされないようになります。

GitHub テンプレートから codespace を作成する

空のテンプレートなど、GitHub が管理するテンプレートは、"自分の codespace" ページから入手できます。

1. GitHub の左上隅にある を選択し、 コードスペース をクリックして、github.com/codespaces のページに移動します。

2. テンプレートの完全な一覧を表示するには、[クイック スタート テンプレートの探索] セクションで [すべて表示] をクリックします。

   

3. 必要に応じて、テンプレートのファイルを含むテンプレート リポジトリを表示するには、テンプレートの名前をクリックします。

   

4. 起動するテンプレートの名前の下にある [このテンプレートを使用] をクリックします。

新しい codespace をテンプレートから作成すると、常に Visual Studio Code Web クライアントで開きます。 サポートされているエディターでは、既存の codespace を開くことができます。 詳しくは、「既存の codespace を開く」をご覧ください。

テンプレート リポジトリから codespace を作成する

任意のテンプレート リポジトリから codespace を作成し、準備ができたら新しいリポジトリに作業内容を公開できます。 テンプレート リポジトリについて詳しくは、「テンプレートからリポジトリを作成する」をご覧ください。

1. GitHub で、リポジトリのメイン ページに移動します。

2. [このテンプレートを使用する] をクリックし、 [codespace で開く] を選びます。

   

   メモ

   テンプレート リポジトリのメンテナは、テンプレート リポジトリ自体への変更をコミットしたい場合、[ Code] ドロップダウンから codespace を作成する必要があります。 詳しくは、「リポジトリの codespace を作成する」をご覧ください。

新しい codespace をテンプレートから作成すると、常に Visual Studio Code Web クライアントで開きます。 サポートされているエディターでは、既存の codespace を開くことができます。 詳しくは、「既存の codespace を開く」をご覧ください。

GitHub

のリポジトリに公開する

テンプレートから作成された codespace で作業する場合、作業はクラウド内の仮想マシンに保存されますが、GitHub のリポジトリには保存されません。

ファイルを保存し、codespace を閉じて停止し、後で作業に戻ることができます。 通常、Git はプレインストールされ、GitHub の空のテンプレートから開始しない限り、作業ディレクトリは Git リポジトリとして自動的に初期化されます。 つまり、ファイルの追加やコミットなど、ローカル ソース管理に Git をすぐに使用できます。

しかし、発行されていない codespace を削除した場合、または保持期間の間に未使用のままで自動的に削除された場合は、作業も削除されます。 作業を永続化し、他のユーザーがあなたのプロジェクトで作業できるようにするには、ご自分の codespace を GitHub のリポジトリに発行する必要があります。

VS Code から公開する

codespace で作業している場合は、VS Code Web クライアントまたはデスクトップ アプリケーションから発行できます。

1. アクティビティ バーで、 [ソース管理] ビューをクリックします。

   

2. 変更をステージするには、追加または変更したファイルの横の [+] をクリックします。複数のファイルを変更してすべてをステージする場合は、[Changes] の横のものをクリックします。

   

   メモ

   GitHub の空のテンプレートから開始した場合、ディレクトリを Git リポジトリとして既に初期化していない限り、変更の一覧は表示されません。 空のテンプレートから作成された codespace を発行するには、[ソース管理] ビューで [GitHub に発行] をクリックし、手順 5 に進みます。

3. ステージングされた変更をコミットするには、行った変更を説明するコミット メッセージを入力し、 [コミット] をクリックします。

   

4. [ブランチを公開する] をクリックします。

   

5. [リポジトリ名] ドロップダウンで、新しいリポジトリの名前を入力し、 [GitHub プライベート リポジトリに発行] または [GitHub パブリック リポジトリに発行] を選びます。

   

   新しいリポジトリの所有者は、codespace を作成した GitHub アカウントになります。

6. 必要に応じて、エディターの右下隅に表示されるポップアップで、 [GitHub で開く] をクリックして、GitHub の新しいリポジトリを表示します。

   

codespace が公開されると、自分の GitHub Codespaces エクスペリエンスをカスタマイズするためのさまざまなオプションにアクセスできます。 たとえば、次のようなことができます。

• codespace のコンピューターの種類を変更して、作業に適したリソースを使っていることを確認します (「codespace のマシンの種類を変更する」を参照)。
• ユーザーが codespace で行ったコミットに、GitHub が自動的に GPG を使って署名できるようにします (「GitHub Codespaces の GPG 検証を管理する」を参照)。
• シークレットを codespace と共有します (「GitHub Codespaces のアカウント固有のシークレットの管理」を参照)。

GitHub

から公開

GitHub の「codespace」ページから公開されていない codespace を公開できます。 これは、ブラウザー内で現在開いていない codespace を公開する場合に便利です。 これを行うと、作業内容はリポジトリに保持されますが、既存の codespace と新しいリポジトリの間のリンクはなくなります。 ただし、新しいリポジトリに移動し、そこから codespace を作成すると、この codespace はそのリポジトリに接続されるようになります。

1. GitHub の左上隅にある を選択し、 コードスペース をクリックして、github.com/codespaces のページに移動します。

2. 公開されていない codespace の横にある省略記号 ( ... ) をクリックし、 [新しいリポジトリに公開する] を選びます。

   

3. 新しいリポジトリの名前を選び、 [パブリック] または [プライベート] に設定して、 [リポジトリの作成] をクリックします。

   

4. 必要に応じて、新しいリポジトリを表示するには、 [リポジトリの表示] をクリックします。

参考資料

• リポジトリの codespace を作成する
• codespace ライフサイクルについて
• Codespace でソースコントロールを使用する