Visual Studio Code で Gemini Code Assist エージェントモードを使う

2025-09-032025-09-04

皆さんこんにちは。奥田です。

今まで自分の部署の一部の人に使わせていた Gemini Code Assist ですが、基本、全員に配って「使い倒してノウハウを蓄積するように！」と、指示しました。
とは言うものの、自分も出始めのころに少し触ったくらいで、最新のものは情報として知っているくらいでしたので、Gemini CLI も出てきたことですし、少し情報を整理してみました。

本記事は、Gemini Code Assist の使い方や、そもそも Gemini CLI って何？というこれから使い始める人向けの記事です。

後半では、実際にアプリを作ってもみたので参考にしてみてください。

Contents

1. Gemini Code Assist と Gemini CLI の関係
- 1.1. Gemini CLI Extensions
2. Visual Studio CodeにGemini Code Assistエクステンションをインストール
3. エージェントモードをONにする（2025/8/27現在はプレビュー）
4. PowerShellの設定
5. 実際にアプリを作ってみる
- 5.1. 手順１　とりあえずReactプロジェクトを作ってVSCodeで開く
- 5.2. 手順２　チャットで指示するだけ
6. 感想

Gemini Code Assist と Gemini CLI の関係

Gemini Code Assistを試用しようとしたとき、Gemini CLI とは何が違うの？とよく分かっていなかったので整理しました。

比較項目	Gemini Code Assist	Gemini CLI
主な目的	コーディング作業の直接支援（コード補完、生成、リファクタリングなど）	汎用的な対話とタスク実行（コーディング相談、ファイル操作、コマンド実行など）
利用場所	IDE (VS Codeなど)	ターミナル (コマンドライン)
位置づけ	IDEに統合されたAIペアプログラマー	ターミナルで使う対話型AIエージェント
ライセンス	専用ライセンス（有料）が必須（Google Cloudプロジェクトで管理）	Googleアカウント認証で利用可能（無料枠あり、有料プランにアップグレード可）
共通の頭脳	Gemini Models （両ツールともに同じAIモデル群をAPI経由で利用）	Gemini Models （両ツールともに同じAIモデル群をAPI経由で利用）
連携機能	Gemini 拡張機能 (Extensions) （両ツールともに外部サービスとの連携が可能）	Gemini 拡張機能 (Extensions) （両ツールともに外部サービスとの連携が可能）

基本的に別物ですね。ただ、Gemini Code Assist は『Gemini CLI 拡張機能（Gemini CLI Extensions）』を使用できます。
なお、この拡張機能は Gemini CLI そのものとは別物になります。

Gemini CLI Extensions

Gemini Code Assist Agent や Gemini CLI から使用できる拡張ツールです。
VSCodeから使用すると、CLIはワークスペースをより適切に理解できるようになり、ネイティブなエディタ内差分表示などの強力な機能も利用できるようになるそうです。

※ 現在（2025年9月3日時点）Gemini CLI Extension のドキュメントには、Gemini CLIの「gemini extensions install <source> | [options]」コマンドを使ってインストールするようにありますが、最新の Gemini CLI では、gemini extensions install というコマンドは無くなっているようです。ここら辺は日々変わっているようですので、最新の情報を取得するようにしてください。

エージェントモード・Gemini CLI 拡張機能
https://cloud.google.com/gemini/docs/codeassist/agent-mode?hl=ja

Gemini CLI Extensions（google-gemini/gemini-cli ツール）
https://github.com/google-gemini/gemini-cli/blob/main/docs/extension.md

IDE統合
https://github.com/google-gemini/gemini-cli/blob/main/docs/ide-integration.md

Visual Studio CodeにGemini Code Assistエクステンションをインストール

左側の Gemini アイコンからライセンスを持っているアカウントで Sign in します。

その後、Gemini for Google CloudのAPIを有効にしたプロジェクトを設定します。
※キャプチャ取り忘れましたが、プロジェクトを設定しろというリンクがあるはずです
そのリンクをクリックすると以下の様にプロジェクトを選択するリストが開きます。

エージェントモードをONにする（2025/8/27現在はプレビュー）

Agentスイッチをオンにすると、プロジェクト全体のファイルを横断的に解析し、理解します。
ファイルの新規作成や編集といった、プロジェクトに直接変更を加える強力な機能が有効になります。

Gemini Code Assistが単なる「相談相手」から、実際にプロジェクトのファイル変更やタスク実行を行う「作業代行者」へと進化します。
あなたの指示（例：「ボタンコンポーネントを追加して」）に基づき、必要なファイルを自ら作成・編集し、タスクを自動で実行しようとします。

