docs/translations/ja-JP/content/codespaces/developing-in-codespaces/using-github-codespaces-in-visual-studio-code.md

---
title: Visual Studio Code で GitHub Codespaces を使用する
intro: '{% data variables.product.product_name %} のアカウントに {% data variables.product.prodname_github_codespaces %} 拡張機能を接続することで、{% data variables.product.prodname_vscode %} で codespace を直接開発できます。'
product: '{% data reusables.gated-features.codespaces %}'
redirect_from:
  - /github/developing-online-with-codespaces/using-codespaces-in-visual-studio-code
  - /github/developing-online-with-codespaces/connecting-to-your-codespace-from-visual-studio-code
  - /github/developing-online-with-codespaces/using-codespaces-in-visual-studio
  - /codespaces/developing-in-codespaces/using-codespaces-in-visual-studio-code
versions:
  fpt: '*'
  ghec: '*'
type: how_to
topics:
  - Codespaces
  - Visual Studio Code
  - Developer
shortTitle: Visual Studio Code
ms.openlocfilehash: fd714af8374346768b81241ea6b8b91a0022c4e4
ms.sourcegitcommit: 47bd0e48c7dba1dde49baff60bc1eddc91ab10c5
ms.translationtype: HT
ms.contentlocale: ja-JP
ms.lasthandoff: 09/05/2022
ms.locfileid: '147111514'
---
## {% data variables.product.prodname_vscode %} の {% data variables.product.prodname_github_codespaces %} について

