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
Flutter2でweb appを作る
Search
asuka
June 24, 2021
0
32
Flutter2でweb appを作る
2021年のLT資料
asuka
June 24, 2021
Tweet
Share
More Decks by asuka
See All by asuka
WASI 0.2のinit処理
askua
1
34
TSのコードをRustで書き直した話
askua
4
1k
久しぶりに自作ライブラリをリファクタした話
askua
0
77
今年の振り返り
askua
0
63
Wasmってなに_ 新宿御苑.wasm #2024.12.11
askua
1
310
TinyGoを使ったVSCode拡張機能実装
askua
3
360
Deno+JSRでパッケージを作って公開する
askua
0
210
最新のWasm事情
askua
5
2.9k
あなたの知らない組版の世界
askua
1
81
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Speed Design
sergeychernyshev
27
810
Thoughts on Productivity
jonyablonski
69
4.5k
Being A Developer After 40
akosma
89
590k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Facilitating Awesome Meetings
lara
52
6.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Transcript
Flutter2 Ͱweb appΛ࡞Δ Jun 24 2021 asuka y
Agenda 1. Flutterͱ 2. Web։ൃ 3. ·ͱΊ
Flutterͱ
Flutter FlutterɺGoogleʹΑͬͯ։ൃ ͞ΕͨϑϦʔ͔ͭΦʔϓϯιʔε ͷUIͷSDKͰ͋Δɻ୯Ұͷίʔυ ϕʔε͔ΒɺAndroidɺiOSɺ LinuxɺmacOSɺWindowsɺ Google Fuchsia͚ͷΫϩεϓ ϥοτϑΥʔϜΞϓϦέʔγϣϯ Λ։ൃ͢ΔͨΊʹར༻͞ΕΔɻ
by Wikipedia
Flutterͱ by Wikipedia FlutterɺGoogleʹΑͬͯ։ൃ ͞ΕͨϑϦʔ͔ͭΦʔϓϯιʔε ͷUIͷSDKͰ͋Δɻ୯Ұͷίʔυ ϕʔε͔ΒɺAndroidɺiOSɺ LinuxɺmacOSɺWindowsɺ Google Fuchsia͚ͷΫϩεϓ
ϥοτϑΥʔϜΞϓϦέʔγϣϯ Λ։ൃ͢ΔͨΊʹར༻͞ΕΔɻ
Flutterͱ by Wikipedia FlutterɺGoogleʹΑͬͯ։ൃ ͞ΕͨϑϦʔ͔ͭΦʔϓϯιʔε ͷUIͷSDKͰ͋Δɻ୯Ұͷίʔυ ϕʔε͔ΒɺAndroidɺiOSɺ LinuxɺmacOSɺWindowsɺ Google Fuchsia͚ͷΫϩεϓ
ϥοτϑΥʔϜΞϓϦέʔγϣϯ Λ։ൃ͢ΔͨΊʹར༻͞ΕΔɻ Z Z Z Z Z
Flutter FlutterɺGoogleʹΑͬͯ։ൃ ͞ΕͨϑϦʔ͔ͭΦʔϓϯιʔε ͷUIͷSDKͰ͋Δɻ୯Ұͷίʔυ ϕʔε͔ΒɺAndroidɺiOSɺ LinuxɺmacOSɺWindowsɺ Google Fuchsia͚ͷΫϩεϓ ϥοτϑΥʔϜΞϓϦέʔγϣϯ Λ։ൃ͢ΔͨΊʹར༻͞ΕΔɻ
by Wikipedia ϋʔυΣΞ OS Flutter Τϯδϯ Flutter App (Dart)
Dart DartݴޠJavaScriptݴޠʹ͋ ΔղܾͰ͖ͳ͍ݴޠ্ͷ Λղܾ͠ͳ͓͔ͭɺΑΓ༏ ΕͨύϑΥʔϚϯεΛൃش ͠ɺେنͳϓϩδΣΫτ༻ ్ʹ͑ಘΔಛΛඋ͑ɺ ηΩϡϦςΟ໘ͰΑΓ༏Ε ͨݴޠͱͯ͠ɺઃܭ͞Εͨɻ by
Wikipedia 201110݄ Dartൃද(Google) 2015 Chromeͷ౷߹Λஅ ೦(Google) 2017 TypeScriptΛࣾඪ४ ݴޠʹ(Google) 20182݄ Dart2ϦϦʔε
Dart ίϯύΠϧݴޠͰ͋ΓɼεΫϦϓτݴޠͰ͋Δ 1. JITίϯύΠϧ(PHPͳͲ) 2. AOTίϯύΠϧ (JavaͳͲ) 3. ωΠςΟϒίϯύΠϧ (CͳͲ)
Dart DartݴޠJavaScriptݴޠʹ͋ ΔղܾͰ͖ͳ͍ݴޠ্ͷ Λղܾ͠ͳ͓͔ͭɺΑΓ༏ ΕͨύϑΥʔϚϯεΛൃش ͠ɺେنͳϓϩδΣΫτ༻ ్ʹ͑ಘΔಛΛඋ͑ɺ ηΩϡϦςΟ໘ͰΑΓ༏Ε ͨݴޠͱͯ͠ɺઃܭ͞Εͨɻ by
Wikipedia 201110݄ Dartൃද(Google) 2015 Chromeͷ౷߹Λஅ ೦(Google) 2017 TypeScriptΛࣾඪ४ ݴޠʹ(Google) 20182݄ Dart2ϦϦʔε
Flutter 1.0 201812݄4 2.0 20213݄3 by Wikipedia 201110݄
Dartൃද(Google) 2015 Chromeͷ౷߹Λஅ ೦(Google) 2017 TypeScriptΛࣾඪ४ ݴޠʹ(Google) 20182݄ Dart2ϦϦʔε 201812݄ FlutterϦϦʔε 20213݄ Dart2.12ϦϦʔε 20213݄ Flutter2ϦϦʔε
Dart2.11 → 2.12 2.12࣮࣭Dart3 Sound Null Safetyͷ࣮ʹΑΓɼ७ਮͳޙํޓ͕ ࣦΘΕͨ // Dart2.11
void main() { String foo; } // Dart2.12 void main() { String foo; // ίϯύΠϧΤϥʔ } // Dart2.12 void main() { String? foo; }
Dart2.11 → 2.12 2.12࣮࣭Dart3 Sound Null Safetyͷ࣮ʹΑΓɼ७ਮͳޙํޓ͕ ࣦΘΕͨ // Dart2.11
void main() { String foo; } // Dart2.12 void main() { String foo; // ίϯύΠϧΤϥʔ } // Dart2.12 void main() { String? foo; }
Flutter 1.0 201812݄4 2.0 20213݄3 by Wikipedia 201110݄
Dartൃද(Google) 2015 Chromeͷ౷߹Λஅ ೦(Google) 2017 TypeScriptΛࣾඪ४ ݴޠʹ(Google) 20182݄ Dart2ϦϦʔε 201812݄ FlutterϦϦʔε 20213݄ Dart2.12ϦϦʔε 20213݄ Flutter2ϦϦʔε
Flutter2ͰมΘͬͨ͜ͱ • Linux, Windows, macOS, webͷαϙʔτ͕҆ఆ൛ʹΈ ࠐ·Εͨ
Flutter2ͰมΘͬͨ͜ͱ • Linux, Windows, macOS, webͷαϙʔτ͕҆ఆ൛ʹΈ ࠐ·Εͨ
Flutter2ͰมΘͬͨ͜ͱ • Linux, Windows, macOS, webͷαϙʔτ͕҆ఆ൛ʹΈ ࠐ·Εͨ $ f lutter
run -d chrome --web-renderer canvaskit
Web։ൃ
Web։ൃ • JS͕DOMπϦʔΛߋ৽ • DOMπϦʔͷ༰Λϒ ϥβ͕දࣔ ϒϥβ DOMπϦʔ … <body>
<h1>Hello, World</h1> … … JS
Flutter • DOMπϦʔΛߋ৽͠ͳ ͍ • ಠࣗͷϨϯμϦϯάΤ ϯδϯͰඳը for WEB ϒϥβ
ϨϯμϦϯάΤϯδϯ(canvaskit) JS
ϝϦοτ • ϒϥβڥʹࠨӈ͞Εͳ͍ը໘Λ࡞Ͱ͖Δ • ը໘ͷදࣔΓସ͕͍͑
σϝϦοτ • Webϖʔδͱͯ͠༰ྔ͕େ͖͘ͳΓ͕ͪ • จষใͱͯ͠Ͱͳ͘ɼը૾ใͱͯ͠දࣔ͞ΕΔͷ Ͱɼϒϥβͷݕࡧػೳ͕͑ͳ͍
Flutterͷ͍ॴ WebϖʔδΛ࡞ΔͷͰͳ͘ɼߴػೳͳWebΞϓϦΛ࡞ ͍ͨ͠߹ͷબࢶʹͳΓಘΔ
LicenseRegistry class LicenseRegistry.addLicense(() async* { f inal license = await
rootBundle.loadString('fonts/OFL.txt'); yield LicenseEntryWithLineBreaks( ['Noto Sans JP'], license, ); }); showAboutDialog( context: context, applicationName: name, applicationVersion: version, applicationLegalese: description, );
for WebͬͯΈͯ • Hot reload͕ޮ͔ͣɼશͯHot restartʹͳΔ • جຊUIॆ࣮͍ͯ͠Δ͕ɼը૾ܥͷϥΠϒϥϦͳͲWebʹରԠ͠ ͍ͯͳ͍ͷ͕ଟ͍(ແ͚Ε࡞Ζ͏) •
Chromeͷσόοάڥগʑॏͨ͘ײ͡Δ(ؾͷ͍͔ͤ) • CanvaskitڥͰຊޠͳͲ·ͣTofuʹͳΔ(ճආࡦ͋Δ͕ֆ จࣈ͕·ͩ՝)
·ͱΊ
·ͱΊ • WebϖʔδΛ࡞Γ͍ͨ߹ͷબࢶͱͯ͠ऑ͍͔? • (WebϖʔδͰͳ͘)WebΞϓϦΛ࡞Γ͍ͨ߹ͷબࢶ ʹͳΓಘΔ? • ΞϓϦͷΫϩεϓϥοτϑΥʔϜରԠ(͍ͭͰʹWebର Ԡ͍ͨ͠)߹ͷબࢶʹͳΓಘΔ