まだ Agent が、私たちが意図しないどのような動作をするか分からないので（ソースを全部消すとか）、実際のプロジェクトで使用する場合は十分注意してください。以下の様な限定的な使い方をしながら様子を見るのが良いと思います。

調査だけにする
新規画面の作成時だけ使う
部分的な修正のみに使う
ソース管理にコミットした直後のみ使用し、差分も必ず確認する

くれぐれも、プロジェクト内のソースを一括で修正して、変更箇所を目視確認もせずにリリースするなどは止めましょう。。。

PowerShellの設定

Windowsは、悪意のあるスクリプトファイルがPC上で勝手に実行されるのを防ぐため、PowerShellスクリプトの実行に制限をかけています。

Gemini Code AssistのIDE内でのコード生成やチャットといった中心機能だけを使うのであれば、必須ではありません。ただ、AIの回答に「npm install …を実行してください」といった具体的なコマンドが含まれることが頻繁にあります。
VSCodeのターミナルは PowerShell なので、許可しておかないと非効率になると思われます。

スクリプトの実行を許可する為、管理者権限でPowerShellを開き以下のコマンドを実行します。

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Set-ExecutionPolicy RemoteSigned: 実行ポリシーを「RemoteSigned」に変更します。これは、自分のPC上で作成したスクリプトは実行を許可し、インターネットからダウンロードしたスクリプトは信頼できる発行元からの署名がないと実行を許可しない、という開発者にとってバランスの取れた設定です。
-Scope CurrentUser: この設定変更を、現在ログインしているあなたのアカウントのみに限定します。これにより、PC全体の設定を変えるよりも安全に変更できます。

実際にアプリを作ってみる

試しに将棋アプリを作ってみました。

手順１　とりあえずReactプロジェクトを作ってVSCodeで開く

PowerShellで、アプリを作りたいフォルダで以下を実行します。

npm create vite@latest shogi-app -- --template react-ts
cd shogi-app
npm install
code .

手順２　チャットで指示するだけ

Agent モードを ON にした後は、チャットでやりたいことを指示するだけです。
これによりAIの分析対象を「現在開いているファイル」から「ワークスペース（プロジェクト）全体」 に広げることができます。

Code Assist のチャットプロンプトに以下を入力します。
どんな指示をすればよいかも AI に聞きましょう。

/edit App.tsxとsrc/App.cssの中身を削除して、将棋アプリの土台となる最小限のコードに書き換えてください。

こんな感じでコード修正を提案してくれます。
App.css に対し、37行を削除し、新たに17行を追加するという変更内容が表示されています。
Accept (承認)します。

Accept (承認)
Geminiが提案した変更内容をそのまま受け入れ、ファイルに適用します。

Edit (編集)
Geminiが提案した変更内容を、適用する前に自分で手直ししたい場合に押します。

Reject (拒否)
提案された変更内容を破棄します。ファイルは一切変更されません。

続いて、以下が表示されました。
Accept (承認)します。

以下のメッセージが出ました。
コマンドはVSCodeのターミナルを開いて実行します。

何やらしょぼいReact画面がブラウザで確認できました。

続いて、以下の様に指示していきます。
機能ごとに細かく分割して依頼するのが良いようです。

/new components/Board.tsx というファイルを作成し、9×9の将棋盤を描画するReactコンポーネントを実装してください。マス目はCSS GridやFlexboxを使って表現してください。

/new components/Piece.tsx というファイルを作成し、将棋の駒を1つ表示するコンポーネントを実装してください。駒の種類（歩、玉など）と、先手後手どちらの駒かをpropsで受け取れるようにしてください。

変更内容を全てAcceptした後、こんな提案をされました。

早速、そのまま依頼します。

将棋の初期配置を定義して

また、こんな提案をされました。もう自動で全部やってもらいたい気分。
上手い指示の仕方、プロンプトの作り方は今後の課題です。

駒を選択するなどのインタラクティブな機能を追加して

こんな感じで会話しながら、言われるがまま指示をしていきます。
コピペしてAcceptするのが自分のお仕事です。

各駒の移動ルールを実装して

成駒のルールを実装して

ここまででこんな感じになっています。
クリックして駒が動きます。

さらに続けます。

持ち駒（駒台）の処理を実装して

表示されるメッセージを眺めていると、さらりと「打ち歩詰め」を省略しているところが面白い。

