Flutter Webのすゝめ

「鹿児島.mk #11 おかえりオンラインLT大会」で発表した内容です。
https://kagoshima-mk.connpass.com/event/182417/

Flutter Webの所感についてです。

Transcript

1. Flutter Web ͷ͢ʍΊ ࣛࣇౡ.mk #11 2020-07-31 ͨ͘͢Μ
2. Agenda 1. ࣗݾ঺հ 2. Flutterͷ֓ཁ঺հ 3. Flutter Webͷॴײ
3. ࣗݾ঺հ ◆໊લɿͨ͘͢Μ ◆ࣗݾ঺հ ϑϦʔϥϯεΤϯδχΞ (ελʔτΞοϓͷWeb, εϚϗΞϓϦ։ൃࢧԉ) ࣛࣇౡ.mk, ώϥϚαͳͲͷίϛϡχςΟ׆ಈ
4. ϑΥϩʔɾνϟϯωϧΑΖ͘͠Ͱ͢ʂ
5. ྗΛೖΕ͍ͯΔίϛϡχςΟ׆ಈ ࣛࣇౡ.mk ώϥϚα ॳݟͷਓͰ΋ؾܰʹࢀՃͰ͖ΔίϛϡχςΟ ڞಉ։ൃͷΤϯδχΞίϛϡχςΟ
6. ࣛࣇౡͰ࠷΋ΞϓϦ։ൃʹڧ͍ ϑϦʔϥϯεΤϯδχΞ
7. ݁࿦ ݸਓͰεϚϗΞϓϦΛ࡞ΔͳΒɺ FlutterͰΞϓϦ΋Web(؅ཧϖʔδ)΋࡞Ζ͏
8. ͳͥεϚϗΞϓϦ։ൃʁ • ΠϯϑϧΤϯαʔ΍ϓϩάϥϛϯάεΫʔϧͷ޿ࠂʹΑΔΤϯδχΞ ࢢ৔ͷϨϞϯࢢ৔Խ • εϚϗΞϓϦΤϯδχΞ͸ਓ͕଍Γͣʹߴ୯ՁͱͳΔ܏޲͕͋Δ • Web։ൃͱεϚϗΞϓϦ։ൃ͸஌ݟΛͦͷ··స༻Ͱ͖ͣɺ࣮຿Λੵ ·ͳ͍ͱ஌ݟ͕ஷ·Γʹ͍͘ εϚϗΞϓϦ։ൃͷ͢ʍΊ
9. Flutterͱ͸ • Google։ൃͷΫϩεϓϥοτϑΥʔϜ؀ڥ • iOSɺAndroidɺσεΫτοϓɺWebͷ։ൃ͕Ͱ͖Δ • ϗοτϦϩʔυͰଈϓϨϏϡʔ͕Մೳ • Widgetͱݺ͹ΕΔύʔπΛ૊Έ߹ΘͤΔ͜ͱͰɺࠓ෩ͳUI(ϚςϦΞϧ σβΠϯ)Λ؆୯ʹ࡞੒Ͱ͖Δ(VuetifyΈ͍ͨͳײ͡) • ݴޠ͸ϚΠφʔͳDart(Kotlin΍TypeScriptͬΆ͍)
10. ͳͥFlutter͔ • ΫϩεϓϥοτϑΥʔϜͰ͋Δ • Google͕։ൃ͍ͯ͠ΔͨΊ, ޙΖ६͕ڧ͘Firebaseͱ΋૬ੑ͕ྑ͍ • Ͱ͖ͨ͹͔Γͷ؀ڥͰϥΠόϧ͕গͳ͍ (Flutterͷ࣮຿ܦݧ1೥Ͱ΋ϕςϥϯͷྖҬʹ͸͍Δ)
11. Web support for Flutter
12. FlutterͰWebͷϑϩϯυΤϯυ΋։ൃͰ͖Δ • Ϗϧυ࣌ʹipa΍apkΛు͖ग़͢Α͏ʹ, HTML, JSϑΝΠϧΛు͖ग़ͤ Δ • SPAͬΆ͘੩తϖʔδͱͯ͠ѻ͑ΔͷͰ, GitHub Pages΍Netlify, Firebase HostingͰແྉެ։΋Մೳ • iOS/AndroidΞϓϦͷίʔυͰWebΞϓϦ΋ಈ͔͢͜ͱ͕Ͱ͖Δ
13. ෳ਺ͷݴޠΛ࢖͏ετϨε͔Β։์͞ΕΔ Dart(Flutter) JavaScript, TypeScript Vue(Nuxt), React(Next)
14. Firebaseͱ૬ੑ͕Α͘, αʔόϨεͰӡ༻ ✕ όοΫΤϯυΛFirebaseͰ୅ସ
15. ࣮ࡍʹ࡞ͬͯΈͨ
16. ύοέʔδ؅ཧ Firebaseͷಋೖ͸ΞϓϦ൛ͱಉ͡Α ͏ʹઃఆͰ͖Δ (ͨͩ͠, ΞϓϦ൛ͱಉ͡όʔδϣϯ ʹ͸Ͱ͖ͳ͍໛༷) 16
17. ϕʔλ൛ͳͷͰɺຊ൪ӡ༻ʹ͸஫ҙ͕ඞཁ https://flutter.dev/web
18. ײ૝ • ύοέʔδ͸Web൛ʹ͸ରԠ͍ͯ͠ͳ͍΋ͷ͕·ͩଟ͍ • Firebaseͷػೳ͸΄΅ϑϧͰ࢖͑ΔͷͰ, ΞϓϦͰݕূ͢Δલʹϓϩ τλΠϓΛಈ͔͢, ΞϓϦͷ؅ཧϖʔδͱ͍ͬͨ࢖͍ํ͕Մೳ • ίʔυͷڞ௨Խ͕೉ͯ͘͠΋, ΞϓϦͰ࡞ͬͨcomponentΛ submoduleԽ͓͚ͯ͠͹ϦϙδτϦΛ෼͚ͯ΋࢖͍ճͤΔ͸ͣ • ͋͘·Ͱβ൛ͳͷͰ, ຊ൪ӡ༻ʹ͸͘Ε͙Ε΋͝஫ҙΛʂ
19. ݁࿦ ݸਓͰεϚϗΞϓϦΛ࡞ΔͳΒɺ FlutterͰΞϓϦ΋Web(؅ཧϖʔδ)΋࡞Ζ͏
20. ΞϓϦ։ൃҊ݅ (εϚϗ, Web)ืूதͰ͢ʂ
21. Thank You!!