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

Flutter2でweb appを作る

asuka
June 24, 2021
0
32

Flutter2でweb appを作る

2021年のLT資料

asuka

June 24, 2021
Tweet

More Decks by asuka

See All by asuka
WASI 0.2のinit処理
askua
0
14
TSのコードをRustで書き直した話
askua
4
1k
久しぶりに自作ライブラリをリファクタした話
askua
0
76
今年の振り返り
askua
0
62
Wasmってなに_ 新宿御苑.wasm #2024.12.11
askua
1
310
TinyGoを使ったVSCode拡張機能実装
askua
3
360
Deno+JSRでパッケージを作って公開する
askua
0
210
最新のWasm事情
askua
5
2.9k
あなたの知らない組版の世界
askua
1
80

Featured

See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Why Our Code Smells
bkeepers
PRO
336
57k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
500
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Fireside Chat
paigeccino
34
3.2k
Adopting Sorbet at Scale
ufuk
74
9.2k
Bash Introduction
62gerente
611
210k
Side Projects
sachag
452
42k
Agile that works and the tools we love
rasmusluckow
328
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
How to Ace a Technical Interview
jacobian
276
23k

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