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