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
67
go:wasmexport
askua
1
150
Flutter for Web 2024
askua
1
210
ウェブエンジニアでもWasmを使いたい!
askua
3
13k
エンジニアコミュニティ
askua
0
60
技術書典16オフライン振り返り
askua
0
61
技術書典16新刊紹介
askua
0
230
Featured
See All Featured
It's Worth the Effort
3n
183
27k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
26
700
Designing for humans not robots
tammielis
249
25k
Building Your Own Lightsaber
phodgson
102
6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
Bash Introduction
62gerente
608
210k
We Have a Design System, Now What?
morganepeng
50
7.2k
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ର Ԡ͍ͨ͠)߹ͷબࢶʹͳΓಘΔ