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で画面を固めないために
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
keitatomozawa
December 14, 2019
Programming
1
760
flutterで画面を固めないために
keitatomozawa
December 14, 2019
Tweet
Share
More Decks by keitatomozawa
See All by keitatomozawa
大規模開発組織で「未完」の基盤を育てるために、 完璧ではないEMがいかにして価値を作るか
keitatomozawa
0
67
1人のプレイヤーだった私が"プレイング"をやめて学んだこと / What I Learned about Engineering Management When I Stopped Being a Player
keitatomozawa
0
150
"統合ERP"とアプリケーションアーキテクチャ
keitatomozawa
0
11k
freee技術の日 freee販売開発秘話 BizDev一体で挑む新規プロダクト開発 / How was freee sales management developed
keitatomozawa
1
24k
Concurrency Bugsについての論文を読む
keitatomozawa
0
450
Other Decks in Programming
See All in Programming
AI時代の認知負荷との向き合い方
optfit
0
160
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
tsukamoto1783
0
200
MUSUBIXとは
nahisaho
0
140
2026年 エンジニアリング自己学習法
yumechi
0
140
dchart: charts from deck markup
ajstarks
3
1k
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
tjjh89017
0
180
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
180
今から始めるClaude Code超入門
448jp
8
9.1k
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
izumin5210
7
2.3k
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
gekko0114
2
440
日本だけで解禁されているアプリ起動の方法
ryunakayama
0
150
CSC307 Lecture 09
javiergs
PRO
1
840
Featured
See All Featured
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
68
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
117
110k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
0
160
Music & Morning Musume
bryan
47
7.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
58
50k
Optimizing for Happiness
mojombo
379
71k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
RailsConf 2023
tenderlove
30
1.3k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
440
Transcript
freee 株式会社 flutterで画面を固めない為に @GDG DevFest Kobe 2019.12.15
• twitter:tomoz6o9 • Webアプリケーションエンジニア ◦ RoR/React/Go • 大阪にも開発チームあります! Keita Tomozawa
友澤 啓太 Software Engineer 2
01 画面を固めうる CPUヘビーな処理の例 3 Section
素因数分解をする (普通やらない)
巨大なJSONのParse(とか)をする ギリある(ということにする)
02 どうすればいいか 6 Section
7 画面を固めてしまう例 `async/await`は書けばいい訳ではない • 中身がasyncになっていないので無意味 ◦ よく使う‘package:http’等の中身は非同期になる ように実装されているから安心
• 固まる目安 ◦ flutterは 通 常 60fps 出 るようになっているので 16ms以上かかるような処理ではフレーム落ちの 可能性がでてくる Source: https://flutter.dev/docs/perf/rendering/ui-performance
8 何が起こっているか • Dartはシングルスレッドで動作する • async/awaitはメイン処理上の ‘concurrency’ が表現されている ◦ not
‘parallelism’ Parallelism Concurrency
9 どうする:Use `compute` function ‘package:flutter/foundation.dart’ 内のcompute関数を使う • foundation.dartをimport
• 該当する処理をstaticな処理にする • compute関数に該当処理、計算したい引数を 渡してawait(または普通のFutureを扱うように) Source: https://api.flutter.dev/flutter/foundation/compute.html
10 何がおこっているか • DartにはIsolateというものがある ◦ JavaなどのThreadみたいなものだが、メモリを共有しない ◦ jsのwebworkerに近い ◦ 異なるisolateはparallelに動作する
• メイン処理は『Main Isolate』という場所で動いている • flutterから複数のIsolateを使うことができる • 重い処理は、別のIsolateに乗せてあげることでUIフリーズを防ぐ • このIsolateを簡単に使えるようにしてくれているのがcompute関数
11 注意点 • staticメソッドしか渡せない ◦ 2つのIsolateは互いにメモリを共有しないので • 処理に必要な情報は引数として渡す必要がある ◦ 同上
• スイッチングコストは考慮すべき ◦ Isolateはいわゆる軽量スレッドほど手軽ではない ◦ はっきり止まってしまう場合以外はそこまでうま味なし
12 demoをと思ったのですが、、、 • dart padでflutter webがいじれるようになったので ◦ https://dartpad.dartlang.org/d35da88b66b3144b3784c94118f033e1 ◦ https://gist.github.com/keitatomozawa/d35da88b66b3144b3784c94118f033e1
• まだ webでは `compute` 関数がサポートされていないので割愛
ありがとうございました
スモールビジネスを、 世界の主役に。