王手と詰みの検出を実装して

ここまでで実行してみるとブラウザのコンソールにエラーが出ていました。
修正を指示します。

次のエラーが出ている。修正して。「Uncaught SyntaxError: The requested module '/src/types.ts?t=1756289847560’ does not provide an export named 'PieceType’ (at Piece.tsx:2:10)」

直ってなかったのでプロンプトでもう一度指示します。AI がより良い仕事をするように「全体を確認して」という指示を足しています。

変わらずブラウザのコンソールに同じエラーが出ている。全体を確認して問題を修正して。「Uncaught SyntaxError: The requested module '/src/types.ts?t=1756289847560’ does not provide an export named 'PieceType’ (at Piece.tsx:2:10)」

それでもエラーが解消せず、以下のメッセージに従いサーバーを再起動しました。

でもダメなので、もう一度修正依頼をします。また、ちゃんと考察する用に指示します。
エラーメッセージは若干変わっているので次に期待します。

サーバーを再起動してもダメでした。次のエラーがコンソールに出ています。これまでの修正も踏まえて原因を考察し修正してください。「Uncaught SyntaxError: The requested module '/src/types.ts’ does not provide an export named 'PieceType’ (at PieceStand.tsx:1:10)」

なんか、大掛かりな修正をしているようです。
Runボタンを押します。

ふむ、、、AI もイージーミス。

とりあえず直りました。

なんかボチボチ動いているので、次の様に CodeAssist に聞いてみます。

見た目がシンプルすぎるので本物の将棋の駒や盤の様にスタイルを修正する為のプロンプトを教えて。

こんな長い指示でも良いんだ。コピペして指示します。

現在の将棋アプリのスタイルを、よりリアルな見た目に変更してください。具体的には、以下の点を修正してください。
駒の画像化: 現在テキストで表示されている駒を、実際の将棋の駒のような画像に置き換えてください。駒の画像は、SVGや高品質な画像形式で、オンラインで見つかるフリー素材や、生成AIで作成したものを利用してください。先手と後手で駒の向きが正しくなるようにしてください。
将棋盤の質感: 将棋盤の背景を、リアルな木目調のテクスチャに変更してください。盤の線も、手書き風や少しかすれたようなスタイルにして、趣のある見た目にしてください。
駒台のスタイル: 駒台も盤と同じように木目調のスタイルにしてください。
全体のレイアウトとフォント: 全体のレイアウトを調整し、より洗練された見た目にしてください。アプリケーションのタイトルやその他のテキストには、和風のフォントや、アプリの雰囲気に合ったフォントを使用してください。
選択された駒のハイライト: 選択された駒のハイライトスタイルを、より分かりやすく、かつ美しいデザインに変更してください（例：駒の周りに淡い光彩を追加する、など）。

メッセージを見ていると色々と頑張ってくれています。

私はメッセージを見ながら応援し、相変わらず、時折表示される「Accept」ボタンを押すだけです。

というわけで、色々と言いたいことはありますが、ボチボチ良い感じです。

感想

ここまで、この記事も書きながらおおよそ2時間、実は一度もソースを開いていません。メインウィンドウは「welcome」のままでした。

なので、ソースを手修正してと言われても、どんなファイルがあり、その中身がどうなっているかもわかりません。
途中で不具合が発生した際も、Code Assist に頑張ってもらうしかなかったです。
「ブラウザのコンソールにエラーが出てるんじゃね？」とエラー情報を Code Assist に渡せたのは、一応プロだからで、素人よりは早く問題解決にはつながったとは思います。

と言うわけで、これからの開発は、以下に AI と共同で作業をするかだと思います。
ぼーっとしているとメッセージを見落として「打ち歩詰め」ルールが実装されていないことに気づかなそうです。
また、ちゃんと動いているようですが、実は「銀」が真上に移動できないというバグもありました。テストも必要です。
もちろん、仕様を整理してテストロジックも Code Assist に作らせればよいのですが、そういった工程を忘れずに品質を担保してあげるのは、（現状は）人間の仕事です。
将来的には、アプリ開発エージェントでも作れば、一連の工程を漏れなく行えそうではありますが。。。

とにかく、AI を使いこなせばプログラミングは100倍速くなりそうだ、というのが感想です。
今後は、Gemini CLI Extensions なども使って、当社なりの効率化なども考えていきたいです。

実装例,機能紹介AI,Gemini,Gemini Code Assist,Google Cloud Platform(GCP),コードアシスト

Posted by 奥田健一郎