Gemini CLI × Android Studio でFlutterコード自動生成してみた

2025年6月28日 2025年6月29日

AndroidStudioにGemini CLIをインストールしてコード自動生成してみた

Gemini CLI をインストールして Android Studio で Flutter のコードを書かせてみた

ヒーラー

Gemini CLI が Android Studio 上のプロジェクトでも問題なく使えるのか、どのくらいの精度なのか気になる

はじめに

2025年6月25日、GoogleからオープンソースのAIエージェント「Gemini CLI」が発表・公開されました。現時点でベースはGemini 2.5 Proとなっており、Googleアカウントがあれば無料で使うことができます。

個人のGoogleアカウントなら、1分あたり60リクエスト、1日1,000リクエストまでと制限があるものの、無料で利用可能というのは大きいですね。

Flutter開発において、Gemini CLI を使ってAIにコード生成を任せることで、どの程度の精度なのか、開発効率を大幅に向上できるものなのか確認したいと思いました。

Claude Codeを導入したばかりではあるのですが、Claude Codeで試したときと同様に、一からプロジェクトを作成するのではなく、開発中のプロジェクトのひとつの画面を依頼してみようと思います。

ちなみにClaude Codeの導入方法や検証結果については、以下の記事で紹介しています。

Claude Code × Android Studio でFlutterコード自動生成してみた

まずは通常Flutterの開発に使用しているIDEの Android Studio 上で Gemini CLI を使えるようにしたいと思います。
とはいえ、現時点で Android Studio には、Gemini CLI用のプラグインは用意されていません。

Claude Code もそうですが、Gemini CLI は CLI と名のとおりコンソールベースのため、そもそもIDEにUIが追加されたりして使いやすくなるというものではないため、プラグインがあるかどうかはそれほど重要ではありません。

では、Gemini CLI をインストールする手順から、実際にコード生成して動作させるところまで記載しておこうと思います。

環境

試した環境・用意したものは以下のとおりです。

Mac (macOS Sequoia: バージョン15.5)
Android Studio (Meerkat Feature Drop | 2024.3.2)
開発中のFlutterプロジェクト（Riverpod + Hooks + Freezed 使用）
Gemini 無料版（Google個人アカウント）

Gemini CLI のインストール

Node.js v18以上のインストール確認

Gemini CLIのインストールには、Node.js v18以上のインストールが必要です。
以下コマンドで、Node.jsのバージョンを確認しましょう。

node --version

Gemini CLI のインストール

Node.jsがv18以上で問題なかった場合は、以下コマンドで Gemini CLI をインストールします。

npm install -g @google/gemini-cli

先ほどの手順で、Node.jsがv18未満だったり、そもそもnpmコマンドが使えないという人は、以下にHomebrewのインストール、Node.jsのインストール、Node.jsのアップデート手順をそれぞれ載せておきますので必要な手順にそって環境を整えましょう。

Node.jsのインストール（未インストールの場合）

Homebrewがインストール済みであれば、 brew コマンドでNode.jsをインストールすることができます。
以下のコマンドでインストールしましょう。

brew install node

Node.jsをインストールすることで、npm コマンドを使えるようになります。

Homebrewのインストール（未インストールの場合）

Homebrewが未インストールの場合、以下のコマンドでインストールします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)

Node.jsのアップデート（Node.jsがv18未満の場合）

現在インストールできるNode.jsのバージョンを一覧で確認する

以下コマンドで、現時点でインストール可能なNode.jsのバージョンを確認します。

nvm ls-remote

一覧にあるNode.jsの最新バージョンをインストールする

例えば一覧にある最新バージョンが「v18.17.0」だった場合は、以下のコマンドで指定してインストール実行します。（「v18.17.0」の部分を書き換えてください）

nvm install v18.17.0

アップデートしたバージョンのNode.jsを使用する設定にする

インストールしただけでは、まだそのバージョンを使用する設定になっていません。新しいバージョンのNode.jsを利用するために以下のuseコマンドを実行して反映させます。

nvm use v18.17.0

Googleアカウント認証

Gemini CLIがインストール完了すると、上の画面のように表示されます。
そして認証を促されます。
今回は特にAPI Keyなどを用意しているわけではないので、Login with Google でログインします。

ブラウザを経由してGoogleのログイン画面が出てくるので、手持ちのGoogleアカウントでログインしましょう。ログインが完了すると以下のような画面になるかと思います。

