GitHub Copilotでストップウォッチを作ってみた。

GitHub Copilotは、OpenAIとMicrosoftが共同開発した人工知能(AI)ツールです。
プログラミングの作業を支援するために、コードの自動生成や予測変換を提供します。
具体的には、コードの入力補完、関数や変数の自動生成、コメントの自動生成などが可能です。
今回、GitHubCopilotのCodeの入力補完を使って、ストップウォッチアプリを作ってみることにしました。

使い方

GitHub Copilotを使用するには、Visual Studio Codeなどのエディタを使用する必要があります。
GitHub Copilotは、エディタ内に組み込まれた拡張機能として提供されており、エディタに組み込んだ拡張機能を有効化することで、GitHub Copilotを使用することができます。

完成形イメージ

今回作るストップウォッチアプリの完成形のイメージになります。
HTML+JavaScriptを用いて作成していこうと思います。

開発開始

レポジトリを作って、VSCode でフォルダを開く

GitHubでレポジトリを作って、VSCode で開く

VSCode が開きます。
現在フォルダには何も入っていないのでこの状態です。
(左側のエクスプローラーカラムには何も入っていない)

各ファイルを作成

現在空っぽのフォルダに、ファイルを作っていきます。

以下の 3 つのファイルを作ります。

  • index.html
  • style.css
  • app.js

ファイルを作るときは、このボタンから作る。

HTML ファイルを編集

index.html ページで「html:5」と入力し、Enter キーを押します。
HTML5 テンプレート コードがファイルに追加されます。

index.html の <head> </head>にはウェブページの情報を書いて、<body> </body> 内に構造を書きます。

Copilotに与える情報を可能な限り多くするために、コメントを入れていきます。
まずは、何を作りたいかを教えてあげます。

改行すると、Copilotがサジェストしてくれます。
今回は、見出しを作ってはどうか、と提案してくれたようでした。

なお、Tabキーを押すことで、承諾することができ、コントロール+Returnで候補を教えてくれる画面が開きます。

Tabで確定

コントロール+Returnで候補が出てくる

進めていくと、「時間」「スタートボタン」「ストップボタン」「リセットボタン」をサジェストしてくれました。 さすが。。。
やりたいことと一致していたので、そのまま承諾。

ほんの数分でここまで作ることができました。

続きは動画で

GitHub Copilotを用いることで、ストップウォッチアプリ程度の簡易的なものであれば10分以内に開発が可能なことがわかりました。

GitHubでも公開中。https://github.com/sakurai-yt/web-stopwatch