LoginSignup
15
9
@kanuazut

VS Code で Gemini Code Assist を使う

Posted at

はじめに

コーディングにAIが使われるようになってだいぶ時間が経ちました。AIエディタも様々なものが出ましたが有名どころとしてはCursorやGithub Copilotが挙げられると思います。これらのツールは、定額課金であるため個人で手が出しづらかったり契約にハードルがあるような職場もあるかもしれません。
ということで従量課金で使えるVSCode拡張のAIエディタ機能を探していたところ、Geminiの拡張を知りましたので使ってみました。

あまり使っている人が見当たらなかったので共有できればと思います。

誰向けの記事か

  • Gemini Code Assist（VSCode拡張）について知りたい人
  • 従量課金のAIエディタツールを探している人

Gemini Code Assist

Gemini Code Assistは、Google Cloud の AI を活用したコラボレーターと表現されており

  • コードの問題を解決するためのガイダンスを提供する。
  • プロジェクトのコードを生成する。
  • コーディング時にインラインの候補を受け取る。

といった機能を提供しています。要するにAIエディタやコーディングアシスタントというものです。

Google Cloudには別のサービス名でDuet AI for Developersというものがあり、内容は殆ど同じに見えるのですがドキュメントは分かれているようなので、本記事ではGemini Code Assistという名称を利用します。

Gemini Code Assist自体は、Cloud Shellエディタでも利用可能ですが、今回はVS Codeの拡張機能を利用します。VS Code 拡張は、「Gemini + Google Cloud Code」という名前で提供されています。

ちなみに入力データの利用については、公式ドキュメントにも

Gemini がプロンプトやそのレスポンスをデータとして使用してモデルをトレーニングすることはありせん。

と記載されているので、安心して利用できます。

始め方

事前準備

以下の事前準備を前提とします。

  • Google CloudのGoogleアカウントを作成
  • アカウントにAPI利用権限を付与
    • 今回はCloud AI Companionユーザーの権限を付与したユーザで操作しています。

VS CodeでGeminiを利用可能にする

VS CodeのSide barからExtensionを開き、「Gemini」と入力。
「Gemini + Goolg Cloud Code」が表示されるので「Install」をクリックします。
image.png

インストールが完了するとWelcomeページが開きます。
image.png

Side barに以下2つアイコンが追加されています。

アイコン 機能名 用途
image.png Gemini AI Assistantの機能です。今回はこっちを使います。
image.png Cloud Code Compute EngineやCloud RunなどGoogle Cloudのサービスを利用する為の機能です。

今回はGeminiアイコンを開きます。


「Login to Google Cloud」をクリック。
image.png

「Open」
image.png

ログイン用のアカウントを選択します。
image.png

「ログイン」
image.png

「Enable API」で有効化します。
image.png

これでGeminiを使用する準備が出来ました。左下のチャット欄に指示を入力するとGeminiが答えてくれます。
ちなみにBottom barの左下の雲アイコンの右側にはログイン中のGoogle Cloudのプロジェクト名が表示されます。ログイン後はデフォルトPJが選択されますが、適宜クリックして変更してください。（以下のスクショではPJ名は消しています）
image.png

使い方

実際に拡張機能の使い方を見ていきます。

チャットからコード生成

まずはゼロベースでコードを生成する指示を出してみます。
以下の例は、青色の部分が入力した指示文で、それ以降はGeminiの出力です。

image.png

このくらいは難なく作成してくれます。
実際にこのコードを実行すると、きちんとCSVファイルがJSONファイルに変換されました。


生成結果の「＋」をクリックすると、右側のエディタで開いているファイルにコードが挿入されます。
image.png

選択範囲の説明

例えば以下のようにコードを選択します。（コードはFastAPIのチュートリアルコードです）
image.png

チャットのプロンプトに「このコードを説明して」と入力実行すると以下のように説明してくれます。
image.png

ユニットテストの作成

先ほどと同じ範囲を選択しています。
選択中は、プロンプトに「Generate unit test」とサゲストが出ているので送信してみます。
image.png

テストコードが出力されました。
選択範囲外で定義していたItemクラスの情報も読み取って、必須パラメータのpriceの有無などもチェックしているようです。
選択範囲外もファイル内容を参照しているということは注意です。
image.png

オートコンプリート

テキストを入力中にGeminiが続きを考えて提案してくれます。

以下のようにコード補完が提案されます。
Tabキーをおすと提案内容を受け入れて確定することができます。
image.png

コードだけでなく一般文章にも利用可能で、以下のようにリアルタイムで次の候補を表示してくれます。
image.png

リアルタイムで文字を入力するたびに内容が変化するので、かなり面白いのですが、
時折まったく補完の提案をしてくれなくなったりします。動作が不安定なのか、何かがトリガーになっているのかは不明です。

サゲスト(スマートアクション)

テキストを選択すると、豆電球マークが表示されクリックすると修正がサゲストされます。
下のMore Actions...はどこを選択しても提案される固定の内容です。
Quick Fixは、選択内容に従って様々な提案が表示されます。コードの修正以外にも、importで指定しているライブラリの依存関係が解決できないときは実行環境の変更なども提案されるようです。
image.png

おわりに

今回はVS Code拡張として使えるエディタアシスタントGemini Code Assistを紹介しました。
生成されるコードのクオリティの検証は未だできていませんが、簡単なコードであれば任せられそうな印象でした。先発のAIエディタに比べると成長途中のプロダクトだと思いますが、それなりに生産性向上をあやかれるものにはなってきていると思います。
Google Cloudアカウントがあって、SaaSアカウントの登録ができない、という状況で使うには良い選択肢に感じました。（そんな状況、ありますよね？）

15
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
15
9