そして、Android Studio に戻ると、簡単なチュートリアルが表示されます。

Tips for getting started:
1. Ask questions, edit files, or run commands.
2. Be specific for the best results.
3. Create GEMINI.md files to customize your interactions with Gemini.
4. /help for more information.

直訳すると以下のとおりです。

始めるためのヒント：
1. 質問したり、ファイルを編集したり、コマンドを実行したりしてください。
2. 最良の結果を得るには、具体的に記述してください。
3. Gemini とのやり取りをカスタマイズするために、GEMINI.md ファイルを作成してください。
4. 詳細については、/help を参照してください。

実際にコード生成してみる

Type your message or @path/to/file と入力できるスペースがあるので、こちらで指示をしていくことになります。今後ここで対話形式で指示をして、その実行結果を待って、フィードバックをしたりというやりとりをしていくことになります。

少し気になったのが、初期では英語前提になっていそうだったので、一度日本語が使えるか聞いてみました。

日本語での応答があったので、安心しました。

では、実際に開発中のプロジェクトにおいて、試しにひとつ画面を作ってもらいました。

プロンプト実行

実際に実行したプロンプトは以下のとおりです。

> 以下の機能を満たす新しいページを作ってください。
  なお、ファイル名はtext_edit_page.dartで、
  Riverpod+Hooks+Freezed前提で他のページとスタイルを合わせて作ってください。

  1.ユーザーがテキストを入力する
  2.ユーザーがボタンを押すと、入力したテキストがリッチなテキストで表示される
  3.ユーザーがボタンを押すごとに、入力したテキストのスタイルがランダムに変わる
  4.リッチなテキストをタップすると、その文字がシステムとしてコピーされる。（複製されるわけではなくテキストをどこかにペーストできるようになる）
  5.コピーされたらコピーされたことがわかるようにトースト表示してください。

開発中のプロジェクトはRiverpod+Hooks+Freezedの構成で作っていたので、それを踏襲してもらうように指示しました。

リッチなテキストという少し曖昧な表現にどう対応するかが楽しみです。
またトースト表示など特にですが、画面のどの位置に配置するかという具体的な指示をしていないので、その辺りもどう判断するのか楽しみです。

Gemini CLIの実行プロセス

全体の流れを先に説明すると、Gemini CLIは以下のステップで自動的にコードを生成しました。

実際にコーディングをはじめる前に、タスクを整理して何をどのように処理していくかを計画してくれます。
Claude Codeでも同じようにまずは計画を立てるという動きが見られましたので、どちらも人間らしいプロセスを踏んで進めるんですね。

実際に、以下のように計画されました。

✦ 承知いたしました。Riverpod、Hooks、Freezedを使用し、既存のコードベースのスタイルに合わせた新しいページtext_edit_page.dartを作成しますね。

 以下の手順で進めます。


   1. 依存関係の確認: pubspec.yamlを読み、必要なパッケージ（fluttertoastなど）が揃っているか確認します。
   2. StateとNotifierの作成: テキストとスタイルを管理するためのFreezedを使ったStateとStateNotifierを作成します。
   3. UIページの作成: text_edit_page.dartを作成し、テキスト入力、スタイル変更ボタン、リッチテキスト表示、コピー機能を実装します。
   4. ナビゲーションの追加: main.dartに新しいページへの導線を追加します。

  まずは、pubspec.yamlを確認して、fluttertoastパッケージが既に追加されているか確認します。

※実際の出力全体は記事の最後に参考として載せておきます。

1〜4の手順にしたがって、ひとつひとつ解決していきます。

✦ fluttertoastパッケージが見つかりませんでした。トースト表示には、既に追加されているflutter_easyloadingパッケージを使用します。


  まず、テキストとスタイルを管理するための状態管理ファイルを作成します。プロジェクトの構成に合わせ、lib/provider/ディレクトリにtext_edit_provider.dartとtext_edit_state_notifier.dartを作成します。

トーストについては、サードパーティ製のpackageを使用検討し、既に追加されているものを採用したようです。
既存のプロジェクトの構成に合わせて、ファイルを作成してくれるようです。

✦ Freezedで生成されるファイルを作成するため、build_runnerを実行します。

 ╭────────────────────────────────────────────╮
 │ ✔  Shell flutter pub run build_runner build --delete-conflicting-outputs               │
 │                                                                                        │
 │    bash: flutter: command not found                                                    │
 │                                                                                        │
 ╰────────────────────────────────────────────╯
