Vue CLI v3

第69回 HTML5とか勉強会「UIフレームワーク最前線」の発表資料
https://html5j.connpass.com/event/89073/

Transcript

1. Vue CLI v3 HTML5J UIϑϨʔϜϫʔΫ࠷લઢ 2018.06.19 @kazupon
2. ࣗݾ঺հ
3. kazupon Vue.js Core Team Vue.js japan users group organizer vue-i18n, vuejs/jp.vuejs.org maintainer storybook vue support member CUUSOO SYSTEM CTO @kazu_pon kazupon
4. ͸͡Ίʹ
5. ࠓ೔࿩͢͜ͱ
6. Vue CLI v3
7. ࠓ೔ ࿩͞ͳ͍͜ͱ
8. ࠷৽ಈ޲ MANABIYA https://speakerdeck.com/kazupon/vue-dot-jsfalsejin-hou-toci-shi-dai-webkai-fa-nituite?slide=1
9. ͦΕͰ΋஌Γ͍ͨͳΒ… Vue Contributor Days https://www.youtube.com/watch?v=U38s3O1hh9k
10. ·ͨ͸
11. ϩʔυϚοϓ https://github.com/vuejs/roadmap
12. ࢀরͯ͠Լ͍͞
13. Vue CLI v3
14. ݱࡏ RC.3 ! ·΋ͳ͘ϦϦʔεʂ
15. Vue CLI ͱ͸ • Vue.js ΞϓϦ޲͚ͷ CLI ϕʔεͷ ։ൃπʔϧ
16. ओͳಛ௃
17. https://cli.vuejs.org/ Vue CLI ެࣜυΩϡϝϯτͷτοϓΑΓ
18. ͱɺ৭ʑͱ ͋Γ·͕͢
19. v3 ͷ໨ۄ
20. v3 ͷ໨ۄ • ϓϥάΠϯγεςϜ • Vue CLI Ϣʔβʔ΁ͷ֦ுੑͷఏڙ • Vue CLI UI • CLI ͕ۤखͳϢʔβʔʹର͢Δαϙʔτ • UI APIͱUI ϓϥάΠϯγεςϜͷఏڙʹ ΑΔɺ͞ΒͳΔVue CLIͷ֦ுੑΛఏڙ ͞ΒͳΔDXఏڙͷແݶͷՄೳੑ
21. ϓϥάΠϯ γεςϜ
22. CLIϓϥάΠϯͷ࡞੒ͱར༻ • جຊతʹҎԼͷAPIΛར༻࣮ͯ͠૷͢Δ • Service • Generator • Prompt • npmʹެ։͢Δ͜ͱͰɺϢʔβʔ͕ vue add ౳ͰΠϯετʔϧͯ͠ར༻͢Δ͜ͱ͕Ͱ͖Δ
23. CLIϓϥάΠϯͰग़དྷΔ͜ͱ • Service • webpackઃఆͷΧελϚΠζ • npm-scripts (via vue-cli-servie)ͷొ࿥ https://cli.vuejs.org/dev-guide/plugin-dev.html#service-plugin
24. CLIϓϥάΠϯͰग़དྷΔ͜ͱ • Generator • ςϯϓϨʔτͷੜ੒ • طଘςϯϓϨʔτͷΧελϚΠζ https://cli.vuejs.org/dev-guide/plugin-dev.html#generator
25. CLIϓϥάΠϯͰग़དྷΔ͜ͱ • Prompts • ର࿩಺༰ͷΧελϚΠζ https://cli.vuejs.org/dev-guide/plugin-dev.html#prompts
26. CLIϓϥάΠϯͷྫ • ࠃࡍԽ(i18n)ͷ࢓૊ΈΛಋೖ vue add i18n vue-cli-plugin-i18n my-app1 scafollding & Env settings
27. CLIϓϥάΠϯͷϢʔεέʔε • Vue ޲͚ͷϥΠϒϥϦɺϑϨʔϜϫʔΫͷ ࣗಈΠϯετʔϧscafollding • ϓϩδΣΫτݻ༗ͷίʔυੜ੒ • ϚΠάϨʔγϣϯπʔϧ • σϓϩΠπʔϧ • … ͳͲ
28. Vue CLI UI
29. Vue CLI UI ͱ͸ʁ
30. CLI : Command line interface UI : User interface
31. Vue Command line interface User interface Vue CLI UI
32. – Evan You “Vue CLI UI is the UI for the CLI.” “༁: Vue CLI͸CLI޲͚ͷUIͰ͢ɻ”
33. Vue CLI UI ͷ࡞ऀ • ίΞνʔϜGuillaume Chau ࢯ ͷౖᔶͷ։ ൃʹΑΓര஀ https://guillaume-chau.info/
34. Vue CLI UI ͷ UI vue ui ίϚϯυ࣮ߦ… Webϒϥ΢βʹGUIΞϓϦ͕ىಈ
35. Vue CLI UI Ͱग़དྷΔࣄ • Vue CLI ͷ CLI ϕʔεͰग़དྷΔࣄ͸ͻͱ௨ ΓͰ͖Δ • ϓϩδΣΫτ࡞੒ • CLIϓϥάΠϯ௥Ճ • ։ൃαʔόͷىಈ • ΞϓϦέʔγϣϯͷϏϧυ • webpackͷΠϯεϖΫγϣϯ …ͳͲ
36. ϓϩδΣΫτ࡞੒
37. ։ൃαʔόͷىಈ
38. webpackͷΠϯεϖΫγϣϯ
39. CLI ൛ʹ͸ͳ͍ػೳͷఏڙ • GUIϕʔεͷಛੑΛੜ͔ͯ͠ɺҎԼͷΑ͏ ͳ༷ʑͳػೳΛఏڙ͍ͯ͠Δ • ϓϩδΣΫτ؅ཧ • GUIϕʔεͷίϯϑΟάϨʔγϣϯ • CLIϓϥάΠϯͷݕࡧˍҰཡ • CLIϓϥάΠϯͷΞοϓσʔτ … ͳͲ
40. ϓϩδΣΫτ؅ཧ
41. GUIϕʔεͷίϯϑΟάϨʔγϣϯ
42. CLIϓϥάΠϯݕࡧˍҰཡ
43. Vue CLI UI ͷ֦ுੑ • Vue CLI UIͰ΋ϓ ϥάΠϯγεςϜ Λαϙʔτ
 (ui.js | vue-cli-ui.js) • UI API ʹΑΓ Vue CLI UIΛ֦ு͢Δ ͜ͱ͕ग़དྷΔ
