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
Wasmの気になる最新情報
Avatar for asuka askua
0
270
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
260
wstdなんだか良さそう
Avatar for asuka askua
0
95
Dartでウェブ開発 (やりたい)
Avatar for asuka askua
0
68
Denoでパッケージを作りJSRに公開する
Avatar for asuka askua
0
60
WASI 0.2のinit処理
Avatar for asuka askua
1
160

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
500
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
390
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.3k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
790
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.3k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k

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