GitHub Codespaces で GitHub Copilot を使えるようにする方法

# はじめに
最近ついに、`GitHub Codespaces` を使い始めたのですが、`GitHub Codespaces` では `GitHub Copilot` が有効化されていないことに気づいたので、`GitHub Codespaces` で `GitHub Copilot` を使えるようにする方法を調べてみました。有効化する方法は他にもあると思いますが、今回は 2 つ紹介したいと思います。実際に `GitHub Copilot` を有効化する方法を紹介する前に、`GitHub Codespaces` の概要説明や、開発コンテナーの説明、`Visual Studio Code` リモート開発と `GitHub Codespaces` 拡張機能の説明をしていきたいと思います。

## 前提
- `GitHub Copilot` のサブスクリプション契約をしている `GitHub` アカウントにログインしていること。

# GitHub Codespaces とは
`GitHub Codespaces` は、クラウドでホストされている開発環境であり、構成ファイルをリポジトリにコミットしておくことで、プロジェクトをカスタマイズすることができます。デフォルトでは、`codespace` 開発環境は一般的な言語とツールの選択を含む `GitHub` による `Ubuntu Linux` イメージから作成されていますが、任意の `Linux` ディストリビューションに基づくイメージを使用することもできます。

:::note info
`Windows` と `macOS` は、リモート開発コンテナー用の `OS` としてサポートされていません。
:::

`GitHub Codespaceas` への接続は、`Visual Studio Code`、ブラウザー、`JetBrains IDE`、`GitHub CLI` で可能であり、接続すると `Docker` コンテナー内にリポジトリのソースコード、言語、開発ツールが配置されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/e7cbe08c-8a7d-ba39-3607-857e1ffa0602.png)

:::note info
`Docker` コンテナナー外の `Linux VM` へのアクセスは制限されています。
:::

https://docs.github.com/ja/codespaces/overview

# 開発コンテナー
開発コンテナーは `GitHub` により作成される、開発環境用に構成された `Docker` コンテナーです。`codespace` 環境では常に開発コンテナを使用し、コンテナーはリポジトリごとに構成することが可能です。

:::note info
`Ubuntu Linux` のデフォルトのイメージには、`Python`、`Node`、`PHP`、`Java`、`Go`、`C++`、`Ruby`、`.NET Core/C#` などの一般的な言語のランタイム バージョンが最新または `LTS` リリースで含まれています。また、`JupyterLab` や `Conda` など、データサイエンスと機械学習をサポートするツールや、`Git`、`GitHub CLI`、`yarn`、`openssh`、`vim` などの他の開発者ツールやユーティリティも含まれています。
:::

:::note info
含まれているすべての言語、ランタイム、ツールを確認するには、`codespace` ターミナル内で　`devcontainer-info content-url` コマンドを使用し、コマンドで出力された `URL` にアクセスすることで確認できます。もしくは、[devcontainer/images リポジトリ](https://github.com/devcontainers/images/tree/main/src/universal/.devcontainer) でも確認できます。
:::

https://docs.github.com/ja/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#using-the-default-dev-container-configuration

## 開発コンテナーの構成
開発コンテナー構成のプライマリファイルである、`devcontainer.json` を使用することで `codespace` の環境を決定できます。`devcontainer.json` では、フレームワーク、ツール、拡張機能、ポート フォワーディングを含めることができる開発コンテナーを定義できます。一方で `devcontainer.json` ファイルを含まない場合は、既定の開発コンテナー構成が使用されます。

:::note info
`devcontainer.json` ファイルは `Dockerfile` と一緒に配置され、参照されます。
:::

:::note info
`.devcontainer.json` のメタデータの公式ドキュメントはこちらです。
https://containers.dev/implementors/json_reference/
:::

https://docs.github.com/ja/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#devcontainerjson

# Visual Studio Code リモート開発 / GitHub Codespaces 拡張機能によるリモートコンピューター接続
`Visual Studio Code` リモート開発ないしは `GitHub Codespaces` 拡張機能を利用することで、他のコンピューター上のソースコードやランタイムと透過的な対話が可能です。ここで、リモート開発とは、コンテナー内、リモート `SSH` ホスト、`Windows Subsystem for Linux` (`WSL`) による開発を指します。`VS Code` でフォルダーを開くと、リモート開発または `GitHub Codespaces` 拡張機能によって、`VS Code Server` は自動的にインストール、起動、停止、管理されるます。そのため、ユーザーは `VS Code Server` の存在に気付くことはありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/af544da8-c67b-83ef-2781-df94edb0aacf.png)

