Claude Codeの場合
Claude Code起動
Android Studio ツールバーにClaudeのアイコン 
を押すか、コンソールから claude とコマンドを打つか、てば、Claude Codeが起動します。
Gemini CLIと同様に入力エディタに先ほどのプロンプトをコピペして早速実行します。
プロンプト実行
⏺ Flutter のプロジェクトでtext_edit_page.dartを作成します。まず既存のコードベースのスタイルを確認して、
Riverpod+Hooks+Freezedの構成を理解します。
⏺ Update Todos
⎿ ☐ 既存のページのスタイルとRiverpod+Hooks+Freezedの使い方を調査
☐ text_edit_page.dartの基本構造を作成
☐ テキスト入力フィールドとボタンを実装
☐ リッチテキスト表示機能を実装
☐ ランダムスタイル変更機能を実装
☐ タップでコピー機能を実装
☐ トースト表示機能を実装
⏺ Search(pattern: "**/*.dart")
⎿ Found 100 files (ctrl+r to expand)
⏺ Search(pattern: "**/pubspec.yaml")
⎿ Found 1 file (ctrl+r to expand)
⏺ Read(pubspec.yaml)
⎿ Read 161 lines (ctrl+r to expand)
⏺ Read(lib/screen/10_top/top_page_state_notifier.dart)
⎿ Read 178 lines (ctrl+r to expand)
⏺ Read(lib/screen/10_top/top_page_provider.dart)
⎿ Read 20 lines (ctrl+r to expand)Claude CodeもGemini CLI同様、いきなりコーディングを開始するのではなく、プロンプトを解釈して、タスクを整理して何をどのように処理していくかを計画してくれます。
解析しているファイルが何なのかも分かるのがどの範囲で学習しているのかわかって親切ですね。
ここでもっと解析してほしいファイルがあれば追加で依頼できそうですね。
そして、以下のように計画されました。
⏺ Update Todos
⎿ ☒ 既存のページのスタイルとRiverpod+Hooks+Freezedの使い方を調査
☐ text_edit_page.dartの基本構造を作成
☐ テキスト入力フィールドとボタンを実装
☐ リッチテキスト表示機能を実装
☐ ランダムスタイル変更機能を実装
☐ タップでコピー機能を実装
☐ トースト表示機能を実装残る6つの工程の1つ目から手順にしたがって、ひとつひとつ解決していきます。
⏺ Write(lib/screen/text_edit_page.dart)
⎿ Wrote 148 lines to lib/screen/text_edit_page.dart
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
part 'text_edit_page.freezed.dart';
… +138 lines (ctrl+r to expand)
⏺ Bash(dart run build_runner build)
⎿ Error: (eval):1: command not found: dart
⏺ Bash(flutter packages pub run build_runner build)
⎿ Error: (eval):1: command not found: flutter
⏺ Update Todos
⎿ ☒ 既存のページのスタイルとRiverpod+Hooks+Freezedの使い方を調査
☒ text_edit_page.dartの基本構造を作成
☒ テキスト入力フィールドとボタンを実装
☒ リッチテキスト表示機能を実装
☒ ランダムスタイル変更機能を実装
☒ タップでコピー機能を実装
☒ トースト表示機能を実装
> fvm使ってね
⏺ Bash(fvm dart run build_runner build)
⎿ [INFO] Generating build script...
[INFO] Generating build script completed, took 182ms
… +16 lines (ctrl+r to expand)早速、メインのソースコードとなる、text_edit_page.dartの基本構造を作成します。
build_runnerの実行に失敗するようなので、fvm使ってね と助け舟を出します。
処理中でも指示を差し込むことが可能で、作業中のタスクが終わると、きちんと差し込まれた指示を解釈してくれるのでありがたいところです。
⏺ Update Todos
⎿ ☒ 既存のページのスタイルとRiverpod+Hooks+Freezedの使い方を調査
☒ text_edit_page.dartの基本構造を作成
☒ テキスト入力フィールドとボタンを実装
☒ リッチテキスト表示機能を実装
☒ ランダムスタイル変更機能を実装
☒ タップでコピー機能を実装
☒ トースト表示機能を実装
⏺ text_edit_page.dart が作成されました。以下の機能を実装しました：
1. テキスト入力フィールド - TextFieldでユーザーがテキストを入力できます
2. リッチテキスト表示ボタン - 入力したテキストをリッチなスタイルで表示
3. ランダムスタイル - ボタンを押すたびに色、フォントサイズ、太さ、斜体、下線がランダムに変更
4. タップでコピー - リッチテキストをタップするとクリップボードにコピー
5. トースト表示 - コピー時にflutter_easyloadingでトースト表示
Riverpod + Hooks + Freezed の構成で、既存のコードスタイルに合わせて実装しています。すると、その後のタスクは一気に片付いたようで、fvmの件を口出ししたあと、一瞬で出来上がってしまいました。
トーストについては、Gemini CLI同様、サードパーティ製packageの flutter_easyloading を活用したことがわかります。
※実際のプロンプトや生成されたコードは、最後にGemini CLIと比較しやすいようにまとめて掲載しています。
Claude Code 実行結果
生成されたコードによって、以下の画面が作成されました。
テキストエディットが空の場合は「リッチテキストで表示」ボタンがdisableになって、入力したとたん、enableになるように作られているのが素敵ですね。
リッチテキストが表示されたあとに、タップしてコピーができることがわかる表示になっているところもポイントが高いです。
実行した動画は以下のとおりです。
テキスト入力はOK。
「リッチテキストで表示」ボタンでリッチテキストが表示されるのもOK。
「リッチテキストで表示」ボタンで押すたびにリッチテキストが更新されるのもOK。
リッチテキストをタップするときちんとコピーされて、テキストエディタにペーストできることが確認できました。
トースト表示もきちんとされましたね。
次に Gemini CLI と Claude Code の処理結果をまとめて比較したいと思います。
なお、Claude Code の導入についての記事は以下にあります。
ポチップ
ポチップ
