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