44. UI API ʹΑΓग़དྷΔ͜ͱ • ίϯϑΟάϨʔγϣϯͷΧελϚΠζ • λεΫͷΧελϚΠζ • ϓϩϯϓτͷΧελϚΠζ • ΫϥΠΞϯτΞυΦϯʹΑΔ֦ு • ΧελϜϏϡʔʹΑΔ֦ு
45. UI API ͕ఏڙ͢Δ΋ͷ • ΫϥΠΞϯτ/αʔόؒͷσʔλڞ༗ • ϓϥάΠϯΞΫγϣϯ • IPC • ϩʔΧϧετϨʔδ • ϓϩάϨεදࣔ • ϑοΫɺαδΣενϣϯɺ௨஌ɺ… etc
46. ίϯϑΟάϨʔγϣϯͷΧελϚΠζ • UI API Ͱઃఆը໘ΧελϚΠζͰ͖Δ ্ه࿮Α͏ʹಠࣗʹίϯϑΟάϨʔγϣϯΛ௥Ճͯ͠ɺ ࡉ͔͘ΧελϚΠζͰ͖Δ
47. ίϯϑΟάϨʔγϣϯͷΧελϚΠζ • describeConfig Λར༻ͯ͠ίϯϑΟάϨʔ γϣϯΛఆٛ͢Δ
48. • λεΫ΋ಉ༷UI APIͰΧελϚΠζͰ͖Δ λεΫͷΧελϚΠζ ্ه࿮Α͏ʹɺطଘͷpackage.jsonͷscriptsͷλεΫʹ ରͯ͠ΧελϚΠζͨ͠Γɺ৽نʹλεΫΛ௥Ճ͢Δ͜ ͱ΋Ͱ͖Δ
49. λεΫͷΧελϚΠζ • describeTaskΛར༻ͯ͠طଘͷλεΫͷΧ ελϚΠζ
50. λεΫͷΧελϚΠζ • λεΫύϥϝʔλʔ ΋ఆٛ͢Δ͜ͱ͕ Ͱ͖Δ
51. λεΫͷΧελϚΠζ • ಠࣗλεΫͷఆٛ͸addTaskΛར༻͢Δ ޙड़͢ΔΫϥΠΞϯτΞυΦϯΛར༻͢Δͱ͞Βʹߴ౓ ͳΧελϚΠζՄೳ
52. λεΫͷΧελϚΠζͷྫ • Vue CLI UI ͷ build
53. ΫϥΠΞϯτΞυΦϯ • ಠࣗͷVue ίϯ ϙʔωϯτΛ Vue CLI UI ಺Ͱ ΞυΦϯͱͯ͠ ಈ࡞ͤ͞Δ͜ͱ Ͱ֦ுͰ͖Δ
54. ΫϥΠΞϯτΞυΦϯ • ΫϥΠΞϯτΞ υΦϯͰ࣮૷͠ ͯVueίϯϙʔω ϯτར༻Ͱ͖Δ ෦෼ • λεΫͷϏϡʔ • ΧελϜϏϡʔ serve | build λεΫͷϏϡʔ ϓϩδΣΫτφϏήʔγϣϯ ʹΧελϜϏϡʔΛ௥ՃՄೳ
55. ΫϥΠΞϯτΞυΦϯͷ࡞Γํ • vue create ͰϓϩδΣΫτΛ࡞੒͠ɺઃఆ Λ͢Δ vue create my-client-addon ࡞੒ͨ͠ϓϩδΣΫτʹ্هͷΑ ͏ͳvue.config.js Λ௥Ճ UI ϓϥάΠϯͱ͸ ผʹ࡞Δ
56. ΫϥΠΞϯτΞυΦϯͷ࡞Γํ • main.js ΛҎԼͷΑ͏ʹɺClientAddon API ͰίϯϙʔωϯτΛొ࿥ͨ͠Γɺϧʔτ Λఆٛ͢ΔΑ͏มߋ͢Δ
57. ΫϥΠΞϯτΞυΦϯͷ࡞Γํ • UIϓϥάΠϯͷ ui.js ͰҎԼͷΑ͏ʹΫϥ ΠΞϯτΞυΦϯΛొ࿥
58. ΫϥΠΞϯτΞυΦϯͷ࢖͍ํ • ޙ͸ίϯϙʔωϯτΛ࢖༻Մೳͳ෦෼Ͱ ઃఆ͢Δ͚ͩ (ҎԼ͸ λεΫϏϡʔͷྫ)
59. ΧελϜϏϡʔ • Vue CLI UI ͕ϢʔβʔʹΞϓϦͷΑ͏ͳ ੍ޚՄೳͳΤϦΞΛఏڙ
60. ΧελϜϏϡʔͷ௥Ճํ๏ • ΫϥΠΞϯτΞυΦϯͱ UI API ͷ addView Λར༻͢Δ ΫϥΠΞϯτ ΞυΦϯ UI ϓϥάΠϯ
61. Vue CLI UI ֦ுͷྫ • ࠃࡍԽ(i18n)؅ཧ
62. Vue CLI UI ֦ு DEMO
63. ΧελϜϏϡʔͷϢʔεέʔε • ࠃࡍԽରԠ • Storybook ϥΠΫͳσβΠφͱڠۀͰ͖Δ πʔϧ • Vue DevToolsϥΠΫͳσόοΪϯάπʔϧ • docz ϥΠΫͳυΩϡϝϯςʔγϣϯπʔ ϧ • … ͳͲ
64. ΧελϜϏϡʔ ͷՄೳੑ
65. ·ͱΊ
66. • Vue CLI v3Ͱ͸ɺ͜Ε·Ͱͷ v2 Ͱͷ໰୊఺ɺ ݱঢ়ͷϑϩϯτΤϯυ։ൃπʔϧ؀ڥपΓͷ ਏ͍໰୊Λվળ͢ΔͨΊʹఏڙ͞ΕΔ • Vue ΞϓϦ։ൃϢʔβʔ͸ɺૉ௚ʹ Vue ެࣜ ʹఏڙ͢Δ Vue CLI Λར༻͢Δ͜ͱͰɺ޾ͤ ʹͳΕΔʂ • ։ൃπʔϧपΓͷߏஙɺπʔϧͷΞοϓάϨʔ υ౳͸ɺVue CLI ɺͦͯ͠ϓϥάΠϯ͕ݟͯ͘ ΕΔΑ͏ʹͳΔ ·ͱΊ
67. • Vue CLI v3 ͷ໨ۄͱͯ͠ɺϓϥάΠϯγε ςϜ ͱ Vue CLI UI • ͜ΕΒʹΑΓɺVue CLI ެࣜͰ͸΋ͷ଍Γ ͳ͍ɺ։ൃ؀ڥΛڧԽ͢Δ͜ͱ͕Ͱ͖ΔΑ ͏ʹͳΔ • ͜ͷ݁Ռɺ͞Βʹੜ࢈ੑͷߴ͍։ൃ؀ڥΛ ߏங͢Δ͜ͱ͕ՄೳʹͳΔ ·ͱΊ
68. ͱ͍͏Θ͚Ͱ ඇৗʹ ExcitingͳͷͰ
69. https://twitter.com/kazu_pon/status/998630153843437568
70. ΍ͬͯ ͍͖·͠ΐ͏ʂ
71. One more thing …
72. Vue Fes Japan 2018 ۙʑɺCFPืू΍ւ֎speakers৘ใΛ Ξφ΢ϯε͢Δ༧ఆ
73. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