Skip to main content

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

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

Note

GitHub Codespaces は、octocorp.ghe.com など、GHE.com のサブドメインでは利用できません。

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

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

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

注: マネージド ユーザー アカウント がある場合、GitHub Codespaces には GitHub のパブリック テンプレートは使用できません。組織か企業が所有しているか、お金を払っている codespace しか作成できないためです。 詳しくは、「Enterprise Managed Users について」を参照してください。

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

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

VS Code の単純なブラウザーのスクリーンショット。GitHub の React テンプレートで Web アプリケーションをレンダリングしています。

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

ヒント: ユーザーがフレームワーク、ライブラリ、またはその他のプロジェクトを使い始められるように、GitHub Codespaces で使うテンプレート リポジトリを設定できます。 詳しくは、「GitHub Codespaces 用のテンプレート リポジトリを設定する」を参照してください。

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

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

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

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

    [クイック スタート テンプレートを見つける] セクションのスクリーンショット。 [すべて見る] が濃いオレンジ色の枠線で強調表示されています。

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

    codespaces ページの [クイック スタート テンプレートを見つける] セクションのスクリーンショット。 3 つのテンプレートが一覧にあります。テンプレートの名前がオレンジ色の枠線で強調表示されています。

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

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

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

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

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

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

    [このテンプレートを使用] ボタンと、ドロップダウン メニューが展開されて [codespace で開く] が表示されている状態のスクリーンショット。

    注: ご自分がテンプレート リポジトリの保守管理者で、テンプレート リポジトリ自体に変更をコミットしたい場合は、 [ コード] ドロップダウンから codespace を作成する必要があります。 詳しくは、「リポジトリの codespace を作成する」を参照してください。

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

GitHub Enterprise Cloud

のリポジトリに公開する

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

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

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

注: 公開されていない codespace が現在組織に課金されている場合、codespace を公開すると、codespace の所有権と課金が個人アカウントに転送されます。 「GitHub Codespaces の請求について」を参照してください。

VS Code から公開する

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

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

    [ソース管理] ボタンがオレンジ色の枠線で強調されている VS Code アクティビティ バーのスクリーンショット。

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

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

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

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

    [ソース管理] サイド バーのスクリーンショット。コミット メッセージと、その下の [コミット] ボタンの両方が、濃いオレンジ色の枠線で強調表示されています。

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

    [ブランチを公開する] ボタンが表示されている [ソース管理] サイド バーのスクリーンショット。

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

    VS Code でのリポジトリ名ドロップダウンのスクリーンショット。 プライベートまたはパブリック リポジトリに発行するための 2 つのオプションが示されています。

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

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

    [GitHub で開く] ボタンが示されている、正常に発行されたリポジトリの確認メッセージのスクリーンショット。

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

GitHub

から公開

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

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

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

    codespace のドロップダウン メニューのスクリーンショット。[新しいリポジトリに公開する] オプションが表示されています。

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

    [新しいリポジトリに公開する] ドロップダウンのスクリーンショット。[名前] フィールド、[パブリック] オプションと [プライベート] オプション、[リポジトリの作成] ボタンが表示されています。

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

参考資料