{"meta":{"title":"テンプレートから codespace を作成する","intro":"新しいプロジェクトを開始する場合、空のテンプレートから codespace を作成するか、実行する作業の種類用に特別に設計されたテンプレートを選ぶことができます。","product":"Codespaces","breadcrumbs":[{"href":"/ja/codespaces","title":"Codespaces"},{"href":"/ja/codespaces/developing-in-a-codespace","title":"codespace で開発する"},{"href":"/ja/codespaces/developing-in-a-codespace/creating-a-codespace-from-a-template","title":"テンプレートからの codespace を作成する"}],"documentType":"article"},"body":"# テンプレートから codespace を作成する\n\n新しいプロジェクトを開始する場合、空のテンプレートから codespace を作成するか、実行する作業の種類用に特別に設計されたテンプレートを選ぶことができます。\n\n# GitHub Codespaces のテンプレートについて\n\n新しいプロジェクトを開始する場合、テンプレートから codespace を作成すると、開発作業をすばやく開始できます。 クラウドベースの開発環境でプロジェクトに取り組み、ファイルをクラウドに保存し、新しいリモート リポジトリに作業内容を公開することで、他のユーザーと共有したり、ローカル コンピューターに複製したりできます。\n\n空のテンプレートから開始するか、GitHub が保持するテンプレートから React や Jupyter Notebook などの一般的なテクノロジを選択するか、GitHub 上の任意のテンプレート リポジトリからコードスペースを起動できます。\n\nこれらのステップを実行してください：\n\n空のテンプレートを使う場合は、まず空のディレクトリから始めます。クラウドベースのコンピューティング リソースと、デフォルトの開発者コンテナー イメージにプレインストールされているツール、言語、ランタイム環境にアクセスできます。 他のテンプレートを使う場合は、扱うテクノロジのスターター ファイルに加え、通常は、README ファイル、`.gitignore` ファイル、カスタム環境構成を含む開発コンテナー構成ファイルなどの追加ファイルをいくつか取得します。 開発コンテナーと既定のイメージについて詳しくは、「[開発コンテナーの概要](/ja/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)」をご覧ください。\n\nたとえば、GitHub の React テンプレートから codespace を作成すると、`index.js`、`app.js`、`package.json` など、シンプルなアプリケーション向けのテンプレート ファイルが用意されているワークスペースが表示されます。 codespace が開いた直後に、開発サーバーが自動的に起動し、VS Code\nWeb クライアント内のシンプルなブラウザー タブで、実行中のアプリケーションを表示できるようになります。\n\n![VS Code\nの単純なブラウザーのスクリーンショット。GitHub の React テンプレートで Web アプリケーションをレンダリングしています。](/assets/images/help/codespaces/react-template.png)\n\nテンプレートに含まれるファイルと構成は、テンプレート リポジトリで定義されています。 codespace を作成すると、テンプレート リポジトリは codespace に複製されます。 その後、リンクは切断され、公開するまで codespace はリモート リポジトリにリンクされないようになります。\n\n> \\[!TIP]\n> ユーザーがフレームワーク、ライブラリ、またはその他のプロジェクトを使い始められるように、GitHub Codespaces で使うテンプレート リポジトリを設定できます。 詳しくは、「[GitHub Codespaces のテンプレート リポジトリを設定する](/ja/codespaces/setting-up-your-project-for-codespaces/setting-up-your-repository/setting-up-a-template-repository-for-github-codespaces)」をご覧ください。\n\n## GitHub テンプレートから codespace を作成する\n\n空のテンプレートなど、GitHub が管理するテンプレートは、\"自分の codespace\" ページから入手できます。\n\n1. 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] ページに移動します。1. テンプレートの完全な一覧を表示するには、\\[クイック スタート テンプレートの探索] セクションで **\\[すべて表示]** をクリックします。\n\n   ![\\[クイック スタート テンプレートを見つける\\] セクションのスクリーンショット。 \\[すべて見る\\] が濃いオレンジ色の枠線で強調表示されています。](/assets/images/help/codespaces/codespace-templates-see-all.png)\n\n2. 必要に応じて、テンプレートのファイルを含むテンプレート リポジトリを表示するには、テンプレートの名前をクリックします。\n\n   ![\\[クイック スタート テンプレートを見つける\\] セクションのスクリーンショット。 3 つのテンプレートが一覧表示されています。 テンプレート名がオレンジ色の枠線で囲まれています。](/assets/images/help/codespaces/react-template-name.png)\n\n3. 起動するテンプレートの名前の下にある **\\[このテンプレートを使用]** をクリックします。\n\n新しい codespace をテンプレートから作成すると、常に Visual Studio Code Web クライアントで開きます。 サポートされているエディターでは、既存の codespace を開くことができます。 詳しくは、「[既存の codespace を開く](/ja/codespaces/developing-in-codespaces/opening-an-existing-codespace)」をご覧ください。\n\n## テンプレート リポジトリから codespace を作成する\n\n任意のテンプレート リポジトリから codespace を作成し、準備ができたら新しいリポジトリに作業内容を公開できます。 テンプレート リポジトリについて詳しくは、「[テンプレートからリポジトリを作成する](/ja/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template#about-repository-templates)」をご覧ください。\n\n1. GitHub で、リポジトリのメイン ページに移動します。\n2. **\\[このテンプレートを使用する]** をクリックし、 **\\[codespace で開く]** を選びます。\n\n   ![\\[このテンプレートを使用\\] ボタンと、ドロップダウン メニューが展開されて \\[codespace で開く\\] が表示されている状態のスクリーンショット。](/assets/images/help/repository/use-this-template-button.png)\n\n   > \\[!NOTE]\n   > テンプレート リポジトリのメンテナは、テンプレート リポジトリ自体への変更をコミットしたい場合、**\\[<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 を作成する必要があります。 詳しくは、「[リポジトリの codespace を作成する](/ja/codespaces/developing-in-a-codespace/creating-a-codespace-for-a-repository#creating-a-codespace-for-a-repository)」をご覧ください。\n\n新しい codespace をテンプレートから作成すると、常に Visual Studio Code Web クライアントで開きます。 サポートされているエディターでは、既存の codespace を開くことができます。 詳しくは、「[既存の codespace を開く](/ja/codespaces/developing-in-codespaces/opening-an-existing-codespace)」をご覧ください。\n\n## GitHub\n\nのリポジトリに公開する\n\nテンプレートから作成された codespace で作業する場合、作業はクラウド内の仮想マシンに保存されますが、GitHub のリポジトリには保存されません。\n\nファイルを保存し、codespace を閉じて停止し、後で作業に戻ることができます。 通常、Git はプレインストールされ、GitHub の空のテンプレートから開始しない限り、作業ディレクトリは Git リポジトリとして自動的に初期化されます。 つまり、ファイルの追加やコミットなど、ローカル ソース管理に Git をすぐに使用できます。\n\nしかし、発行されていない codespace を削除した場合、または保持期間の間に未使用のままで自動的に削除された場合は、作業も削除されます。 作業を永続化し、他のユーザーがあなたのプロジェクトで作業できるようにするには、ご自分の codespace を GitHub のリポジトリに発行する必要があります。\n\n> \\[!NOTE]\n> 公開されていない codespace が現在 organization に対して課金されている場合、その codespace を公開すると、codespace の所有権と請求先が個人用アカウントに移動されます。 「[GitHub Codespaces の課金](/ja/billing/concepts/product-billing/github-codespaces#how-costs-are-assigned-to-a-billable-account)」をご覧ください。\n\n### VS Code\n\nから公開する\n\ncodespace で作業している場合は、VS Code Web クライアントまたはデスクトップ アプリケーションから発行できます。\n\n1. アクティビティ バーで、 **\\[ソース管理]** ビューをクリックします。\n\n   ![\\[ソース管理\\] ボタンがオレンジ色の枠線で強調されている VS Code アクティビティ バーのスクリーンショット。](/assets/images/help/codespaces/source-control-activity-bar-button.png)\n\n2. 変更をステージするには、追加または変更したファイルの横の **\\[+]** をクリックします。複数のファイルを変更してすべてをステージする場合は、**\\[Changes]** の横のものをクリックします。\n\n   ![\\[ソース管理\\] サイド バーのスクリーンショット。\\[変更\\] の右側にあるステージング ボタン (プラス記号) が濃いオレンジ色の枠線で強調表示されています。](/assets/images/help/codespaces/codespaces-commit-stage.png)\n\n   > \\[!NOTE]\n   > GitHub の空のテンプレートから開始した場合、ディレクトリを Git リポジトリとして既に初期化していない限り、変更の一覧は表示されません。 空のテンプレートから作成された codespace を発行するには、\\[ソース管理] ビューで **\\[GitHub に発行]** をクリックし、手順 5 に進みます。\n\n3. ステージングされた変更をコミットするには、行った変更を説明するコミット メッセージを入力し、 **\\[コミット]** をクリックします。\n\n   ![\\[ソース管理\\] サイド バーのスクリーンショット。コミット メッセージと、その下の \\[コミット\\] ボタンの両方が、濃いオレンジ色の枠線で強調表示されています。](/assets/images/help/codespaces/vscode-commit-button.png)\n\n4. **\\[ブランチを公開する]** をクリックします。\n\n   ![\\[ブランチを公開する\\] ボタンが表示されている \\[ソース管理\\] サイド バーのスクリーンショット。](/assets/images/help/codespaces/vscode-publish-branch-button.png)\n\n5. \\[リポジトリ名] ドロップダウンで、新しいリポジトリの名前を入力し、 **\\[GitHub プライベート リポジトリに発行]** または **\\[GitHub パブリック リポジトリに発行]** を選びます。\n\n   ![VS Code でのリポジトリ名ドロップダウンのスクリーンショット。 プライベートまたはパブリック リポジトリに発行するための 2 つのオプションが示されています。](/assets/images/help/codespaces/choose-new-repository.png)\n\n   新しいリポジトリの所有者は、codespace を作成した GitHub アカウントになります。\n\n6. 必要に応じて、エディターの右下隅に表示されるポップアップで、 **\\[GitHub で開く]** をクリックして、GitHub の新しいリポジトリを表示します。\n\n   ![\\[GitHub で開く\\] ボタンが示されている、正常に発行されたリポジトリの確認メッセージのスクリーンショット。](/assets/images/help/codespaces/open-on-github.png)\n\ncodespace が公開されると、自分の GitHub Codespaces エクスペリエンスをカスタマイズするためのさまざまなオプションにアクセスできます。 たとえば、次のようなことができます。\n\n* codespace のコンピューターの種類を変更して、作業に適したリソースを使っていることを確認します (「[codespace のマシンの種類を変更する](/ja/codespaces/customizing-your-codespace/changing-the-machine-type-for-your-codespace)」を参照)。\n* ユーザーが codespace で行ったコミットに、GitHub が自動的に GPG を使って署名できるようにします (「[GitHub Codespaces の GPG 検証の管理](/ja/codespaces/managing-your-codespaces/managing-gpg-verification-for-github-codespaces)」を参照)。\n* シークレットを codespace と共有します (「[GitHub Codespaces のアカウント固有のシークレットの管理](/ja/codespaces/managing-your-codespaces/managing-your-account-specific-secrets-for-github-codespaces)」を参照)。\n\n### GitHub\n\nから公開\n\nGitHub\nの「codespace」ページから公開されていない codespace を公開できます。 これは、ブラウザー内で現在開いていない codespace を公開する場合に便利です。 これを行うと、作業内容はリポジトリに保持されますが、既存の codespace と新しいリポジトリの間のリンクはなくなります。 ただし、新しいリポジトリに移動し、そこから codespace を作成すると、この codespace はそのリポジトリに接続されるようになります。\n\n1. 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] ページに移動します。\n\n2. 公開されていない codespace の横にある省略記号 ( **...** ) をクリックし、 **\\[新しいリポジトリに公開する]** を選びます。\n\n   ![codespace のドロップダウン メニューのスクリーンショット。\\[新しいリポジトリに公開する\\] オプションが表示されています。](/assets/images/help/codespaces/publish-to-new-repository.png)\n\n3. 新しいリポジトリの名前を選び、 **\\[パブリック]** または **\\[プライベート]** に設定して、 **\\[リポジトリの作成]** をクリックします。\n\n   ![\\[新しいリポジトリに公開する\\] ドロップダウンのスクリーンショット。\\[名前\\] フィールド、\\[パブリック\\] オプションと \\[プライベート\\] オプション、\\[リポジトリの作成\\] ボタンが表示されています。](/assets/images/help/codespaces/template-new-repository-settings.png)\n\n4. 必要に応じて、新しいリポジトリを表示するには、 **\\[リポジトリの表示]** をクリックします。\n\n## 参考資料\n\n* [リポジトリの codespace を作成する](/ja/codespaces/developing-in-a-codespace/creating-a-codespace-for-a-repository)\n* [codespace ライフサイクルについて](/ja/codespaces/about-codespaces/understanding-the-codespace-lifecycle)\n* [Codespace でソースコントロールを使用する](/ja/codespaces/developing-in-a-codespace/using-source-control-in-your-codespace)"}