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
24
Flutter2でweb appを作る
2021年のLT資料
asuka
June 24, 2021
Tweet
Share
More Decks by asuka
See All by asuka
最新のWasm事情
askua
5
2.5k
あなたの知らない組版の世界
askua
1
46
夏の思い出
askua
1
68
go:wasmexport
askua
1
150
Flutter for Web 2024
askua
1
210
ウェブエンジニアでもWasmを使いたい!
askua
3
13k
エンジニアコミュニティ
askua
0
61
技術書典16オフライン振り返り
askua
0
61
技術書典16新刊紹介
askua
0
230
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Designing for humans not robots
tammielis
249
25k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Documentation Writing (for coders)
carmenintech
65
4.4k
It's Worth the Effort
3n
183
27k
Being A Developer After 40
akosma
85
590k
Become a Pro
speakerdeck
PRO
24
4.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Ruby is Unlike a Banana
tanoku
96
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
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ର Ԡ͍ͨ͠)߹ͷબࢶʹͳΓಘΔ