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
81
FlutterアプリのテストでBuilderパターンを活用しよう
rizumita
0
660
SwiftUIの大地を駆け巡るための仕組みを作る
rizumita
0
260
VIPERアーキテクチャ
rizumita
1
810
FRPを使いはじめて3年が過ぎました。
rizumita
4
1.4k
とあるプログラマのリモートワーク
rizumita
0
370
JavaScript for Automation
rizumita
1
260
Other Decks in Programming
See All in Programming
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
480
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
35
10k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
Reactの歴史を振り返る
tutinoko
1
150
Understanding Kotlin Multiplatform
l2hyunwoo
0
230
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
250
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
リッチエディターを安全に開発・運用するために
unachang113
1
270
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
530
AIのメモリー
watany
11
1.1k
JetBrainsのAI機能の紹介 #jjug
yusuke
0
120
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Side Projects
sachag
455
43k
Designing Experiences People Love
moore
142
24k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
A Tale of Four Properties
chriscoyier
160
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Agile that works and the tools we love
rasmusluckow
329
21k
The Cult of Friendly URLs
andyhume
79
6.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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