ここで、拡張機能については以下の 2 種類があり、適切な場所にインストールされます。
- UI 拡張機能 (`UI Extension`)
    - VS Code ユーザー インターフェイスに貢献し、常にユーザーのローカル コンピューターで実行。
- ワークスペース拡張機能 (`Workspace Extension`)
    - ワークスペース内のファイルにアクセスして、豊富な複数ファイル言語サービス、デバッガーのサポートを提供したり、ワークスペース内の複数のファイルに対して複雑な操作を実行。

https://code.visualstudio.com/api/advanced-topics/remote-extensions#architecture-and-extension-types

# GitHub Copilot が有効化されていない問題
ローカルの `VS Code` にインストールされている `GitHub Copilot` を確認すると、グレーアウトしており有効化されておりません。グレーアウトされて有効化されていない理由は、`GitHub Copilot` 拡張機能はローカル側にインストールされているが、`GitHub Codespaces` 側にインストールされていないためです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/afb48d17-01fe-b6e5-aab6-570d5cb9d58f.png)


:::note info
`Visual Studio Code` リモート開発 / `GitHub Codespaces` 拡張機能によるリモートコンピューター接続の章でも説明した内容に関わりますが、拡張機能には `VS Code` にインストールされるものと、`VS Code Server` にインストールされるものがあり、今回の場合では、`VS Code` でインストールされているが `VS Code Server` にインストールされていません。
:::

警告を読むと、`GitHub Copilot` 拡張機能はリモート拡張ホストで実行されるため無効になっているようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/c0c3b31c-a4c1-a0d8-7182-5fbef35e53a0.png)

# GitHub Copilot を有効化する方法①：VS Code 上で Copilot のインストールボタンを押す
有効にするためには簡単で、「Install in Codespaces: potenti...」の青色ボタンを押すだけです。この青色ボタンを押すことで、`VS Code Server` に `GitHub Copilot` の拡張機能がインストールされ、利用できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/01ed3d36-6693-c0ed-f40e-0fc12e357b57.png)

すると `Codespaces` 側に `GitHub Copilot` 拡張機能がインストールされるので、無事使えるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/a71dd299-ba57-af53-dacb-dcaa0ae6e5b5.png)

# GitHub Copilot を有効化する方法②：構成ファイルを設定する
以下の構成ファイルでは、`VS Code` の拡張機能として `GitHub Copilot` と `GitHub Copilot Chat` をインストールしています。指定方法は簡単で、`customizations.vscode.extensions` で `GitHub.copilot` を指定するだけです。この構成ファイルをもとに `codespace` 環境を立ち上げると自動的に `GitHub Copilot` が有効化されています。

```json:.devcontainer.json
{
	"name": "Python 3",
	"image": "mcr.microsoft.com/devcontainers/python:1-3.12-bullseye",
	"features": {},
	"customizations": {
		"vscode": {
			"extensions": [
				"GitHub.copilot",
                "GitHub.copilot-chat"
			]
		}
	}
}
```

:::note info
上記の `.devcontainer.json` では、`Dockerfile` の代わりに `image` を指定しています。
:::

# おわりに
この記事では、`GitHub Codespaces` の説明、開発コンテナーの説明、拡張機能の説明をしてから、`GitHub Codespaces` で `GitHub Copilot` を使えるようにする方法について解説しました。`VS Code` と `VS Code Server` の区別の観点から、なぜ `GitHub Copilot` がデフォルトで有効化されていない場合があるのかを理解することができました。