AndroidStudioにClaude CodeとGemini CLIをインストールしてコード自動生成を比較してみた
Claude Code と Gemini CLI をインストールして Android Studio で Flutter のコードを書かせてみた
はじめに
2025年5月22日にClaude Codeが一般提供が開始され、2025年6月4日にProプランとMaxプランの両方でClaude Codeにアクセスできるようになりました。
そして、2025年6月25日には、GoogleからオープンソースのAIエージェント「Gemini CLI」が発表・公開されました。
このように2025年6月はAIによるコード生成においておおきな革新的進化が広く知られ、使われ始めた月と言えるでしょう。
そこで、Flutter開発において、Claude Code と Gemini CLI それぞれにおいて、共通した指示（プロンプト）でどのようなプロセスでどのように処理されのか、生成コードを比較してみたいと思います。
ちなみにAndroid StudioにおけるClaude Codeの導入方法、Google CLIの導入方法については、以下の記事で紹介しています。
環境
試した環境・用意したものは以下のとおりです。
- Mac (macOS Sequoia: バージョン15.5)
- Android Studio (Meerkat Feature Drop | 2024.3.2)
- 開発中のFlutterプロジェクト（Riverpod + Hooks + Freezed 使用）
- Claude Proプランアカウント / Gemini 無料版（Google個人アカウント）
指示したプロンプト
実際に実行したプロンプトは以下のとおりです。
> 以下の機能を満たす新しいページを作ってください。
なお、ファイル名はtext_edit_page.dartで、
Riverpod+Hooks+Freezed前提で他のページとスタイルを合わせて作ってください。
1.ユーザーがテキストを入力する
2.ユーザーがボタンを押すと、入力したテキストがリッチなテキストで表示される
3.ユーザーがボタンを押すごとに、入力したテキストのスタイルがランダムに変わる
4.リッチなテキストをタップすると、その文字がシステムとしてコピーされる。（複製されるわけではなくテキストをどこかにペーストできるようになる）
5.コピーされたらコピーされたことがわかるようにトースト表示してください。開発中のプロジェクトはRiverpod+Hooks+Freezedの構成で作っていたので、それを踏襲してもらうように指示しました。
ボタンの名称を未指定だったり、リッチなテキストという少し曖昧な表現にそれぞれどう対応するのでしょうか。またボタンなど、画面のどの位置に配置するかという具体的な指示をしていないので、その辺りもどう判断するのか楽しみです。トースト表示にサードパーティー製のpackageを活用するのかも気になります。
Gemini CLIの場合
Gemini CLI起動
Android Studio のコンソールから gemini とコマンドを打てば、Gemini CLIが起動します。
Type your message or @path/to/file と入力できるスペースがあるので、こちらに先ほどのプロンプトをコピペして早速実行します。
プロンプト実行
> 以下の機能を満たす新しいページを作ってください。
なお、ファイル名はtext_edit_page.dartで、
Riverpod+Hooks+Freezed前提で他のページとスタイルを合わせて作ってください。
1.ユーザーがテキストを入力する
2.ユーザーがボタンを押すと、入力したテキストがリッチなテキストで表示される
3.ユーザーがボタンを押すごとに、入力したテキストのスタイルがランダムに変わる
4.リッチなテキストをタップすると、その文字がシステムとしてコピーされる。（複製されるわけではなくテキストをどこかにペーストできるようになる）
5.コピーされたらコピーされたことがわかるようにトースト表示してください。いきなりコーディングを開始するのではなく、プロンプトを解釈して、タスクを整理して何をどのように処理していくかを計画してくれます。
そして、以下のように計画されました。
✦ 承知いたしました。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への遷移ボタンを追加します。画面の作成だけでなく、その画面への導線もきちんと用意してくれるようです。
ここは許可をとるものの、少し強引さがありますね。
とは言え、どの道動作チェックのため導線は必要ですので、ありがたい判断ではあります。
✦ これで、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への遷移ボタンを追加しました。
以上で実装は完了です。そして実装が完了したようです。
きちんと変更内容を要約して終わります。
なお、今回使用したときの Gemini CLI は よりロジカルで文脈を理解できる Gemini 2.5 Pro が適用されていますが、状態によってはレスポンス重視の Gemini 2.5 Flash に切り替わることがあるようなので注意が必要です。
※実際のプロンプトや生成されたコードは、最後にClaude Codeと比較しやすいようにまとめて掲載しています。
Gemini CLI 実行結果
生成されたコードによって、以下の画面が作成されました。
「Show Rich Text」ボタンと「Change Style」ボタンとボタンが２つ登場するのは想定外でした。
実行した動画は以下のとおりです。
テキスト入力はOK。
「Show Rich Text」ボタンでリッチテキストが表示されるのもOK。
しかし、「Change Style」ボタンを押しても何も起こりませんでした。NG。
そして、テキストのタップしてもコピーはされませんでした。NG。
リッチテキストが想像していた以上に動きのある表示になったところが良い意味で想定外でした。
しかし、ボタン２つは許容したとしても、リッチテキストのスタイルが変わらないことと、コピペができないことは残念でした。
一応、画面を開き直して、「Show Rich Text」を押すと、リッチテキストのスタイルは変わりました。
リッチテキストも、たまたま既存のコードに入っていた AnimatedTextKit パッケージを活用して作るところは他のコードもよく参考にしている証拠ですね。
つぎに Claude Code で同じプロンプトを実行します。
なお、Gemini CLI の導入についての記事は以下にあります。
ポチップ
ポチップ
