{"meta":{"title":"Visual Studio Code で GitHub Codespaces を使用する","intro":"Visual Studio Code拡張機能をGitHub Codespaces アカウントに接続することで、GitHub内のコードスペースで直接開発できます。","product":"Codespaces","breadcrumbs":[{"href":"/ja/codespaces","title":"Codespaces"},{"href":"/ja/codespaces/developing-in-a-codespace","title":"codespace で開発する"},{"href":"/ja/codespaces/developing-in-a-codespace/using-github-codespaces-in-visual-studio-code","title":"Visual Studio Code"}],"documentType":"article"},"body":"# Visual Studio Code で GitHub Codespaces を使用する\n\nVisual Studio Code拡張機能をGitHub Codespaces アカウントに接続することで、GitHub内のコードスペースで直接開発できます。\n\n##\n\n```\n GitHub CodespacesについてVisual Studio Code\n\n Visual Studio Codeのローカル インストールを使用して、コードスペースの作成、管理、操作、削除を行うことができます。 \n GitHub Codespaces で VS Code を使用するには、Codespaces 拡張機能をインストールする必要があります。\n GitHub CodespacesでのVS Codeの設定の詳細については、「[前提条件](#prerequisites)」を参照してください。\n```\n\n既定では、 GitHubに新しいコードスペースを作成すると、ブラウザーで開きます。\nVS Codeで新しいコードスペースを自動的に開く場合は、既定のエディターをVS Codeに設定できます。 詳しくは、「[GitHub Codespaces の既定のエディターを設定する](/ja/codespaces/setting-your-user-preferences/setting-your-default-editor-for-github-codespaces)」をご覧ください。\n\nブラウザーで作業したいが、既存の VS Code 拡張機能、テーマ、ショートカットを引き続き使用する場合は、\\[設定の同期] をオンにすることができます。詳細については、 [AUTOTITLE を](/ja/codespaces/setting-your-user-preferences/personalizing-github-codespaces-for-your-account#settings-sync)参照してください。\n\n## 前提条件\n\n```\n VS Codeで直接コードスペースで開発するには、GitHub Codespaces資格情報を使用してGitHub拡張機能をインストールしてサインインする必要があります。 \n GitHub Codespaces拡張機能には、2020 年 10 月リリース 1.51 以降VS Code必要があります。\n\n Visual Studio Code Marketplaceを使用して、[GitHub Codespaces](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces)拡張機能をインストールします。 詳細については、[](https://code.visualstudio.com/docs/editor/extension-gallery)ドキュメントのVS Code を参照してください。\n```\n\n1. VS Code のアクティビティ バーで、\\[リモート エクスプローラー] アイコンをクリックします。\n\n ![アクティビティ バーのスクリーンショット。 \\[リモート エクスプローラー\\] サイド バーのアイコン (四角形の上に円が重なっている) がオレンジ色の枠線で強調表示されています。](/assets/images/help/codespaces/click-remote-explorer-icon-vscode.png)\n\n > \\[!NOTE]\n > リモート エクスプローラーがアクティビティ バーに表示されない場合:\n >\n > 1. コマンド パレットにアクセスします。 たとえば、Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux) を押します。\n > 2. 次のコマンドを入力します: `details`\n > 3. **\\[コードスペース: 詳細]** をクリックします。\n\n2. \\[リモート エクスプローラー] サイド バーの上部にあるドロップダウンから \\[GitHub Codespaces] を選択します (まだ選択されていない場合)。\n\n3. ```\n **[サインイン] GitHubをクリックします。**\n ```\n\n ![\\[リモート エクスプローラー\\] サイド バーの \\[GitHub Codespaces\\] のスクリーンショット。\\[GitHub にサインイン\\] ボタンが表示されています。](/assets/images/help/codespaces/sign-in-to-view-codespaces-vscode.png)\n\n4. 現在 GitHub にサインインしていない場合は、サインインするように求められます。 さあ、サインインしてください。\n\n5. 承認する内容を指定するように求められたら、\\[\\*\\*\\*\\*] の \\[GitHub] ボタンをクリックします。\n\n6. 承認ページが表示されたら、 **\\[Visual-Studio-Code の承認]** をクリックします。\n\n## でコードスペースを作成する VS Code\n\nGitHub のアカウントを GitHub Codespaces 拡張機能に接続したら、新しい codespace を作成することができます。 GitHub Codespaces 拡張機能の詳しい情報については、[VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces) に関するページを参照してください。\n\n1. VS Code のアクティビティ バーで、\\[リモート エクスプローラー] アイコンをクリックします。\n\n ![アクティビティ バーのスクリーンショット。 \\[リモート エクスプローラー\\] サイド バーのアイコン (四角形の上に円が重なっている) がオレンジ色の枠線で強調表示されています。](/assets/images/help/codespaces/click-remote-explorer-icon-vscode.png)\n\n > \\[!NOTE]\n > リモート エクスプローラーがアクティビティ バーに表示されない場合:\n >\n > 1. コマンド パレットにアクセスします。 たとえば、Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux) を押します。\n > 2. 次のコマンドを入力します: `details`\n > 3. **\\[コードスペース: 詳細]** をクリックします。\n\n2. \\[リモート エクスプローラー] サイド バーの上にマウス ポインターを合わせ、\\[] をクリックします。\n\n ![GitHub Codespaces の \\[リモート エクスプローラー\\] サイド バーのスクリーンショット。 プラス記号ボタンの横に \\[新しい codespace の作成\\] というヒントが表示されています。](/assets/images/help/codespaces/create-codespace-vscode.png)\n\n3. テキスト ボックスに開発を行うリポジトリの名前を入力し、それを選択します。\n\n \n\n 後続のプロンプトの右側に、codespace の料金を支払うユーザーを示すメッセージが表示されます。\n\n \n\n4. 開発するブランチをクリックします。\n\n5. 開発コンテナー構成ファイルの選択を求められたら、一覧からファイルを選びます。\n\n6. 使用するマシンの種類をクリックします。\n\n > \\[!NOTE]\n > 使用可能なマシンは、数多くの要因によって、選択の幅が制限されます。 これには、Organization に対して構成されているポリシーや、リポジトリでの最低限の種類のマシン仕様が含まれます。 詳細については、「[コンピューターの種類へのアクセスを制限する](/ja/codespaces/managing-codespaces-for-your-organization/restricting-access-to-machine-types)」および「[codespace コンピューターに対して最小仕様を設定する](/ja/codespaces/setting-up-your-project-for-codespaces/configuring-dev-containers/setting-a-minimum-specification-for-codespace-machines)」を参照してください。\n\n##\n\n```\n VS Codeでコードスペースを開く\n```\n\n1. VS Code のアクティビティ バーで、\\[リモート エクスプローラー] アイコンをクリックします。\n\n ![アクティビティ バーのスクリーンショット。 \\[リモート エクスプローラー\\] サイド バーのアイコン (四角形の上に円が重なっている) がオレンジ色の枠線で強調表示されています。](/assets/images/help/codespaces/click-remote-explorer-icon-vscode.png)\n\n > \\[!NOTE]\n > リモート エクスプローラーがアクティビティ バーに表示されない場合:\n >\n > 1. コマンド パレットにアクセスします。 たとえば、Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux) を押します。\n > 2. 次のコマンドを入力します: `details`\n > 3. **\\[コードスペース: 詳細]** をクリックします。\n2. \\[GitHub Codespaces] の下で、開発するコードスペースにカーソルを合わせます。\n3. 接続アイコン (プラグの記号) をクリックします。\n\n ![\\[リモート エクスプローラー\\] サイド バーのスクリーンショット。 codespace の接続アイコン (プラグの記号) が濃いオレンジ色の枠線で強調表示されています。](/assets/images/help/codespaces/click-connect-to-codespace-icon-vscode.png)\n\n## でマシンの種類を変更する VS Code\n\n```\n 通常、任意の種類のリモート マシン上で codespace を実行できます。 これらのマシンの種類には、2 コアから 32 コアまでのハードウェア仕様が用意されていますが、すべての種類のマシンが常に使用できるわけではありません。 マシンの各種類には、それぞれ異なるレベルのリソースと異なる請求レベルが用意されています。 詳しくは、「[AUTOTITLE](/billing/managing-billing-for-your-products/managing-billing-for-github-codespaces/about-billing-for-github-codespaces)」を参照してください。\n \n 既定では、codespace を作成するときに、有効なリソースが最も少ないマシンの種類が使われます。 コードスペースのマシンの種類はいつでも変更できます。\n```\n\n> \\[!NOTE]\n> 使用可能なマシンは、数多くの要因によって、選択の幅が制限されます。 これには、Organization に対して構成されているポリシーや、リポジトリでの最低限の種類のマシン仕様が含まれます。 詳細については、「[コンピューターの種類へのアクセスを制限する](/ja/codespaces/managing-codespaces-for-your-organization/restricting-access-to-machine-types)」および「[codespace コンピューターに対して最小仕様を設定する](/ja/codespaces/setting-up-your-project-for-codespaces/configuring-dev-containers/setting-a-minimum-specification-for-codespace-machines)」を参照してください。\n\n1. VS Code で、Command + Shift + P (Mac) または Ctrl + Shift + P (Windows/Linux) を使ってコマンド パレットを開きます。\n\n2. 「Codespaces: マシンの種類の変更」を検索して選択します。\n\n ![検索文字列として「change machine」と入力され、ドロップダウン リストに \\[Codespaces: マシンの種類の変更\\] と表示されているスクリーンショット。](/assets/images/help/codespaces/vscode-change-machine-type-option.png)\n\n3. codespace 内でこれらの手順に従っていない場合は、変更する codespace をクリックします。\n\n \n\n codespace でこれらの手順に従っている場合は、作業中の codespace に変更が適用されます。\n\n4. 使用するマシンの種類を選択びます。\n\n5. 異なるストレージ容量を持つマシンの種類に変更する場合は、続行するかどうかを確認するプロンプトが表示されます。 そのプロンプトを読み、 **\\[はい]** をクリックして同意します。\n\nストレージ容量が異なる仮想マシンに変更した場合 (たとえば、64 GB から 32 GB)、そのマシンの種類が変更される間の短い期間には codespace を使用できなくなります。 codespace が現在アクティブの場合は、自動的に停止されます。 変更が完了すると、新しい種類のマシンで実行されている codespace を再起動できます。\n\n同じストレージ容量を持つ仮想マシンに変更した場合は、次回 codespace を再起動するときに変更が適用されます。 アクティブな codespace は自動的に停止されません。 codespace の再起動の詳細については、「[コードスペースの停止および開始](/ja/codespaces/developing-in-codespaces/stopping-and-starting-a-codespace#restarting-a-codespace)」を参照してください。\n\n## でコードスペースを削除する VS Code\n\n現在 codespace で作業していない場合、VS Code 内から codespace を削除できます。\n\n1. VS Code のアクティビティ バーで、\\[リモート エクスプローラー] アイコンをクリックします。\n\n ![アクティビティ バーのスクリーンショット。 \\[リモート エクスプローラー\\] サイド バーのアイコン (四角形の上に円が重なっている) がオレンジ色の枠線で強調表示されています。](/assets/images/help/codespaces/click-remote-explorer-icon-vscode.png)\n\n > \\[!NOTE]\n > リモート エクスプローラーがアクティビティ バーに表示されない場合:\n >\n > 1. コマンド パレットにアクセスします。 たとえば、Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux) を押します。\n > 2. 次のコマンドを入力します: `details`\n > 3. **\\[コードスペース: 詳細]** をクリックします。\n2. \\[GitHub Codespaces] の下で、削除したい codespace を右クリックします。\n3. **\\[Codespace の削除]** をクリックします。\n\n## Web クライアントで VS Code Insider に切り替える\n\n```\n VS Code Web クライアントを使用している場合は、アプリケーションの Insider バージョンに切り替えることができます。 このバージョンのVS Codeの詳細については、[](https://code.visualstudio.com/blogs/2016/02/01/introducing_insiders_build) ブログの VS Codeを参照してください。\n```\n\ncodespace でバージョンを切り替えた後は、codespace を停止して再起動しても、Web クライアントでは引き続き Insiders バージョンが使用されます。\nVS Code Web クライアントで作成して開く新しいコードスペースでも、Insider バージョンが使用されます。\n\n1. コードスペースを表示しているブラウザー ウィンドウの左下にある \\[ ****] をクリックします。\n\n2. メニューで、\\[Insiders バージョンに切り替える] を選択します。\n\n ![VS Code Web クライアントのスクリーンショット。 歯車アイコンがオレンジ色の枠線で強調表示されています。 \\[Insiders バージョンに切り替える\\] がメニューに表示されています。](/assets/images/help/codespaces/codespaces-insiders-vscode.png)\n\n3. ```\n **[再読み込み]** をクリックします。\n ```\n\n安定バージョンの VS Codeに戻すには、プロセスを繰り返しますが、\\[ **安定バージョンに切り替える]** を選択します。 戻した後は、codespace を停止して再起動しても、codespace では引き続き安定バージョンが使用されます。\nVS Code Web クライアントで作成して開く新しいコードスペースでも、安定バージョンが使用されます。\n\n## Insiders デスクトップ アプリケーションの利用方法 Codespaces\n\n```\n GitHub Codespaces デスクトップ アプリケーションの Insider バージョンでVS Codeを使用するには、VS Code Insiders アプリケーション内からコードスペースを開始または作成します。 詳細については、VS Code[でのコードスペースの作成](#creating-a-codespace-in-vs-code)と、この記事の前[のVS Codeでコードスペースを開](#opening-a-codespace-in-vs-code)く方法に関する記事を参照してください。\n```\n\n## 参考資料\n\n* [GitHub Codespaces で Visual Studio Code コマンド パレットを使用する](/ja/codespaces/reference/using-the-vs-code-command-palette-in-codespaces)\n* [GitHub Codespaces でのGitHub Copilotの使用](/ja/codespaces/reference/using-github-copilot-in-github-codespaces)"}