Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter2でweb appを作る

Avatar for asuka asuka
June 24, 2021
0
37

Flutter2でweb appを作る

2021年のLT資料
Avatar for asuka

asuka

June 24, 2021
Tweet

More Decks by asuka

See All by asuka
Wasm元年
Avatar for asuka askua
0
140
wstdなんだか良さそう
Avatar for asuka askua
0
47
Dartでウェブ開発 (やりたい)
Avatar for asuka askua
0
50
Denoでパッケージを作りJSRに公開する
Avatar for asuka askua
0
34
WASI 0.2のinit処理
Avatar for asuka askua
1
91
TSのコードをRustで書き直した話
Avatar for asuka askua
4
1.1k
久しぶりに自作ライブラリをリファクタした話
Avatar for asuka askua
0
98
今年の振り返り
Avatar for asuka askua
0
82
Wasmってなに_ 新宿御苑.wasm #2024.12.11
Avatar for asuka askua
1
350

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.5k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
694
190k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.3k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k

Transcript

  1. Flutter2 Ͱweb appΛ࡞Δ Jun 24 2021 asuka y

  2. Agenda 1. Flutterͱ͸ 2. Web։ൃ 3. ·ͱΊ

  3. Flutterͱ͸

  4. Flutter Flutter͸ɺGoogleʹΑͬͯ։ൃ ͞ΕͨϑϦʔ͔ͭΦʔϓϯιʔε ͷUIͷSDKͰ͋Δɻ୯Ұͷίʔυ ϕʔε͔ΒɺAndroidɺiOSɺ LinuxɺmacOSɺWindowsɺ Google Fuchsia޲͚ͷΫϩεϓ ϥοτϑΥʔϜΞϓϦέʔγϣϯ Λ։ൃ͢ΔͨΊʹར༻͞ΕΔɻ

    by Wikipedia

  5. Flutterͱ͸ by Wikipedia Flutter͸ɺGoogleʹΑͬͯ։ൃ ͞ΕͨϑϦʔ͔ͭΦʔϓϯιʔε ͷUIͷSDKͰ͋Δɻ୯Ұͷίʔυ ϕʔε͔ΒɺAndroidɺiOSɺ LinuxɺmacOSɺWindowsɺ Google Fuchsia޲͚ͷΫϩεϓ

    ϥοτϑΥʔϜΞϓϦέʔγϣϯ Λ։ൃ͢ΔͨΊʹར༻͞ΕΔɻ

  6. Flutterͱ͸ by Wikipedia Flutter͸ɺGoogleʹΑͬͯ։ൃ ͞ΕͨϑϦʔ͔ͭΦʔϓϯιʔε ͷUIͷSDKͰ͋Δɻ୯Ұͷίʔυ ϕʔε͔ΒɺAndroidɺiOSɺ LinuxɺmacOSɺWindowsɺ Google Fuchsia޲͚ͷΫϩεϓ

    ϥοτϑΥʔϜΞϓϦέʔγϣϯ Λ։ൃ͢ΔͨΊʹར༻͞ΕΔɻ Z Z Z Z Z

  7. Flutter Flutter͸ɺGoogleʹΑͬͯ։ൃ ͞ΕͨϑϦʔ͔ͭΦʔϓϯιʔε ͷUIͷSDKͰ͋Δɻ୯Ұͷίʔυ ϕʔε͔ΒɺAndroidɺiOSɺ LinuxɺmacOSɺWindowsɺ Google Fuchsia޲͚ͷΫϩεϓ ϥοτϑΥʔϜΞϓϦέʔγϣϯ Λ։ൃ͢ΔͨΊʹར༻͞ΕΔɻ

    by Wikipedia ϋʔυ΢ΣΞ OS Flutter Τϯδϯ Flutter App (Dart)

  8. Dart Dartݴޠ͸JavaScriptݴޠʹ͋ ΔղܾͰ͖ͳ͍ݴޠ্ͷ໰୊ ఺Λղܾ͠ͳ͓͔ͭɺΑΓ༏ ΕͨύϑΥʔϚϯεΛൃش ͠ɺେن໛ͳϓϩδΣΫτ༻ ్ʹ΋଱͑ಘΔಛ௃Λඋ͑ɺ ηΩϡϦςΟ໘Ͱ΋ΑΓ༏Ε ͨݴޠͱͯ͠ɺઃܭ͞Εͨɻ by

    Wikipedia 2011೥10݄ Dartൃද(Google) 2015೥ Chrome΁ͷ౷߹Λஅ ೦(Google) 2017೥ TypeScriptΛࣾ಺ඪ४ ݴޠʹ(Google) 2018೥2݄ Dart2ϦϦʔε

  9. Dart ίϯύΠϧݴޠͰ΋͋ΓɼεΫϦϓτݴޠͰ΋͋Δ 1. JITίϯύΠϧ(PHPͳͲ) 2. AOTίϯύΠϧ (JavaͳͲ) 3. ωΠςΟϒίϯύΠϧ (CͳͲ)

  10. Dart Dartݴޠ͸JavaScriptݴޠʹ͋ ΔղܾͰ͖ͳ͍ݴޠ্ͷ໰୊ ఺Λղܾ͠ͳ͓͔ͭɺΑΓ༏ ΕͨύϑΥʔϚϯεΛൃش ͠ɺେن໛ͳϓϩδΣΫτ༻ ్ʹ΋଱͑ಘΔಛ௃Λඋ͑ɺ ηΩϡϦςΟ໘Ͱ΋ΑΓ༏Ε ͨݴޠͱͯ͠ɺઃܭ͞Εͨɻ by

    Wikipedia 2011೥10݄ Dartൃද(Google) 2015೥ Chrome΁ͷ౷߹Λஅ ೦(Google) 2017೥ TypeScriptΛࣾ಺ඪ४ ݴޠʹ(Google) 2018೥2݄ Dart2ϦϦʔε

  11. Flutter 1.0 
 2018೥12݄4೔ 2.0 
 2021೥3݄3೔ by Wikipedia 2011೥10݄

    Dartൃද(Google) 2015೥ Chrome΁ͷ౷߹Λஅ ೦(Google) 2017೥ TypeScriptΛࣾ಺ඪ४ ݴޠʹ(Google) 2018೥2݄ Dart2ϦϦʔε 2018೥12݄ FlutterϦϦʔε 2021೥3݄ Dart2.12ϦϦʔε 2021೥3݄ Flutter2ϦϦʔε

  12. 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; }

  13. 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; }

  14. Flutter 1.0 
 2018೥12݄4೔ 2.0 
 2021೥3݄3೔ by Wikipedia 2011೥10݄

    Dartൃද(Google) 2015೥ Chrome΁ͷ౷߹Λஅ ೦(Google) 2017೥ TypeScriptΛࣾ಺ඪ४ ݴޠʹ(Google) 2018೥2݄ Dart2ϦϦʔε 2018೥12݄ FlutterϦϦʔε 2021೥3݄ Dart2.12ϦϦʔε 2021೥3݄ Flutter2ϦϦʔε

  15. Flutter2ͰมΘͬͨ͜ͱ • Linux, Windows, macOS, webͷαϙʔτ͕҆ఆ൛ʹ૊Έ ࠐ·Εͨ

  16. Flutter2ͰมΘͬͨ͜ͱ • Linux, Windows, macOS, webͷαϙʔτ͕҆ఆ൛ʹ૊Έ ࠐ·Εͨ

  17. Flutter2ͰมΘͬͨ͜ͱ • Linux, Windows, macOS, webͷαϙʔτ͕҆ఆ൛ʹ૊Έ ࠐ·Εͨ $ f lutter

    run -d chrome --web-renderer canvaskit

  18. Web։ൃ

  19. Web։ൃ • JS͕DOMπϦʔΛߋ৽ • DOMπϦʔͷ಺༰Λϒ ϥ΢β͕දࣔ ϒϥ΢β DOMπϦʔ … <body>

    <h1>Hello, World</h1> … … JS

  20. Flutter • DOMπϦʔΛߋ৽͠ͳ ͍ • ಠࣗͷϨϯμϦϯάΤ ϯδϯͰඳը for WEB ϒϥ΢β

    ϨϯμϦϯάΤϯδϯ(canvaskit) JS

  21. ϝϦοτ • ϒϥ΢β؀ڥʹࠨӈ͞Εͳ͍ը໘Λ࡞੒Ͱ͖Δ • ը໘ͷදࣔ੾Γସ͕͑଎͍

  22. σϝϦοτ • Webϖʔδͱͯ͠͸༰ྔ͕େ͖͘ͳΓ͕ͪ • จষ৘ใͱͯ͠Ͱ͸ͳ͘ɼը૾৘ใͱͯ͠දࣔ͞ΕΔͷ Ͱɼϒϥ΢βͷݕࡧػೳ͕࢖͑ͳ͍

  23. Flutterͷ࢖͍ॴ WebϖʔδΛ࡞ΔͷͰ͸ͳ͘ɼߴػೳͳWebΞϓϦΛ࡞੒ ͍ͨ͠৔߹ͷબ୒ࢶʹͳΓಘΔ

  24. 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, );

  25. for Web࢖ͬͯΈͯ • Hot reload͕ޮ͔ͣɼશͯHot restartʹͳΔ • جຊUI͸ॆ࣮͍ͯ͠Δ͕ɼը૾ܥͷϥΠϒϥϦͳͲ͸WebʹରԠ͠ ͍ͯͳ͍΋ͷ͕ଟ͍(ແ͚Ε͹࡞Ζ͏) •

    Chromeͷσόοά؀ڥ͸গʑॏͨ͘ײ͡Δ(ؾͷ͍͔ͤ΋) • Canvaskit؀ڥͰ͸೔ຊޠͳͲ͸·ͣTofuʹͳΔ(ճආࡦ͸͋Δ͕ֆ จࣈ͕·ͩ՝୊)

  26. ·ͱΊ

  27. ·ͱΊ • WebϖʔδΛ࡞Γ͍ͨ৔߹ͷબ୒ࢶͱͯ͠͸ऑ͍͔΋? • (WebϖʔδͰ͸ͳ͘)WebΞϓϦΛ࡞Γ͍ͨ৔߹ͷબ୒ࢶ ʹ͸ͳΓಘΔ? • ΞϓϦͷΫϩεϓϥοτϑΥʔϜରԠ(͍ͭͰʹWeb΋ର Ԡ͍ͨ͠)৔߹ͷબ୒ࢶʹ͸ͳΓಘΔ