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

新しいプロジェクトを開始する場合、空のテンプレートから codespace を作成するか、実行する作業の種類用に特別に設計されたテンプレートを選ぶことができます。

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

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

空のテンプレートから開始したり、React や Jupyter Notebook などの一般的なテクノロジのGitHubによって管理されているテンプレートから選択したり、GitHubの任意のテンプレート リポジトリからコードスペースを起動したりすることができます。

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

たとえば、 GitHubの React テンプレートからコードスペースを作成すると、 `index.js`、 `app.js`、 `package.json`などの単純なアプリケーション用のテンプレート ファイルを含むワークスペースに到着します。 コードスペースが開くと、開発サーバーが自動的に起動し、 VS Code Web クライアント内の単純なブラウザー タブで実行中のアプリケーションを表示できるようになります。

![VS Code
の単純なブラウザーのスクリーンショット。GitHub の React テンプレートで Web アプリケーションをレンダリングしています。](/assets/images/help/codespaces/react-template.png)

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

> \[!TIP]
> ユーザーがフレームワーク、ライブラリ、またはその他のプロジェクトを使い始めるのに役立つよう、 GitHub Codespacesで使用するテンプレート リポジトリを設定できます。 詳しくは、「[GitHub Codespaces のテンプレート リポジトリを設定する](/ja/codespaces/setting-up-your-project-for-codespaces/setting-up-your-repository/setting-up-a-template-repository-for-github-codespaces)」をご覧ください。

## GitHub テンプレートからコードスペースを作成する

空のテンプレートを含め、 GitHubによって管理されるテンプレートは、\[コードスペース] ページから使用できます。

1. GitHub の左上隅にある <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-three-bars" aria-label="Open global navigation menu" role="img"><path d="M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75ZM1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5Z"></path></svg> を選択し、**<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-codespaces" aria-label="codespaces" role="img"><path d="M0 11.25c0-.966.784-1.75 1.75-1.75h12.5c.966 0 1.75.784 1.75 1.75v3A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm2-9.5C2 .784 2.784 0 3.75 0h8.5C13.216 0 14 .784 14 1.75v5a1.75 1.75 0 0 1-1.75 1.75h-8.5A1.75 1.75 0 0 1 2 6.75Zm1.75-.25a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5a.25.25 0 0 0-.25-.25Zm-2 9.5a.25.25 0 0 0-.25.25v3c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-3a.25.25 0 0 0-.25-.25Z"></path><path d="M7 12.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path></svg> コードスペース**をクリックして、[github.com/codespaces](https://github.com/codespaces) の \[Your codespaces] ページに移動します。

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

   ![\[クイック スタート テンプレートを見つける\] セクションのスクリーンショット。 \[すべて見る\] が濃いオレンジ色の枠線で強調表示されています。](/assets/images/help/codespaces/codespace-templates-see-all.png)

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

   ![\[クイック スタート テンプレートを見つける\] セクションのスクリーンショット。 3 つのテンプレートが一覧表示されています。 テンプレート名がオレンジ色の枠線で囲まれています。](/assets/images/help/codespaces/react-template-name.png)

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

テンプレートから新しいコードスペースを作成すると、 Visual Studio Code Web クライアントで常に開かれます。 サポートされているエディターでは、既存の codespace を開くことができます。 詳しくは、「[既存の codespace を開く](/ja/codespaces/developing-in-a-codespace/opening-an-existing-codespace)」をご覧ください。

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

