🐶

vscodeの拡張機能Genie AIを使ってみた

2023/03/24に公開

はじめに

ポートのバックエンドを担当している @nakahara です。

chatGPT盛り上がっていますねー!
自分はブラウザ版で使用していたのですが、同僚に進められてvscodeの拡張機能を試してみることにしました。

まずは日本語記事も多いvscode chatGPTを試してみようと思い、marketplaceで検索すると、、
なんと自動ログイン機能が利用規約に反していたらしく、削除されていました、、orz
https://marketplace.visualstudio.com/items?itemName=gencay.vscode-chatgpt

仕方がないので、他のchatGPT系の拡張機能をあさってみることに。
まず見つかったのがCode GPT、他にもTwitterで話題になっていた、Rubberduckなどを試してみました。

両者ともに開発も盛んで機能的にも満足のいくものだったのですが、日本語で使用するとなると少し使いにくい印象でした。
特にchatに記入している文章がenterキー入力1回で送信されてしまうので、日本語の場合は漢字変換などがやりにくいのです。

そんなこんなで数日が経ち、、
なんとなくmarketplaceを見ていると、なんか新しいのが公開されてる!
その名もChatGPT - Genie AI
早速試してみたところ、なかなかの使いやすさでした。

なので今回はGenie AIの導入方法、基本的な使い方について書いていこうと思います。

インストール

まずは通常通り、vscodeのExtensionsでGenie AIを検索しインストールします。

インストールが完了したらサイドバーのランプのアイコンからGenieを呼び出し、なんでも良いので一言chatをします。
すると画面の右下にAPIキー設定用の導線が表示されるので、クリックしてOpenAiのAPI Keyを入力します。
(API Keyの取得方法はこちらを参考にしました)

API Key設定後にGenieから返答が来れば準備完了です!

プロンプトに基づいたソースコードの出力

通常のchat形式でのやり取りはもちろん可能なのですが、プロンプトに基づいたソースコードを直接ファイルとして出力することができます。

まずはウィンドウ右上のメニューからEditor viewに入ります。

ruby on railsでcsvをインポートしてDBに保存する。 その際一部のカラムには別のcsvファイルのデータを格納する。
という指示を入力してみると。

ファイルが作成されて、コードが生成されました!

その他の機能

コード生成以外にも様々な補助機能が搭載されています。
コードを選択して右クリックすることで、コードの説明やテストの生成などを行うことができます。

その中で便利な機能をいくつか紹介しようと思います。

Genie: Add tests:

ソースコードに対するテストコードをせいせしてくれます。
今回はrailsのコードなので、RSpecが生成されます。

Genie: Find bugs

ソースコードのバグを探してくれます。

Genie: Explain

ソースコードの解説をしてくれます。
デフォルトだと英語で返ってきてしまうので、SettingsのGenieai › Prompt Prefix: Explainを以下のように変更すると日本語で返してくれます。
Explain the following code -> Explain the following code in japanese

まとめ

ほんの一部ではありますが、Genie AIの機能を紹介させてもらいました!
実際に触ってみると新しい時代の到来を感じることができると思います。

また、開発も盛んに行われているので今後のアップデートにも期待です!

Discussion