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
Ryoichi Izumita
September 20, 2024
Programming
0
1.2k
Flutterアプリを生成AIで生成する勘所
Ryoichi Izumita
September 20, 2024
Tweet
Share
More Decks by Ryoichi Izumita
See All by Ryoichi Izumita
モバイル開発における共通性・可変性分析入門
rizumita
0
72
FlutterアプリのテストでBuilderパターンを活用しよう
rizumita
0
650
SwiftUIの大地を駆け巡るための仕組みを作る
rizumita
0
260
VIPERアーキテクチャ
rizumita
1
800
FRPを使いはじめて3年が過ぎました。
rizumita
4
1.4k
とあるプログラマのリモートワーク
rizumita
0
360
JavaScript for Automation
rizumita
1
260
Other Decks in Programming
See All in Programming
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.8k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
460
GoのGenericsによるslice操作との付き合い方
syumai
3
700
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
580
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
480
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
650
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
550
Create a website using Spatial Web
akkeylab
0
310
Deep Dive into ~/.claude/projects
hiragram
10
2.1k
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
330
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
240
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
69
11k
Side Projects
sachag
455
42k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Rails Girls Zürich Keynote
gr2m
94
14k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Language of Interfaces
destraynor
158
25k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Practical Orchestrator
shlominoach
188
11k
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