AI開発ツールGenie AI: VSCode拡張機能の活用方法
はじめに
こんにちは！フロントエンドエンジニアの小泉です。
最近はCopilotをはじめとするAI系開発ツールが増えてきていますね。
僕もまだまだ活用しきれていないですが、今回は開発で役にたつGenie AIというVSCodeの拡張機能について紹介しようと思います。
GenieAIとは？
あなたの最高のAIペアプログラマーです。会話を保存していつでも続行できます。Visual Studio Code - ChatGPTを統合できます。GPT-4、GPT3.5、GPT3、Codexモデルをサポートしています。新しいファイルを作成し、ワンクリックで差分を表示します。コードを学んだり、テストを追加したり、バグを見つけたりするあなたの副操縦士です。
ペアプログラマーと紹介されているとおり、実装の不明点を聞けたり実装方針で悩んでいる時に相談しながら開発ができます。
また、VSCode上で完結できるのでChatGPTを利用するよりも体験が良いです。
後で紹介するのですが、ChatGPTでコードについて質問しようとする時はコピペしないといけないと思うのですが、Genie AIではコードを選択して右クリックで可能です。
GenieAIの初期設定
Open AIのAPIキーを設定すればすぐ利用開始できます。
初期設定では、Genie AIからの回答が英語なので日本語にしたい場合は設定の変更が必要です。
Genie AIの設定画面から下記の画像のように日本語のプロンプトを設定してあげます。
では早速、場面別でどのように利用できるか見ていきましょう！
コードがわからない時
わからないコードを選択して右クリックをします。
画像の赤矢印で指している「Genie: Explain」を実行するとVSCodeのサイドバーでGenie AIがコードの説明をしてくれます。
Genie AIの回答
画像は説明が長いので途中までの説明しか載せていませんが、ちゃんと説明していますね！
また、追加で質問したいときはサイドバーの下にある入力欄からメッセージを投げるとコードに対して追加で質問ができます。質問をしたコードを記憶しているので、再度コードを選択しなくても良いです。
Genie AIからの全ての回答が表示されるまでには少し時間がかかります。そのため、コードを読み始めるときにはまずGenie AIに問い合わせてから自分で読み進め、理解できなかった部分についてはGenie AIの回答を参照する。という方法が効率的かもしれません。
レビュー時
レビュー時でなくても良いのですが、「ここのコードもっと上手く書けそうだなぁ」という時、先ほどと同じように対象コードを右クリックして「Genie: Optimize」を選択します。
今回は下記のコードを最適化しようと思います。
function processData(input) {
let arr = input.split(' ').map(num => parseInt(num));
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i];
}
console.log(sum);
}Genie AIの回答
最適化とコードの説明もしてくれていますね！
また、コード上にあるDiffボタンをクリックすると変更差分の表示、Insertボタンでこのコードをファイルに出力してくれます。
その他の機能
個人的によく利用するのは今まで挙げた機能なのですが、他にも下記のような機能があります。
テストの作成
バグの検知
コメントの追加
コードの補完
カスタムプロンプトの実行
カスタムプロンプトも利用できるので、積極的に他の使い方を模索していきたいですね。
最後に
今回は、Genie AIについて紹介させて頂きました。
他にも開発に活かせる便利なAIツールはたくさんあるので、日々キャッチアップしていく必要がありそうですね。
フクロウラボでは、開発チーム全体でCopilotを無償で利用できるようにするなど積極的にAIを活用していく方針です。
今後もより開発に活用可能なツールを発見し、積極的に導入していきたいです。
この記事が気に入ったらサポートをしてみませんか？