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
9
Flutter2でweb appを作る
2021年のLT資料
Asuka
June 24, 2021
Tweet
Share
More Decks by Asuka
See All by Asuka
新刊紹介
askua
0
72
Go1.21とWebAssembly
askua
0
1.9k
技術書典14の振り返り
askua
0
100
async await完全に理解した
askua
0
20
自宅ネットワーク構築
askua
0
33
k8sクラスター構築
askua
0
20
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Design by the Numbers
sachag
274
18k
Web development in the modern age
philhawksworth
203
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Optimizing for Happiness
mojombo
370
69k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
In The Pink: A Labor of Love
frogandcode
138
21k
What's in a price? How to price your products and services
michaelherold
238
11k
Designing Experiences People Love
moore
136
23k
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ର Ԡ͍ͨ͠)߹ͷબࢶʹͳΓಘΔ