Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutterアプリを生成AIで生成する勘所
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Ryoichi Izumita
September 20, 2024
Programming
0
1.5k
Flutterアプリを生成AIで生成する勘所
Ryoichi Izumita
September 20, 2024
Tweet
Share
More Decks by Ryoichi Izumita
See All by Ryoichi Izumita
モバイル開発における共通性・可変性分析入門
rizumita
0
90
FlutterアプリのテストでBuilderパターンを活用しよう
rizumita
0
730
SwiftUIの大地を駆け巡るための仕組みを作る
rizumita
0
280
VIPERアーキテクチャ
rizumita
1
830
FRPを使いはじめて3年が過ぎました。
rizumita
4
1.4k
とあるプログラマのリモートワーク
rizumita
0
380
JavaScript for Automation
rizumita
1
270
Other Decks in Programming
See All in Programming
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
tsukamoto1783
0
200
日本だけで解禁されているアプリ起動の方法
ryunakayama
0
250
生成AIを活用したソフトウェア開発ライフサイクル変革の現在値
hiroyukimori
PRO
0
110
Gemini for developers
meteatamel
0
100
Package Management Learnings from Homebrew
mikemcquaid
0
230
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
140
Oxlint JS plugins
kazupon
1
1k
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
380
CSC307 Lecture 01
javiergs
PRO
0
690
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
heimusu
7
2.8k
Rust 製のコードエディタ “Zed” を使ってみた
nearme_tech
PRO
0
210
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
280
Featured
See All Featured
Leo the Paperboy
mayatellez
4
1.4k
Context Engineering - Making Every Token Count
addyosmani
9
670
Java REST API Framework Comparison - PWX 2021
mraible
34
9.1k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
110
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
230
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.1k
What's in a price? How to price your products and services
michaelherold
247
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
120
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
53
Transcript
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