任意のテンプレート リポジトリから codespace を作成し、準備ができたら新しいリポジトリに作業内容を公開できます。 テンプレート リポジトリについて詳しくは、「[テンプレートからリポジトリを作成する](/ja/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template#about-repository-templates)」をご覧ください。

1. GitHub で、リポジトリのメイン ページに移動します。
2. **\[このテンプレートを使用する]** をクリックし、 **\[codespace で開く]** を選びます。

   ![\[このテンプレートを使用\] ボタンと、ドロップダウン メニューが展開されて \[codespace で開く\] が表示されている状態のスクリーンショット。](/assets/images/help/repository/use-this-template-button.png)

   > \[!NOTE]
   > テンプレート リポジトリのメンテナーであり、テンプレート リポジトリ自体に変更をコミットする場合は、 **<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-code" aria-label="code" role="img"><path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path></svg> Code** ドロップダウンからコードスペースを作成する必要があります。 詳しくは、「[リポジトリの codespace を作成する](/ja/codespaces/developing-in-a-codespace/creating-a-codespace-for-a-repository#creating-a-codespace-for-a-repository)」をご覧ください。

テンプレートから新しいコードスペースを作成すると、 Visual Studio Code Web クライアントで常に開かれます。 サポートされているエディターでは、既存の codespace を開くことができます。 詳しくは、「[既存の codespace を開く](/ja/codespaces/developing-in-a-codespace/opening-an-existing-codespace)」をご覧ください。

## GitHub 上のリポジトリに公開

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

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

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

> \[!NOTE]
> 公開されていない codespace が現在 organization に対して課金されている場合、その codespace を公開すると、codespace の所有権と請求先が個人用アカウントに移動されます。 「[GitHub Codespaces の課金](/ja/billing/concepts/product-billing/github-codespaces#how-costs-are-assigned-to-a-billable-account)」をご覧ください。

### VS Code から発行

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

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

   ![\[ソース管理\] ボタンがオレンジ色の枠線で強調されている VS Code アクティビティ バーのスクリーンショット。](/assets/images/help/codespaces/source-control-activity-bar-button.png)

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

   ![\[ソース管理\] サイド バーのスクリーンショット。\[変更\] の右側にあるステージング ボタン (プラス記号) が濃いオレンジ色の枠線で強調表示されています。](/assets/images/help/codespaces/codespaces-commit-stage.png)

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

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

   ![\[ソース管理\] サイド バーのスクリーンショット。コミット メッセージと、その下の \[コミット\] ボタンの両方が、濃いオレンジ色の枠線で強調表示されています。](/assets/images/help/codespaces/vscode-commit-button.png)

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

   ![\[ブランチを公開する\] ボタンが表示されている \[ソース管理\] サイド バーのスクリーンショット。](/assets/images/help/codespaces/vscode-publish-branch-button.png)

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

   ![VS Code でのリポジトリ名ドロップダウンのスクリーンショット。 プライベートまたはパブリック リポジトリに発行するための 2 つのオプションが示されています。](/assets/images/help/codespaces/choose-new-repository.png)

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

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

   ![\[GitHub で開く\] ボタンが示されている、正常に発行されたリポジトリの確認メッセージのスクリーンショット。](/assets/images/help/codespaces/open-on-github.png)

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

* codespace のコンピューターの種類を変更して、作業に適したリソースを使っていることを確認します (「[codespace のマシンの種類を変更する](/ja/codespaces/customizing-your-codespace/changing-the-machine-type-for-your-codespace)」を参照)。
* GitHubが GPG を使用して、コードスペースで行ったコミットに自動的に署名できるようにします ([GitHub Codespaces の GPG 検証の管理](/ja/codespaces/managing-your-codespaces/managing-gpg-verification-for-github-codespaces) を参照)。
* シークレットを codespace と共有します (「[GitHub Codespaces のアカウント固有のシークレットの管理](/ja/codespaces/managing-your-codespaces/managing-your-account-specific-secrets-for-github-codespaces)」を参照)。

### GitHub から発行

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

1. GitHub の左上隅にある <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-three-bars" aria-label="Open global navigation menu" role="img"><path d="M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75ZM1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5Z"></path></svg> を選択し、**<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-codespaces" aria-label="codespaces" role="img"><path d="M0 11.25c0-.966.784-1.75 1.75-1.75h12.5c.966 0 1.75.784 1.75 1.75v3A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm2-9.5C2 .784 2.784 0 3.75 0h8.5C13.216 0 14 .784 14 1.75v5a1.75 1.75 0 0 1-1.75 1.75h-8.5A1.75 1.75 0 0 1 2 6.75Zm1.75-.25a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5a.25.25 0 0 0-.25-.25Zm-2 9.5a.25.25 0 0 0-.25.25v3c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-3a.25.25 0 0 0-.25-.25Z"></path><path d="M7 12.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path></svg> コードスペース**をクリックして、[github.com/codespaces](https://github.com/codespaces) の \[Your codespaces] ページに移動します。

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

   ![codespace のドロップダウン メニューのスクリーンショット。\[新しいリポジトリに公開する\] オプションが表示されています。](/assets/images/help/codespaces/publish-to-new-repository.png)

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

   ![\[新しいリポジトリに公開する\] ドロップダウンのスクリーンショット。\[名前\] フィールド、\[パブリック\] オプションと \[プライベート\] オプション、\[リポジトリの作成\] ボタンが表示されています。](/assets/images/help/codespaces/template-new-repository-settings.png)

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

## 参考資料

* [リポジトリの codespace を作成する](/ja/codespaces/developing-in-a-codespace/creating-a-codespace-for-a-repository)
* [codespace ライフサイクルについて](/ja/codespaces/about-codespaces/understanding-the-codespace-lifecycle)
* [Codespace でソースコントロールを使用する](/ja/codespaces/developing-in-a-codespace/using-source-control-in-your-codespace)