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

Flutter2でweb appを作る

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for asuka asuka
June 24, 2021
45
0

Flutter2でweb appを作る

2021年のLT資料

Avatar for asuka

asuka

June 24, 2021

More Decks by asuka

See All by asuka
2025年ふりかえり
Avatar for asuka askua
1
220
ライブラリを公開してメンテナンスした一年
Avatar for asuka askua
0
84
Wasmの気になる最新情報
Avatar for asuka askua
1
360
Wasmのエコシステムを使った ツール作成方法
Avatar for asuka askua
0
380
Pure Goで体験するWasmの未来
Avatar for asuka askua
1
1k
Wasmで社内ツールを作って配布しよう
Avatar for asuka askua
0
290
Wasm元年
Avatar for asuka askua
0
350
wstdなんだか良さそう
Avatar for asuka askua
0
130
Dartでウェブ開発 (やりたい)
Avatar for asuka askua
0
89

Featured

See All Featured
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.1k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
230
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
200
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
10k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
230
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.5k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
370
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
7.6k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
700
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
110
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.9k

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΋ର Ԡ͍ͨ͠)৔߹ͷબ୒ࢶʹ͸ͳΓಘΔ