Genie AIによるコーディング支援
ここから、プログラムコードをChatGPTに自動生成してもらい、Genie AIを通じていろいろとChatGPTのお世話になってみることにします。
コードを自動生成してみる
まずは、コードを自動生成するために以下の質問を投げてみました。
配列を受け取ってソートして返す関数をJavaScriptで作成してください。ソートのアルゴリズムはバブルソートとします。
これで回答がプライマリサイドバーに返りますが、コードだけでなく説明文も加わるという親切ぶりです（図6）。なお、回答文は、質問文のニュアンス、設定、タイミングによっても変わるので、あくまでも一例です。回答文はコピーすることができ、マークダウン表記になります。
コードは、ソート済みの配列が渡された場合の処理も入ったものとなっています。この処理がないものや、さらに繰り返し範囲を最適化するコードが返ってくるケースもあります。説明文は、筆者が書いた文のようにも見えますが、これはChatGPTの書いた文です。関数の利用例まで付けてくれる親切さです。このように、ChatGPTはコードだけでなく説明文や利用例も加えてくれます。
テストコードを追加してみる
基本となるコードができたので、テストコードを追加してみましょう。上記で作成したbubbleSort関数をVSCodeのエディタにコピーします。コピーは、コードの上にある［Copy］アイコンをクリックします。［New］アイコンでファイルを新規作成してもよいです。そして、エディタでコード全体を選択して右クリックし、表示されるコンテキストメニューから［Genie: Add tests］を選択します。
このように、テストデータとテスト用の関数、そしてその呼び出しのコードが生成されます（図7）。この場合は単独でテスト可能なコードを生成してくれますが、Mochaなどのテストフレームワークを使うことを前提としたコードを生成する場合もあります。なお、生成したコードはコードの上にある［Insert］アイコンをクリックすると、先ほど作成したファイルにそのまま挿入することができます。
コメントを追加してみる
コメントを付ける作業は必要ですが面倒なものです。これを代行してもらいましょう。上記で作成したbubbleSort関数全体を選択して右クリックし、表示されるコンテキストメニューから［Genie: Add comments］を選択します。
このようにコメントが付与されました（図8）。質問文が日本語なので、このように日本語のコメントが付きます。英語で質問するとコメントは英語になります。また、コメントの粒度はコードの長さなどで変わるようです。今回のように要所要所のみに付与される場合もあれば、毎行に細かく付く場合もあります。
説明させてみる
コードの説明は、コードのドキュメンテーションには必要なものです。これを代行してもらえたら、かなり楽だと思うのは著者だけではないでしょう。上記で作成したbubbleSort関数とテストコードの全体を選択して右クリックし、表示されるコンテキストメニューから［Genie: Explain］を選択します。
このケースでは手順がメインとなりましたが、うまい具合に要点を絞ってくれる場合もあります。計算量オーダーまで示してくれるケースもあるので、アルゴリズムの評価の参考にもなるでしょう（図9）。
バグを指摘させてみる
自分で書いたコードが思うように動かない場合、ChatGPTの力を借りようとすることは、その是非はともかく増えてくるでしょう。bubbleSort関数を少しいじって想定通りに動かないようにして、関数全体を選択して右クリックして表示されるコンテキストメニューから［Genie: Add Find bugs］を選択します。
if (arr[j] > arr[j + 1]) {
↓比較演算子の向きを逆にしてしまう
if (arr[j] < arr[j + 1]) {
以下のように、期待通りに指摘されました（図10）。
修正されたコードまで提示されるのは便利です。ただし、検証は必要なので鵜呑みは禁物です。あくまでもSuggestionという位置付けにしておきましょう。
最適化させてみる
最後は最適化です。自分では最善と思って書いたコードに改善の余地がないか、聞いてみるのはプログラミングスキルの向上によいことです。関数全体を選択して右クリックして表示されるコンテキストメニューから［Genie: Optimize］を選択します。
バブルソートの弱点である、無駄な繰り返しを省略できることが例示されています（図11）。
まとめ
今回は、AIを開発効率やプログラミングスキルの向上に役立てようということで、話題のChatGPTをVSCodeから利用できる拡張機能、ChatGPT - Genie AIを紹介しました。
次回は、VSCodeをWeb開発用エディタとして強化する設定と拡張機能を紹介します。
