スパークルを活用しよう

スパークルを活用しよう

リンクをコピーしました

スパークルとはGitHub Copilotの機能を効率よく使うことができる機能です。このカリキュラムではスパークルの使い方について学びます。

リポジトリの初期化をしよう

リンクをコピーしました

まずはこのアプリのリポジトリの初期化を行います。
その前に「todomvc」は不要になったので削除します。

「todomvc」をディレクトリごと削除してください。

以下のように削除できたら次へ進みます。

削除ができたら、左メニューの「ソース管理」のボタンをクリックし、ソース管理を表示させます。
すると以下の表示になるので、「リポジトリの初期化をする」をクリックします。
選択画面が表示された方は「copilot_curriculum」のディレクトリを選択してください。

initial コミットをしよう

リンクをコピーしました

リポジトリの初期化が完了するとコミットをすることができるようになります。
まずは一番最初のコミットであるinitialコミットを作成します。

初期化が終わると以下の画面になるので以下のように「initial commit」と入力し、コミットボタンをクリックしてコミットします。

すると以下の確認画面になるので「はい」をクリックします。

これでinitalコミットできました。

スパークルでコミットメッセージを作成しよう

リンクをコピーしました

このように通常コミットメッセージは自分で入力する必要があります。
どのような文章にするか考えるのが面倒な作業なのですが、GitHub Copilotのスパークル機能を使うことで、AIにコミットメッセージを作成してもらうことができます。

それでは新たなコミットをするため、index.htmlを開き、タイトル部分を「シンプルタスクマネージャー」に変更しましょう。

それではこの変更をコミットしましょう。
その際、前述した通りコミットメッセージは自分で考える必要がありますが、メッセージ入力フォームの右にある「スパークル」アイコンをクリックすると自動でCopilotがコミットメッセージを入力してくれます。
スパークルは以下の画像のような星の形をしたアイコンです。

スパークルをクリックすると以下のようにコミットメッセージを作成することができます。

コミットメッセージを考えるのは面倒ですが、この機能を使えばCopilotが編集・追加されたコードを検知して、最適なメッセージを考えてくれるので、非常に便利な機能です。

上の動画のようにコミットメッセージが作成されるか確認しましょう。
その後、コミットもしておきましょう。

エディター内でスパークルを使おう

リンクをコピーしました

エディタ内で変数や定数、関数など、または行数にカーソルを合わせるとスパークルを表示させることができます。スパークルの機能は言語によって異なります。

関数名のスパークルはドキュメントやテストを生成できたり、関数を他のファイルに移動させたりすることができます。

JavaScriptのdomを指定した変数、定数のスパークルは変数、定数に格納しない状態のコードに編集したり、ドキュメントを作成することができます。

行数をクリックすると表示させることができるスパークルでは、HTMLのファイルだとインラインチャットを素早く開いたり、レビューをしてもらうことができます。

それでは実際にスパークルを表示させ、どのようなことができるか確認をしてみましょう。