GitHub Copilot ChatではじめるJavaScript開発(1) チャットで会話しながらJavaScriptのコードを書いてみる

近年、ソフトウェアの開発現場ではAIによるプログラミング支援の活用が普及しつつある。AIを活用することで、コードの自動生成やバグの検出、さらにはコードレビューの効率化などが可能になり、開発者の生産性は大幅に向上する。しかし、初めてプログラミングにAIを使う人は、何ができて、どのように使い始めればいいのかわからない場合もあるだろう。

本連載では、AIプログラミングアシスタントツール「GitHub Copilot Chat」を使って、JavaScriptによるWebアプリケーションを開発するやり方を解説する。このツールは対話形式でプログラミングをサポートしてくれ、日本語で質問をしながらコードを書いたり、問題を解決したりすることができる。最終的には、簡単な天気予報アプリケーションを完成させることを目指す。

AIを使ったソフトウェア開発とは

ソフトウェア開発におけるAIの導入は、大きく分けると次のような段階がある。

コード補完をはじめとするコーディング支援の利用
自然言語での指示に基づくコードの生成や修正の導入
自動的にコードの生成や変更をする自律型エージェントの導入

コーディング支援は従来のIDE（統合開発環境）でも行われてきたが、AIを活用することで、より高度なコード補完やエラー検出が可能になっている。しかし、これはあくまでも人間がソースコードを記述することを前提とした支援機能である。

現在はもっと進んでおり、人間がコードを書かなくても、実装したい機能について文章で説明するだけで、AIがコードを生成してくれるようになった。自律型エージェントは、AIが自ら判断して自動的にコードを生成・修正するもので、高度なエージェントであれば人間の代わりにAIを開発者1人として扱うことができる。

現状、コード補完については、多くの開発現場で当たり前に使われていると言っていいだろう。よりAIの採用が進んだ現場では、自然言語でのコード生成も積極的に使われるようになってきている。自律型エージェントはまだ発展途上の技術だが、その性能は日進月歩で進化しており、先進的な企業では実践での導入も始められている。

GitHub Copilot Chatとは

「GitHub Copilot」は、GitHubが提供しているAIを使ったプログラミングアシスタントツールである。前述のコーディング支援と自然言語でのコード生成の両方をサポートしていることに加え、自律型エージェント機能もプレビュー版として公開されている。

これらの機能のうち、GitHub Copilot Chat（以下、Copilot Chatと表記）は自然言語でのコード生成を実現するものだ。チャットインタフェースを使って、「この関数の書き方を教えて」「このエラーの原因は何？」といった質問に対して、具体的なコード例とともに回答してくれる。

GitHub Copilotには、個人向けにCopilot Free、Copilot Pro、Copilot Pro+の3つのプランが用意されており、いずれのプランでもCopilot Chatを利用できる。Freeプランであれば無料で利用可能だが、Chatは1カ月あたり50メッセージまでという制限が設けられている。この制限を超えて使いたい場合はProプランやPro+プランへの加入が必要となる。

Copilot Chatの準備

それでは、早速Copilot Chatを使ってみよう。その前に、今回は開発ツールとして「Visual Studio Code」（以下、VSCode）を使うので、まずは次のWebサイトからVSCodeをダウンロードしてインストールしておく。

Visual Studio Code - Code Editing. Redefined

次に、Copilot Chatを含むGitHub Copilotを使うにはGitHubアカウントが必要なので、まだアカウントがない人は次のWebサイトで登録する必要がある。

GitHub

GitHub Copilotは次のWebサイトで利用登録ができる。Freeプランの場合は、GitHubアカウントがあればいつでも利用を開始できるので、まずはFreeプランからはじめてみよう。

GitHub Copilot ・あなたの AI ペアプログラマー

プラン選択ページから、VS Codeを開いて開発を始める

[開始する]ボタンの下にある[VS Code で開く]ボタンをクリックすると、VSCodeが起動して、自動的に次の2つの拡張機能のインストールがはじまる。

GitHub Copilot
GitHub Copilot Chat

自動で拡張機能のインストールが始まらない場合は、左の拡張機能アイコン（四角が4つ並んだマーク）をクリックして、検索バーに「GitHub Copilot」と入力し、検索結果に出てきた「GitHub Copilot」と「GitHub Copilot Chat」をインストールすればよい。

自分でGitHub CopilotとGitHub Copilot Chatの拡張機能をインストールする場合

インストール完了後、GitHubアカウントでの認証（GitHubアカウントでのログイン）が求められるので、指示に従って認証を行おう。

Copilot Chatとの最初の会話

まずは動作確認も兼ねて、Webブラウザで「Hello, Copilot!」と表示するHTML/JavaScriptコードをCopilot Chatで作ってみよう。まず、次の手順でCopilot Chatで編集するファイルを用意する。

任意の場新に新しいフォルダ(例: copilot-test)を作り、VSCodeで開く
「index.html」ファイルを作って開く
VSCode右上のアイコンをクリックするか、「Ctrl+Shift+I」（Windows）または「Cmd+Shift+I」(Mac)のショートカットキーで、Copilot Chatパネルを開く

チャットパネルを開くアイコンと、チャットパネル

Copilot Chatには「Edit」「Ask」「Agent」の3つのモードが用意されており、Copilot Chatパネルの左下で切り替えることができる。「Edit」はチャットへの指示にしたがってコードの生成や編集をしてくれるモード、「Ask」は選択したコードに関する質問に答えてくれるモード、「Agent」はAIエージェントが自律的に開発を進めてくれるモードとなっている。今回はチャットで指示してコーディングを手伝ってもらいたいので「Edit」モードにしておく。

Copilot Chatには用途に応じて3つのモードがある

この状態で、チャットに次のように入力してみよう。

JavaScriptで "Hello, Copilot!" と表示するHTMLを書いてください。

すると、Copilotが自動で次のようなHTMLコードを生成して、index.htmlに書き込んでくれるはずだ。

指示にしたがってコードを提案してくれる

筆者の場合は、次のようなコードが生成された。なお、同じ指示を出してもAIは毎回同じコードを生成するとは限らないので、みなさんの環境ではこのコード例とは違うコードが生される可能性もある。正しい動作になっているかどうかが大事なので、コードの細部が違ってもあまり気にせずに作業を続けよう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Hello Copilot</title>
</head>
<body>
  <script>
    document.write("Hello, Copilot!");
  </script>
</body>
</html

この状態で、エディターの下部に出てきた「保持」をクリックすると、生成されたコードがファイルに反映される。コードが気に入らない場合は、「元に戻す」をクリックすれば不採用となる。

「保持」した上で、index.htmlをWebブラウザで開いてみよう。「Hello, Copilot!」と表示されていれば成功だ。

Webブラウザでindex.htmlを開いた様子

チャットでコードの修正を依頼する

ここで、文字色を青に変える修正をチャットで頼んでみよう。

文字色を青にしてください。

すると、エディターには元のコードが赤背景で、修正案のコードが緑背景で表示される。

変更する箇所が分かるように色分けして提示してくれる

修正案に問題がなければ、「保持」をクリックすれば変更が反映される。筆者の環境では、Copilotが提案した修正後のコードは次のようになった。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Hello Copilot</title>
</head>
<body>
  <span style="color: blue;">
    <script>
      document.write("Hello, Copilot!");
    </script>
  </span>
</body>
</html>

Webブラウザでindex.htmlを更新すると、文字の色が青色に変わることが確認できる。