{% data variables.product.prodname_vscode %} のローカル インストールを使用して、codespace の作成、管理、作業、削除を行うことができます。 {% data variables.product.prodname_vscode_shortname %} で {% data variables.product.prodname_github_codespaces %} を使用するには、{% data variables.product.prodname_codespaces %} 拡張機能をインストールする必要があります。 {% data variables.product.prodname_vscode_shortname %} での Codespaces の設定の詳細については、「[前提条件](#prerequisites)」を参照してください。

既定では、{% data variables.product.prodname_dotcom_the_website %} で作成した新しい codespace は、ブラウザーで開きます。 {% data variables.product.prodname_vscode_shortname %} で新しい codespace を自動的に開きたい場合は、既定のエディターを {% data variables.product.prodname_vscode_shortname %} に設定できます。 詳しくは、「[{% data variables.product.prodname_github_codespaces %} の既定のエディターを設定する](/codespaces/customizing-your-codespace/setting-your-default-editor-for-github-codespaces)」をご覧ください。

ブラウザーで作業したいが、既存の {% data variables.product.prodname_vscode_shortname %} 拡張機能、テーマ、ショートカットを引き続き使用する場合は、Settings Sync を有効にすることができます。詳しくは、「[アカウントの {% data variables.product.prodname_github_codespaces %} をパーソナライズする](/codespaces/customizing-your-codespace/personalizing-github-codespaces-for-your-account#settings-sync)」をご覧ください。

## 前提条件

{% data variables.product.prodname_vscode_shortname %} の codespace で直接開発するには、{% data variables.product.prodname_codespaces %} 拡張機能をインストールして、{% data variables.product.product_name %} 資格情報を使用してサインインする必要があります。 {% data variables.product.prodname_codespaces %} 拡張機能には、{% data variables.product.prodname_vscode_shortname %} October 2020 リリース 1.51 以降が必要です。

{% data variables.product.prodname_vscode_marketplace %} を使用して [{% data variables.product.prodname_codespaces %}](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces) 拡張機能をインストールします。 詳細については、{% data variables.product.prodname_vscode_shortname %} ドキュメントの「[拡張機能マーケットプレース](https://code.visualstudio.com/docs/editor/extension-gallery)」を参照してください。


{% mac %}

{% data reusables.codespaces.click-remote-explorer-icon-vscode %}
1. **[サインインして {% data variables.product.prodname_dotcom %} を表示...]** をクリックします。

   ![[Signing in to view {% data variables.product.prodname_codespaces %}]](/assets/images/help/codespaces/sign-in-to-view-codespaces-vscode-mac.png)

2. {% data variables.product.prodname_vscode_shortname %} からの {% data variables.product.product_name %} のアカウントへのアクセスを承認するには、 **[許可]** をクリックします。
3. 機能拡張を承認するには、{% data variables.product.product_name %} にサインインします。

{% endmac %}

{% windows %}

{% data reusables.codespaces.click-remote-explorer-icon-vscode %}
1. [REMOTE EXPLORER] ドロップダウンを使用して、 **{% data variables.product.prodname_github_codespaces %}** をクリックします。

   ![{% data variables.product.prodname_codespaces %} ヘッダ](/assets/images/help/codespaces/codespaces-header-vscode.png)

1. **[サインインして {% data variables.product.prodname_codespaces %} を表示...]** をクリックします。

   ![[Signing in to view {% data variables.product.prodname_codespaces %}]](/assets/images/help/codespaces/sign-in-to-view-codespaces-vscode.png)

1. {% data variables.product.prodname_vscode_shortname %} からの {% data variables.product.product_name %} のアカウントへのアクセスを承認するには、 **[許可]** をクリックします。
1. 機能拡張を承認するには、{% data variables.product.product_name %} にサインインします。

{% endwindows %}

## {% data variables.product.prodname_vscode_shortname %} で Codespaces を作成する

{% data reusables.codespaces.creating-a-codespace-in-vscode %}

## {% data variables.product.prodname_vscode_shortname %} で codespace を開く

{% data reusables.codespaces.click-remote-explorer-icon-vscode %}
1. [Codespaces] で、開発するコードスペースをクリックします。
1. [Connect to Codespace] アイコンをクリックします。

   ![{% data variables.product.prodname_vscode_shortname %} の [Connect to Codespace]\(Codespace への接続\) アイコン](/assets/images/help/codespaces/click-connect-to-codespace-icon-vscode.png)

## {% data variables.product.prodname_vscode_shortname %} のマシンの種類の変更

{% data reusables.codespaces.codespaces-machine-types %} codespace のマシンの種類はいつでも変更できます。

1. {% data variables.product.prodname_vscode_shortname %} で、コマンド パレットを開きます (`shift command P` / `shift control P`)。
1. 「Codespaces: マシンの種類の変更」を検索して選択します。

   ![新しい {% data variables.product.prodname_codespaces %} を作成するためのブランチを検索する](/assets/images/help/codespaces/vscode-change-machine-type-option.png)

1. 変更したい codespace をクリックします。

   ![新しい {% data variables.product.prodname_codespaces %} を作成するためのブランチを検索する](/assets/images/help/codespaces/vscode-change-machine-choose-repo.png)

1. 使用したいマシンの種類を選択します。 

   {% note %}

   **注**: {% data reusables.codespaces.codespaces-machine-type-availability %}

   {% endnote %}

1. codespace が現在実行中の場合は、今すぐ再起動して codespace に再接続するかどうかを確認するメッセージが表示されます。

   この codespace に使用するマシンの種類をすぐに変更したい場合は、 **[はい]** をクリックします。
   
   **[いいえ]** をクリックした場合、または codespace が現在実行されていない場合は、次回 codespace が再起動されたときに変更が有効になります。

## {% data variables.product.prodname_vscode_shortname %} で Codespaces を削除する

{% data reusables.codespaces.deleting-a-codespace-in-vscode %}

## {% data variables.product.prodname_vscode_shortname %} の Insider ビルドへの切り替え

{% data variables.product.prodname_codespaces %} 内で [{% data variables.product.prodname_vscode_shortname %} の Insiders ビルド](https://code.visualstudio.com/docs/setup/setup-overview#_insiders-nightly-build)を使用できます。

1. {% data variables.product.prodname_codespaces %} ウィンドウの左下にある **{% octicon "gear" aria-label="The settings icon" %} [設定]** を選択します。
2. 一覧から [Insiders バージョンに切り替える] を選択します。

   ![{% data variables.product.prodname_codespaces %} で [Insiders ビルド] をクリックする](/assets/images/help/codespaces/codespaces-insiders-vscode.png)
3. 選択すると、{% data variables.product.prodname_codespaces %} は Insiders バージョンで引き続き開きます。