VS Code で Gemini Code Assist を使う



# はじめに
コーディングに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」という名前で提供されています。

https://marketplace.visualstudio.com/items?itemName=GoogleCloudTools.cloudcode




ちなみに入力データの利用については、[公式ドキュメント](https://cloud.google.com/code/docs/vscode/write-code-gemini?hl=ja)にも
> Gemini がプロンプトやそのレスポンスをデータとして使用してモデルをトレーニングすることはありせん。

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



# 始め方
## 事前準備
以下の事前準備を前提とします。

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

## VS CodeでGeminiを利用可能にする
VS CodeのSide barからExtensionを開き、「Gemini」と入力。
「Gemini + Goolg Cloud Code」が表示されるので「Install」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/49099617-44fd-58ec-0c26-a741e2548597.png)


インストールが完了するとWelcomeページが開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/db19d5a4-0ffd-eef9-1f23-1b90d9053923.png)


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

|アイコン|機能名|用途|
|-|-|-|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/845ebd0e-8a54-f224-a1c8-cb2668588131.png)|Gemini|AI Assistantの機能です。今回はこっちを使います。|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/d19bcf5f-6de2-42a1-4458-4f969d220050.png)|Cloud Code|Compute EngineやCloud RunなどGoogle Cloudのサービスを利用する為の機能です。|

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

<br>


「Login to Google Cloud」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/663c7b6c-c435-04d9-6ec4-407e320e7565.png)

「Open」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/7591def9-532b-b969-1725-507a2e81c4bd.png)

ログイン用のアカウントを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/adcb82fe-0d5e-6ce8-3b19-064e7f07972b.png)

「ログイン」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/26d2d490-59e4-3374-7569-7c2d6cde6909.png)


「Enable API」で有効化します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/6d98ef99-af11-93e2-18d8-78780d41296d.png)



これでGeminiを使用する準備が出来ました。左下のチャット欄に指示を入力するとGeminiが答えてくれます。
ちなみにBottom barの左下の雲アイコンの右側にはログイン中のGoogle Cloudのプロジェクト名が表示されます。ログイン後はデフォルトPJが選択されますが、適宜クリックして変更してください。（以下のスクショではPJ名は消しています）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/c0c74d69-66d9-bcfc-fca3-ca3708b1ae3e.png)













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

## チャットからコード生成

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/b90ae91e-05b9-2821-999b-048c9b27e8bd.png)


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

<br>

生成結果の「＋」をクリックすると、右側のエディタで開いているファイルにコードが挿入されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/0f10d356-2d40-bdee-de6e-f0b416a26b19.png)


## 選択範囲の説明

例えば以下のようにコードを選択します。（コードはFastAPIのチュートリアルコードです）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/e9400703-8ce7-3d66-39a4-eafa0d3c0020.png)

チャットのプロンプトに「このコードを説明して」と入力実行すると以下のように説明してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/66fa6265-f081-a56b-f5fc-aa65477d679d.png)


## ユニットテストの作成
先ほどと同じ範囲を選択しています。
選択中は、プロンプトに「Generate unit test」とサゲストが出ているので送信してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/e9400703-8ce7-3d66-39a4-eafa0d3c0020.png)

テストコードが出力されました。
選択範囲外で定義していた`Item`クラスの情報も読み取って、必須パラメータの`price`の有無などもチェックしているようです。
選択範囲外もファイル内容を参照しているということは注意です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/393bd66f-028c-86b1-9f2d-2795ab8a8283.png)


## オートコンプリート
テキストを入力中にGeminiが続きを考えて提案してくれます。

以下のようにコード補完が提案されます。
Tabキーをおすと提案内容を受け入れて確定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/4d57b465-0119-0aed-ec9b-dc579ad73f1e.png)

コードだけでなく一般文章にも利用可能で、以下のようにリアルタイムで次の候補を表示してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/e04686f3-3033-aa95-e627-1c6d42baa7c9.png)


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



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

テキストを選択すると、豆電球マークが表示されクリックすると修正がサゲストされます。
下の`More Actions...`はどこを選択しても提案される固定の内容です。
`Quick Fix`は、選択内容に従って様々な提案が表示されます。コードの修正以外にも、importで指定しているライブラリの依存関係が解決できないときは実行環境の変更なども提案されるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115707/b9ef9131-7ce6-527b-2d4b-cf38826d8307.png)


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