Flutterアプリを生成AIで生成する勘所

Flutterアプリを生成AIで生成する勘所 1

自己紹介りず和泉田領一合同会社CAPH TECH 代表社員 Flutter技術顧問・テックリードゆめみの方から来ました（Flutterテックリード）生成AIを活用した開発の研究
2

前提条件使用するAIモデル CursorでClaude 3.5 Sonnetが基本 o1-preview, o1-miniも活用できる Claude 3.5 Sonnetの話
3

Flutter生成特有のルール 1. 命名規則 enumの命名大文字とアンダースコアで命名されることが多いため、ルールで命名を規定する。 4

2. 状態管理とアーキテクチャ Riverpodの利用何も指定しなければ古い記述形式になるため、Generatorを使用する場合はルールに記述する。アーキテクチャパターンの指定クリーンアーキテクチャとMVVMを利用してくる。 Riverpodでのアーキテクチャパターンの指示は必須。 5

3. ウィジェットの管理デフォルト生成とカスタム分割 Widgetはデフォルトで分割せずに生成される。カスタムWidgetに分割するには明示的な指示が必要。カスタムWidgetの分割ルール「Widgetは単一責任の原則を遵守する」。ローカル状態の管理 Flutter
Hooksを使わずにsetStateを利用するコードでも生成なら面倒は少ない。わざわざFlutter Hooksを覚える必要が無い。 6

4. パッケージの利用パッケージ導入の検討面倒を回避するためにパッケージを導入する場合、生成AIで肩代わりできるか検討。簡易な状態管理パッケージの検討 Riverpodが複雑なため、より簡単なパッケージを検討。私はsignalsを利用している。 7

4. パッケージの利用（続き）ルーティング Navigator 2.0を利用して、状態の変化により遷移を引き起こす実装を生成できる。がんばってgo_routerを利用するよりNavigator 2.0のコードを生成する方が楽に感じている。 8

生成一般 1. 導入時の活用方法 Cursorを既存プロジェクトで利用を始める場合 Copilot+を利用するドキュメンテーションコメントを生成するテストを生成するリファクタリング Widgetを分割する設計の問題点を相談する
9

2. コーディングルール基本的なコーディングルールの遵守基本ルールはAIが守るため、特別な指示は不要。命名規則はenumくらい。 10

3. コメントとアサーションの活用ドキュメンテーションコメントやコードコメントの記述生成されたコードを理解する時間が必要。コメントを記述するように指示することで、コードの理解が容易になる。記述内容を指示することで、ドキュメンテーションコメントを充実させる。アサーションの活用アサーションを活用することで、コードの信頼性を高める。
事前条件・事後条件・不変条件 11

4. 設計とコストの注意点設計とAIモデルの選択 o1-preview, o1-miniで設計、Claude 3.5 Sonnetでコード生成。 o1-previewは使用量に応じて料金がかかり高価。 o1-previewが生成するFlutterコードは情報が古い。 12

5. ドキュメント管理アーキテクチャパターンの記述方法ルールではなく、ドキュメントファイルに記述。 ComposerのProjectでそのファイルを必ず読み込むよう指定。 13

まとめ AIを活用したFlutterアプリ開発のためのルールとベストプラクティス効率的な開発と高品質なコードの生成を目指す 14

Q&A ご質問はありますか？ 15

Flutterアプリを生成AIで生成する勘所

Flutterアプリを生成AIで生成する勘所

Ryoichi Izumita

More Decks by Ryoichi Izumita

Other Decks in Programming

Featured

Transcript