✦ flutterコマンドが見つからないようです。FVM(Flutter Version Management)を使用しているようなので、fvm経由でコマンドを実行します。

build_runnerもきちんと実行してくれます。
fvmを使用していることに気づいたようで、きちんとfvm経由でのコマンド実行に切り替えてくれました。

✦ freezedファイルが生成されたので、次にUI部分を作成します。lib/screen/ディレクトリにtext_edit_page.dartを作成します。

ちなみに、ソースコードに手を加える際は、必ずユーザーの許可を待ってくれます。

✦ 最後に、main.dartにこのページへの遷移を追加します。既存のホームページにボタンを追加して、TextEditPageに遷移できるようにします。まずmain.dartの現在の内容を確認します。


✦ TopPageにボタンを追加して、TextEditPageに遷移するようにします。lib/screen/10_top/top_page.dartを読み込みます。


✦ top_page.dartにTextEditPageへの遷移ボタンを追加します。

画面の作成だけでなく、その画面への導線もきちんと用意してくれるようです。

ここは許可をとるものの、少し強引さがありますね。
とは言え、どの道動作チェックのため導線は必要ですので、ありがたい判断ではあります。

このような動きは、Claude Codeでも見られました。

✦ これで、TextEditPageの作成と、そのページへの遷移が実装できました。

  要約すると、以下のファイルを作成・変更しました。


   * lib/provider/text_edit_state_notifier.dart: テキストとスタイルを管理するStateNotifierを作成しました。
   * lib/provider/text_edit_provider.dart: StateNotifierProviderを定義しました。
   * lib/screen/text_edit_page.dart: テキストの入力、表示、スタイル変更、コピー機能を持つUIを作成しました。
   * lib/screen/10_top/top_page.dart: TextEditPageへの遷移ボタンを追加しました。


  以上で実装は完了です。

そして実装が完了したようです。
きちんと変更内容を要約して終わります。

※実際に生成されたコードは、参考までに最後に掲載しています。

実行結果

生成されたコードによって、以下の画面が作成されました。

パッと見よくできてそうな予感です。
ただ、「Show Rich Text」ボタンと「Change Style」ボタンとボタンが２つ登場するのは、なるほどとも思いました。想定ではボタン１つのつもりでしたが、要件的にそう思われてもおかしくないかなとも思いました。

実行した動画は以下のとおりです。

テキスト入力はOK。
「Show Rich Text」ボタンでリッチテキストが表示されるのもOK。
しかし、「Change Style」ボタンを押しても何も起こりませんでした。NG。
そして、テキストのタップしてもコピーはされませんでした。NG。

というわけで、ボタン２つは許容したとしても、リッチテキストのスタイルが変わらないことと、コピペができないことは残念でした。

一応、画面を開き直して、「Show Rich Text」を押すと、リッチテキストのスタイルは変わりました。
リッチテキストも、たまたま既存のコードに入っていた AnimatedTextKit パッケージを活用して作るところは他のコードもよく参考にしている証拠ですね。

まとめ

Android Studio でもプラグインこそ現時点ではありませんでしたが、簡単に Gemini CLI を導入することができ、問題なく使うことができました。
そして開発中のプロジェクトのFlutterの既存コードにも、開発方針である Riverpod + Hooks + Freezed を適用してスムーズに新しいページを追加することができました。

処理前に要件の整理、計画を実行するプロセスは非常によく、途中既存コードへの変更の許可を聞いてくるところもしっかりしていました。
今回のコードを生成するのにかかった時間は、感覚値として3〜4分程度だったように思います。まったく気になる時間ではありませんでした。

少し要件を満たさない部分はあったものの、さらにフィードバックを与えてあげれば修正できるでしょうし、まず最初の叩き台を作るなどの利用でも十分使えると感じました。
無料でこのレベルであれば全然構わない印象です。

途中コマンド失敗して、fvmを介したリトライをこなす部分もさすがでした。

Gemini CLIは単なるコード生成ツールではなく、プロジェクト全体を理解して適切なコードを生成してくれる開発パートナーに十分になりそうです。
特にFlutterのような複雑なフレームワークでの開発において、その価値は非常に高いと感じました。
また、FlutterはGoogle製ということもあり、Geminiとの相性がよいという噂もありますので、今後の拡張に期待したいところです。

実際のプロンプト実行からの出力全体と、コード生成時の出力全文は次ページ

Claude Codeでコード自動生成してみた際の記事は以下にあります。