GitHub Copilot ChatにWebページ作成をオマカセしてみた

2023年12月にGitHub Copilot ChatがGAされました！

そこでGitHub Copilot Chatの導入も兼ね、チャットで生成されたコードだけで簡単なWebページを作成してみました。

## GitHub Copilot Chatの導入手順

### 前提
GitHub Copilot Chatの利用には、以下が必要です。
* GitHub Copilotサブスクリプション
  * 詳細は、[こちら](https://docs.github.com/ja/enterprise-cloud@latest/billing/managing-billing-for-github-copilot/about-billing-for-github-copilot)のページをご確認ください。

また、今回はVisual Studio Codeを利用を前提としています。

#### インストール（Visual Studio Code）
1. 下記2つの拡張機能をインストールします。
   * [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
   * [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat)
1. インストール後にGitHubへのサインインを促す通知が表示されるため、サインインおよびVisual Studio Codeのアクセス許可を行います。
1. サインイン後はサイドバーの下記アイコンからチャット機能が利用できます。
  ![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398865/cc174dba-7635-0420-f614-e36b4b1d8b87.png)


## 早速作らせてみた
題材としては「熱中症対策を呼び掛けるWebサイト」をGitHub Copilotだけで作らせてみます。

### 1. ざっくり聞いてみる
まずは、ざっくり「熱中症対策を呼び掛けるWebサイトを作って」とチャットしてみます。

#### GitHub Copilotからの回答
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398865/e2835ee0-aeb7-b9b4-d9b3-4bd439bf55af.png)

さすがにこれだけではコードの生成まではせず、まずどんなものが欲しいか教えて、と聞いてきました。

また、機能の提案もいくつか挙げてくれました。

### 2. 具体的に内容を指定してみる
上記の回答に対し、以下の内容を含めたHTMLが欲しいと答えてみます。

```
・熱中症に注意
・熱中症の初期症状
・熱中症の予防方法
・水分補給の方法
・同行者が熱中症になった場合の対処法
```

#### GitHub Copilotからの回答
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398865/23c2bba8-4c5a-f6b4-0957-9d2b6c904f05.png)


#### 適用結果
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398865/48bbbf4d-d262-fc67-af2d-4c3a1c1d7ce1.png)


上記の通り、指定した内容を含めた簡単なHTMLを生成してくれました。

「熱中症の初期症状」などの項目にあるとおり、箇条書きで書いた各項目の内容も生成してくれています。

### 3. CSSも作らせてみる
GitHub Copilotの回答結果がHTMLのみだったので、CSSも作らせてみます。

#### GitHub Copilotからの回答
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398865/1d7d1fa5-e927-ef82-214f-992870af57c1.png)

#### 適用結果
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398865/d9d26c71-0cbc-5dab-6cb0-c9e2c7a0aa5b.png)

センタリングや余白があり若干の変化はあったものの、最初とほとんど変わらないですね・・・。もっと「いい感じにする」にはチャット内容を工夫する必要がありそうです。

### 4. 「LPっぽくして」と聞いてみる
HTML/CSSをよくあるランディングページっぽいデザインにしてほしい、と聞いてみます。

#### GitHub Copilotからの回答
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398865/d1b01b55-eb21-9b3a-758b-f4c5241816bb.png)

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398865/2d179b74-86a8-732d-2a46-96c7a77a4ae2.png)

#### 適用結果
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398865/8bf2e85f-ec65-1c21-4c8e-03d55118a032.png)

画像：[フリー素材ぱくたそ（www.pakutaso.com）](https://www.pakutaso.com/)

どうでしょう？最初に出力させた結果と比べてすごく「それっぽい」サイトになったと思いませんか？

## 使ってみて気づいたこと
### Webページの骨子には使えるかも
もちろん生成されたWebページの実用化にあたってはコードの精査やカスタマイズが必要ですが、ある程度の骨子には使えそうな感触です。

### 全部エディター上で完結するのは楽！
Visual Studio Code上でGitHub Copilotとのチャットを何回か行うだけで、自分の欲しいコードを作成することができるのはとても強力ですね。

他にもGitHub Copilotではテストコードの生成機能などもあるようなので、そちらも今後は試していきたいです。

### コツは「何が欲しいか」を具体的にすること
GitHub Copilotにコード生成をさせる際は、「〇〇を作って」のみだと思っていた結果と異なる場合があるため、具体的な情報をGitHub Copilotに与えると良いです。

今回のようなWebページの場合は「どのようなコンテンツが欲しいか」や「どういったページにして欲しいか」などを具体的にGitHub Copilotに与えることにより、ぐっと自分が求めている結果に近づくことがわかりました。

## まとめ
今回は、GitHub Copilot ChatにWebページ作成をオマカセしてみました。

今後もGitHub Copilotのコード生成機能やテスト作成機能など、色々と機能を試していきたいと思います。

## 参考サイト
https://docs.github.com/ja/copilot/using-github-copilot/getting-started-with-github-copilot