Skip to main content
ドキュメントへの更新が頻繁に発行されており、このページの翻訳はまだ行われている場合があります。 最新の情報については、「英語のドキュメント」を参照してください。

GitHub Codespaces 用のテンプレート リポジトリを設定する

GitHub Codespaces で使うテンプレート リポジトリを設定することで、ユーザーがプロジェクトを開始するのを手助けできます。

はじめに

テンプレート リポジトリを設定することで、ユーザーが GitHub Codespaces でフレームワーク、ライブラリ、またはその他のプロジェクトを開始するのを手助けできます。 ユーザーは、クラウドベースの開発環境でテンプレート ファイルの操作をすぐに開始でき、リポジトリの複製や、ツールなどの依存関係のインストールについて気にする必要がありません。 一部の構成で、重要なファイルが既に編集用に開かれ、VS Code Web エディター内のプレビュー ブラウザー タブでアプリケーションが既に実行されている codespace でユーザーを設定できるようになります。

テンプレート リポジトリへの読み取りアクセス権があればだれでも、GitHub のリポジトリのページから codespace を作成できます。 既存のリポジトリをテンプレートに変換でき、ユーザーがテンプレート リポジトリから codespace を作成できるように設定を変更する必要はありません。 リポジトリをテンプレートに変換する方法について詳しくは、「テンプレートリポジトリを作成する」をご覧ください。

https://github.com/codespaces/new?template_repository=OWNER/TEMPLATE-REPO の形式でリンクを提供して、ユーザーをテンプレートの [新しい codespace の作成] ページに直接誘導できます。

[基本 React Web サイト] という名称のテンプレート レポジトリの [新しい codespace の作成] ページのスクリーンショット。[このテンプレートを使用する] ボタンがあります。

たとえば、フレームワークの使用を開始するためのチュートリアル内で、このリンクを提供できます。 リンク内の OWNER/TEMPLATE-REPO をお使いのテンプレート リポジトリの名前 (例: monalisa/octo-template) に置き換えます。

他のユーザーがテンプレートから codespace を作成すると、テンプレート リポジトリの内容がユーザーの codespace に複製されます。 ユーザーの準備ができたら、GitHub 上で、その個人アカウントに属する新しいリポジトリに作業内容を公開できるようになります。 codespace の使用料金は、それを作成したユーザーに課金されます。 詳しくは、「テンプレートから codespace を作成する」を参照してください。

テンプレートについて説明する

テンプレート リポジトリ用の README がない場合は作成して、テンプレートの目的と使用開始方法について説明します。 詳しくは、「READMEについて」を参照してください。

テンプレートの簡単な説明は、https://github.com/codespaces/new?template_repository=OWNER/TEMPLATE-REPO リンクをクリックしたユーザーに示される [新しい codespace の作成] ページに表示されます。 この説明は、リポジトリの作成時に設定できる [説明] フィールドから取得されます。 この説明はいつでも編集できます。リポジトリのページに移動し、ページの右側にある [情報] セクションの横にある をクリックします。

リポジトリ ページの [情報] セクションのスクリーンショット。 設定ボタン (歯車記号) が濃いオレンジ色の枠線で強調表示されています。

スターター ファイルを追加する

ユーザーがライブラリ、フレームワーク、またはその他のテクノロジをすぐに使い始めることができるように、通常は、定型コードを含むスターター ファイルがテンプレート リポジトリに用意されています。

含めるファイルの種類に関するガイダンスについては、次のように、GitHub Codespaces の公式 GitHub テンプレートに含まれるスターター ファイルを確認できます。

  1. github.com/codespaces の [Codespaces] ページに移動します。 1. テンプレートの完全な一覧を表示するには、[クイック スタート テンプレートの探索] で [すべて表示] をクリックします。

    [クイック スタート テンプレートの探索] セクションのスクリーンショット。[すべて表示] が強調表示されています

  2. テンプレート用のファイルが含まれるテンプレート リポジトリを表示するには、テンプレートの名前をクリックします。

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

開発コンテナーを構成する

開発コンテナー構成ファイルをテンプレート リポジトリに追加して、GitHub Codespaces でテンプレートを使うユーザーの開発環境をカスタマイズできます。 Visual Studio Code で定義済みの構成設定の一覧から選ぶか、独自の devcontainer.json ファイルを記述してカスタム構成を作成できます。 構成ファイルを追加しない場合は、既定のコンテナー イメージが使用されます。 詳細については、「開発コンテナーの概要」および「開発コンテナー構成のリポジトリへの追加」を参照してください。

注: ユーザーがテンプレート リポジトリで [このテンプレートを使用] ボタンから codespace を作成する場合、構成を選ぶことはできません。 codespace は、リポジトリのルートにある .devcontainer/devcontainer.json または .devcontainer.json で定義されている既定の構成に基づいて構築されます。

テンプレートを使ってユーザーに最適なエクスペリエンスを提供するには、ツールとカスタマイズを使って開発コンテナーを構成する必要があります。 たとえば、devcontainer.json ファイル内で、次のようにします。

  • openFiles プロパティを使って、テンプレートから codespace を作成するときに VS Code Web クライアントで自動的に開くファイルの一覧を定義できます。
  • テンプレートに Web アプリケーションのファイルを含めると、アプリケーションが、ユーザーの codespace で自動的に実行されるようにできます。 これを行うには、postAttachCommand プロパティを使って、VS Code Web クライアントが codespace に接続するとすぐにローカル サーバーでアプリケーションを起動するスクリプトを実行し、ポートの onAutoForward プロパティを openPreview に設定して、VS Code Web クライアントに埋め込まれたシンプルなブラウザー内に、そのポートで実行されているアプリケーションを表示します。

React テンプレートの次の構成設定によって、ユーザーのエディターで app.js ファイルが開き、npm start (package.json ファイルで定義) を実行してローカル サーバーを起動し、codespace のプレビュー ブラウザー タブにポート 3000 を転送します。

{
    "postAttachCommand": {
      "server": "npm start"
    },

    "portsAttributes": {
      "3000": {
        "label": "Application",
        "onAutoForward": "openPreview"
      }
    },

    "customizations": {
      "codespaces": {
        "openFiles": ["src/App.js"]
      }
    }
}

詳しくは、「リポジトリの codespace にあるファイルを自動的に開く」と、開発コンテナーの Web サイトの開発コンテナーの仕様をご覧ください。