GitHub Copilotのコマンドラインツールの紹介

# 💻 **GitHub Copilotのコマンドラインツールの紹介**

## 🌟 **Introduction: はじめに**
こんにちは、皆さん！GitHub CopilotのCLI（コマンドラインインターフェース）ツールが公開ベータ版となりました。そのインストールから使ってみた感想までをこの記事でご紹介していきます。詳細は[公式ページ](https://github.blog/changelog/2023-11-08-github-copilot-in-the-cli-now-in-public-beta/)をご覧ください。

公式ページから一部引用しますと：

> "GitHub Copilot in the CLI brings GitHub Copilot right to your terminal, where you can ask it to do things like explain how a command works or suggest a command for a task you want to perform."

これを日本語に訳すと次のようになります(意訳あり)：

> "GitHub Copilotのコマンドラインツールは、GitHub Copilotをターミナルで操作できます。コマンドラインツールでは、質問したコマンドがどのように動作するかを説明したり、行いたいタスクに対するコマンドを提案したりすることが可能です。"

つまり、GitHub CopilotのCLIツールは、ターミナル上で直接適切なコマンドを提案してくれる非常に便利な機能を提供しています。また、ターミナル内でコマンドの質問をすることも可能です！私が実際に使ってみた感じでも、その有用性を強く感じました。以下で具体的な使用感について詳しく紹介します。

## 📖 **Table of Contents: 目次**

- [💻 **GitHub Copilotのコマンドラインツールの紹介**](#-github-copilotのコマンドラインツールの紹介)
  - [🌟 **Introduction: はじめに**](#-introduction-はじめに)
  - [📖 **Table of Contents: 目次**](#-table-of-contents-目次)
  - [📝 **QuickStart: クイックスタート**](#-quickstart-クイックスタート)
  - [📚 **CLIでのCopilotの利用法**](#-cliでのcopilotの利用法)
    - [コマンドの説明をしてもらう](#コマンドの説明をしてもらう)
    - [コマンドの提案を要求する](#コマンドの提案を要求する)
      - [generic shell command](#generic-shell-command)
      - [gh command](#gh-command)
      - [git command](#git-command)
      - [Copy command to clipboard](#copy-command-to-clipboard)
      - [Explain command](#explain-command)
      - [Revise command](#revise-command)
      - [Rate response](#rate-response)
      - [Exit](#exit)
  - [📝 **CLIでのCopilotを使ってsvelteの環境を作成してみる**](#-cliでのcopilotを使ってsvelteの環境を作成してみる)
  - [📝 **Conclusion: まとめ**](#-conclusion-まとめ)
  - [📚 **References: 参考文献**](#-references-参考文献)

## 📝 **QuickStart: クイックスタート**
詳細は[公式のクイックスタート](https://docs.github.com/en/github-cli/github-cli/quickstart)をご覧ください。
 
1. GitHub CLI を macOS、Windows、または Linux にインストールします。詳細については、「[GitHub CLIリポジトリでのインストール](https://github.com/cli/cli#installation)」を参照してください。
2. ターミナルから次のコマンドを実行して、GitHub で認証します。`gh auth login`
3. 画面上の指示に従い認証を完了する。
4. Github Copilot in the CLIを有効化する。詳細については、[GitHub Copilot in the CLIの有効化](https://docs.github.com/en/copilot/github-copilot-in-the-cli/enabling-github-copilot-in-the-cli)
5. CLIにCopilotをインストールする。`gh extension install github/gh-copilot`

:::note warn
GitHub CLIを使うには、GitHub Copilot Businessの登録が必要です。GitHub Copilot Businessの詳細は[こちら](https://docs.github.com/en/enterprise-cloud@latest/copilot/overview-of-github-copilot/about-github-copilot-business)をご覧ください。機能制限はありますが、無料で使用することができます。
登録方法について書かれたZennの記事もありますので、[こちら](https://zenn.dev/sarah/articles/9460963461d8a2)をご覧ください。(登録は自己責任でお願いします)
:::

<details><summary>画像付き解説</summary>

まずは、リポジトリのコマンド(`winget install --id GitHub.cli`)を使ってインストール
![スクリーンショット 2023-11-09 105425.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/b21b3999-ba71-1eab-cb85-0db711833646.png)

:::note info
私の場合は、Windows環境なので、`winget install --id GitHub.cli`コマンドでインストールしました！
:::

もちろん入れたばっかりなので、アップデートはなし。(`winget upgrade --id GitHub.cli`)
![スクリーンショット 2023-11-09 105512.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/d3354756-165d-b479-0e45-b2cc95bbab1f.png)

CLIツール系は、コマンドプロンプトを開きなおさないと反映されないので、一度閉じて開きなおす。
![スクリーンショット 2023-11-09 105543.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/fa5c8c04-3328-3619-7629-d52029f95cf5.png)

`gh auth login`コマンドを実行して、画面上の指示に従います。
![スクリーンショット 2023-11-09 110222.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/ce89c462-11d4-e587-1100-e0ad79deeb0d.png)

:::note info
*Git*操作の優先プロトコルとして*HTTPS*を選択し、*GitHub*認証情報を使用して*Git*に対して認証するかどうかを尋ねるプロンプトに「はい」と答えると、*GitHub CLI*は*Git*認証情報を自動的に保存します。これにより、別個の資格情報マネージャーを設定したり*SSH*を使用したりする必要がなく、`git push`、`git pull`などを使用できるため便利です。
:::

GitHub.com の右上隅でプロフィール写真を選択し、Your organizationsをクリックします。
![スクリーンショット 2023-11-09 111753.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/b54bb2fb-7a18-5e1e-9084-8985d79abd63.png)

組織の横にある[設定]をクリックします。
![スクリーンショット 2023-11-09 111901.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/8d3b8cba-a5e5-c280-d04a-7705c193b98d.png)

サイドバーの [コード、計画、および自動化] セクションで、[コパイロット]をクリックし、[ポリシーと機能]をクリックします。
![スクリーンショット 2023-11-09 111949.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/3f5acc5c-2f9b-562c-9155-9e8219eb78fa.png)

「GitHub Copilot in the CLI」の右側でドロップダウン メニューを選択し、 [有効]をクリックします。
![スクリーンショット 2023-11-09 112016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/008bef20-c666-be51-3b0e-08fe70fb5c97.png)

`gh extension install github/gh-copilot`を実行して、GitHub CopilotをCLIの拡張機能としてインストールします。
![スクリーンショット 2023-11-09 113414.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/7c89133b-355e-e15c-0bda-c182f2da1e79.png)

</details>

## 📚 **CLIでのCopilotの利用法**
GitHub Copilotを`gh`コマンドと共に使うには、`gh copilot <SUBCOMMAND>`と入力します。さらに詳しいヘルプが必要な場合は、全体的なヘルプを得るために`gh copilot --help`を、特定のサブコマンドについてヘルプを得るために`gh copilot <SUBCOMMAND> --help`を使用できます。

```powershell
gh copilot --help
```
![スクリーンショット 2023-11-09 114021.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/8f65c0f3-172c-28e9-6fbf-8ec8fbc8c141.png)

なんかコマンド指定して下さいって言われました。

```powershell
gh copilot explain --help
```
![スクリーンショット 2023-11-09 114939.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/2dc40757-8d23-ebab-1693-31a0d6e40441.png)

例を使ってコマンドのhelpを表示してくれてますね！


### コマンドの説明をしてもらう
CLI上のCopilotにコマンドの説明を要求するには次のように実行します：

```powershell
gh copilot explain
```
![スクリーンショット 2023-11-09 114136.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/59c46272-e462-64b1-579c-493c3c8304f2.png)

または、説明が欲しいコマンドを直接プロンプトに追加します：

```powershell
gh copilot explain "sudo apt-get"
```
![スクリーンショット 2023-11-09 115016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/0733bb9b-e729-1123-ccbd-b5599e4d239a.png)

CLIのCopilotは、コマンドの目的とそれがどのように動作するかを簡単な言葉で説明します。これにより、コマンドの文書を通じて理解する必要が無く、コマンドが何を入力として受け取り、何を出力として生成するのか、具体的な例と共に情報が提供されます。

:::note info
現状では、上記の例のように質問の度に応答がかなり変化するようです。
:::

先ほどhelpで表示されたものもexplainしてもらいましょう。

```powershell
gh copilot explain 'git log --oneline --graph --decorate --all'
```

![スクリーンショット 2023-11-09 125516.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/0d8b2a30-06de-e39b-9268-94a7dfb5128b.png)

まだベータ版？？可能性しか感じませんね...。

### コマンドの提案を要求する
CLIのCopilotにコマンドの提案を要求するには次のように実行します：

```powershell
gh copilot suggest
```
![スクリーンショット 2023-11-09 114326.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/1dadc208-e78f-1b5d-ecba-569b1e62de0c.png)

このコマンドで、必要なコマンドを得るための対話がはじまります。CLIのCopilotは、より良い提案を得るために、求めているコマンドの種類（一般的なもの、git、またはgh）を指定することができます。

<details><summary>コマンドの種類の指定方法</summary>

```powershell
? What kind of command can I help you with?  [Use arrows to move, type to filter]
  generic shell command
  gh command
  git command
```

#### generic shell command
一般的なシェルコマンドを提案するには、「generic shell command」オプションを選択します。

#### gh command
GitHub CLIのコマンドを提案するには、「gh command」オプションを選択します。

#### git command
Gitのコマンドを提案するには、「git command」オプションを選択します。

</details>

すでに必要なコマンドがわかっている場合は、プロンプトにそれを含めることもできます。例えば、Gitをインストールしたい場合、次のようにCLIのCopilotにコマンドの提案を要求できます：

```powershell
gh copilot suggest "Install git"
```
![スクリーンショット 2023-11-09 114552.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/4b94bc36-06b6-fc0d-f325-01e44f53919b.png)

<details><summary>コマンドのオプション設定</summary>

```powershell
? Select an option  [Use arrows to move, type to filter]
  Copy command to clipboard
  Explain command
  Revise command
  Rate response
  Exit
```

#### Copy command to clipboard
タスクに最適なコマンドを生成したら、「Copy to clipboard」オプションを選択することで、それをクリップボードに簡単にコピーし、必要な場所で実行することができます。

#### Explain command
コマンドがどのように動作するかを理解したい場合は、「Explain command」オプションを選択することで、コマンドの説明を得ることができます。

#### Revise command
結果が期待通りでない場合は、返されたコマンドが期待に合うまで質問を修正し続けることができます。これは、「Revise command」オプションを選択することで行えます。

#### Rate response
CLIのCopilotは、提案されたコマンドが役に立ったかどうかを尋ねるために、提案の後に「Rate response」オプションを提供します。このフィードバックは、CLIのCopilotの改善に役立ちます。

#### Exit
CLIのCopilotの対話を終了するには、「Exit」オプションを選択します。

</details>

<!-- copilotを使ってsvelteの環境作成 -->
## 📝 **CLIでのCopilotを使ってsvelteの環境を作成してみる**
 最近興味がある、Svelteとやらの環境を作成してみます。まずは、`gh copilot suggest`コマンドを実行します。

 ```powershell
gh copilot suggest "install svelte"
 ```
![スクリーンショット 2023-11-09 120508.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/0db403b6-449a-f6bd-819a-1ee4eabd831e.png)

んで、この後どうすればいいんだ？と思ったら、`gh copilot explain`コマンドを実行します。
```powershell
gh copilot explain "npm install svelte"
```
![スクリーンショット 2023-11-09 121829.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/6507ebdf-07bc-3da6-8fea-1b55c6afe3c7.png)

んん？よくわからないけど、プロジェクトをスタートするところまでのコマンドを出して欲しい。
```powershell
gh copilot suggest "start svelte project"
```
![スクリーンショット 2023-11-09 123618.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/5723d334-8aae-476c-8325-3009a2f60314.png)

おおお、なんかたくさんコマンド出たぞ。これをコピペして実行してみる。

```powershell
npx degit sveltejs/template svelte-app
cd svelte-app
npm install
npm run dev
```

![スクリーンショット 2023-11-09 120724.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/2e6c8b87-c43b-326d-5f9a-61f1b557e4f5.png)

お、できたかな？localの8080ポートは使用されているので、代わりに50113で起動したみたい。

![スクリーンショット 2023-11-09 121016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/4a91c3d8-54ad-cde6-842b-51a0898ff766.png)

できたぁあああ!!!!
念のためExplain commandも見てみる。
```powershell
? Select an option
  Explain command
```
![スクリーンショット 2023-11-09 124003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/ad409fbb-66b8-3a1a-2c13-3eb8bab85624.png)

英語でいろいろ説明してくれる。これは便利っすね...

<!-- まとめ -->
## 📝 **Conclusion: まとめ**
 今回は、GitHub CopilotのCLIツールの紹介をしました。GitHub CopilotのCLIツールは、ターミナル上で直接適切なコマンドを提案してくれる非常に便利な機能を提供しています。また、ターミナル内でコマンドの質問をすることも可能です！私が実際にSvelteの環境を作った時も、その有用性を強く感じました。ぜひ、皆さんも使ってみてください！

 最後まで読んでくださりありがとうございました！
ご意見ご感想などありましたら、コメントお願いします！

## 📚 **References: 参考文献**

https://github.blog/changelog/2023-11-08-github-copilot-in-the-cli-now-in-public-beta/

https://docs.github.com/github-cli

https://docs.github.com/copilot

https://github.com/cli/cli#installation