Cursorとペアプログラミング – Flutter

Cursorに慣れるにつれて、それは単なる開発環境からペアプログラミングのパートナーへと変わっていきました。今日はCursorと一緒にG2Railアプリの一部の欠けている翻訳を実装しました。実装コードにはFlutterを使用しました。”

実装した機能は、ページ上の「Europe」「Asia」「America」といったテキストが、モバイルシステムの言語に合わせて表示されるようにすることです。例えば、「Europe」は中国語簡体字のスマートフォンでは「欧洲」と表示され、日語のスマートフォンでは「ヨーロッパ」と表示されます。

システム全体がすでに多言語対応しているため、主に該当するラベルの翻訳を追加する作業が中心で、それを既存のアーキテクチャに組み込みました。

言語エントリを追加

複数のファイル操作が関わるため、通常の関数実装より少し複雑であるため、CursorのComposerを選び、最初のPromptを書きました。

英語のエントリ翻訳を追加

“次に、翻訳エントリに言語の翻訳を追加します。最初は英語から始め、引き続きComposerを使用します。@intl_en.arb@intl_zh_hant.arbを導入することで、Composerは英語と繁体字中国語のエントリだけを追加します。Composerはファイルの拡張子から言語を判別し、対応するエントリを英語と繁体字中国語に翻訳します。”

CursorのApply -> Reviewを使って確認し、問題がなければ変更を受け入れます。

さらに多くの言語を追加

次に、英語と簡体字中国語のエントリを他の言語に適用する必要があります。

初めての試み

“私は一度に残りのすべての言語ファイルを置き換えたいと考えました。そのため、Promptに「add translated intl_ files under I10n folder」と書きましたが、結果としてComposerは最初のアラビア語の@intl_ar.arbのみを翻訳しました。成功とは言えませんでしたが、最後に他のファイルを修正する必要があるかどうかを尋ねてきました。”

二回目の試み – より小さな粒度で、より明確で具体的に

次に、より明確な方法で対応するファイルを指定しました。Composerはタスクを理解し、エントリを追加し、対応する言語に翻訳することができました。

スクリプトがDartコードを生成

システムはarbファイルに基づいてFlutterに必要なdartコードを生成する必要があるため、既存のスクリプトを利用して対応するmessage.dartファイルを生成しました。

スクリプトの問題により、2つの言語ファイルに重複したエントリが発生しました。

重複を削除

Composerでエラーが出たファイルを引用し、次のようにPromptを出しました:

‘please remove the duplicate items on @messages_zh-HK.dart and @messages_zh.dart’

Cursorはエラーを正しく理解し、重複したエントリを削除しました。

機能の修正が完了しました。

反省

  • 効率向上:多くの場合、手作業でコードを書くのではなく、タスクを出して、Review Diffを通じて変更を受け入れたり拒否したりするプロセスが中心です。
  • 協力感:Cursorは常に待機しているアシスタントのようで、質問にすぐ答えてくれ、スムーズに進行できます。タスクが明確であれば、完了の精度も非常に高いです。
  • コアに集中:AIのサポートがあるおかげで、細かなコード実装やコピー&ペーストの修正に時間を取られることなく、コードの調整や最適化に集中できます。
  • システム理解:適切なコンテキストを提供することで、CursorのようなAI開発ツールは、既存のシステムの実装パターンを推測し、理解することができます。
Share