Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Flutter2でweb appを作る

Avatar for asuka asuka
June 24, 2021
0
41

Flutter2でweb appを作る

2021年のLT資料

Avatar for asuka

asuka

June 24, 2021
Tweet

More Decks by asuka

See All by asuka
ライブラリを公開してメンテナンスした一年
Avatar for asuka askua
0
18
Wasmの気になる最新情報
Avatar for asuka askua
0
280
Wasmのエコシステムを使った ツール作成方法
Avatar for asuka askua
0
310
Pure Goで体験するWasmの未来
Avatar for asuka askua
1
280
Wasmで社内ツールを作って配布しよう
Avatar for asuka askua
0
240
Wasm元年
Avatar for asuka askua
0
270
wstdなんだか良さそう
Avatar for asuka askua
0
95
Dartでウェブ開発 (やりたい)
Avatar for asuka askua
0
70
Denoでパッケージを作りJSRに公開する
Avatar for asuka askua
0
64

Featured

See All Featured
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
61
47k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
160
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
550
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
110
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
160
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
22
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
140

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