Vue CLI v3

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

Transcript

1. Vue CLI v3
   HTML5J UIϑϨʔϜϫʔΫ࠷લઢ
   2018.06.19
   @kazupon
   

   View Slide

2. ࣗݾ঺հ
   
   

   View Slide

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
   

   View Slide

4. ͸͡Ίʹ
   

   View Slide

5. ࠓ೔࿩͢͜ͱ
   

   View Slide

6. Vue CLI v3
   

   View Slide

7. ࠓ೔
   ࿩͞ͳ͍͜ͱ
   

   View Slide

8. ࠷৽ಈ޲
   MANABIYA
   https://speakerdeck.com/kazupon/vue-dot-jsfalsejin-hou-toci-shi-dai-webkai-fa-nituite?slide=1
   

   View Slide

9. ͦΕͰ΋஌Γ͍ͨͳΒ…
   Vue Contributor Days
   https://www.youtube.com/watch?v=U38s3O1hh9k
   

   View Slide

10. ·ͨ͸
    

    View Slide

11. ϩʔυϚοϓ
    https://github.com/vuejs/roadmap
    

    View Slide

12. ࢀরͯ͠Լ͍͞
    
    

    View Slide

13. Vue CLI v3
    

    View Slide

14. ݱࡏ RC.3 !
    ·΋ͳ͘ϦϦʔεʂ
    

    View Slide

15. Vue CLI ͱ͸
    • Vue.js ΞϓϦ޲͚ͷ CLI ϕʔεͷ
    ։ൃπʔϧ
    

    View Slide

16. ओͳಛ௃
    

    View Slide

17. https://cli.vuejs.org/
    Vue CLI ެࣜυΩϡϝϯτͷτοϓΑΓ
    

    View Slide

18. ͱɺ৭ʑͱ
    ͋Γ·͕͢
    

    View Slide

19. v3 ͷ໨ۄ
    

    View Slide

20. v3 ͷ໨ۄ
    • ϓϥάΠϯγεςϜ
    • Vue CLI Ϣʔβʔ΁ͷ֦ுੑͷఏڙ
    • Vue CLI UI
    • CLI ͕ۤखͳϢʔβʔʹର͢Δαϙʔτ
    • UI APIͱUI ϓϥάΠϯγεςϜͷఏڙʹ
    ΑΔɺ͞ΒͳΔVue CLIͷ֦ுੑΛఏڙ
    ͞ΒͳΔDXఏڙͷແݶͷՄೳੑ
    

    View Slide

21. ϓϥάΠϯ
    γεςϜ
    

    View Slide

22. CLIϓϥάΠϯͷ࡞੒ͱར༻
    • جຊతʹҎԼͷAPIΛར༻࣮ͯ͠૷͢Δ
    • Service
    • Generator
    • Prompt
    • npmʹެ։͢Δ͜ͱͰɺϢʔβʔ͕ vue add
    ౳ͰΠϯετʔϧͯ͠ར༻͢Δ͜ͱ͕Ͱ͖Δ
    

    View Slide

23. CLIϓϥάΠϯͰग़དྷΔ͜ͱ
    • Service
    • webpackઃఆͷΧελϚΠζ
    • npm-scripts (via vue-cli-servie)ͷొ࿥
    https://cli.vuejs.org/dev-guide/plugin-dev.html#service-plugin
    

    View Slide

24. CLIϓϥάΠϯͰग़དྷΔ͜ͱ
    • Generator
    • ςϯϓϨʔτͷੜ੒
    • طଘςϯϓϨʔτͷΧελϚΠζ
    https://cli.vuejs.org/dev-guide/plugin-dev.html#generator
    

    View Slide

25. CLIϓϥάΠϯͰग़དྷΔ͜ͱ
    • Prompts
    • ର࿩಺༰ͷΧελϚΠζ
    https://cli.vuejs.org/dev-guide/plugin-dev.html#prompts
    

    View Slide

26. CLIϓϥάΠϯͷྫ
    • ࠃࡍԽ(i18n)ͷ࢓૊ΈΛಋೖ
    vue add i18n
    vue-cli-plugin-i18n my-app1
    scafollding
    &
    Env settings
    

    View Slide

27. CLIϓϥάΠϯͷϢʔεέʔε
    • Vue ޲͚ͷϥΠϒϥϦɺϑϨʔϜϫʔΫͷ
    ࣗಈΠϯετʔϧscafollding
    • ϓϩδΣΫτݻ༗ͷίʔυੜ੒
    • ϚΠάϨʔγϣϯπʔϧ
    • σϓϩΠπʔϧ
    • … ͳͲ
    

    View Slide

28. Vue CLI UI
    

    View Slide

29. Vue CLI UI
    ͱ͸ʁ
    

    View Slide

30. CLI : Command line interface
    UI : User interface
    

    View Slide

31. Vue Command line interface
    User interface
    
    Vue CLI UI
    

    View Slide

32. – Evan You
    “Vue CLI UI is the UI for the CLI.”
    “༁: Vue CLI͸CLI޲͚ͷUIͰ͢ɻ”
    

    View Slide

33. Vue CLI UI ͷ࡞ऀ
    • ίΞνʔϜGuillaume Chau ࢯ ͷౖᔶͷ։
    ൃʹΑΓര஀
    https://guillaume-chau.info/
    

    View Slide

34. Vue CLI UI ͷ UI
    vue ui
    ίϚϯυ࣮ߦ…
    Webϒϥ΢βʹGUIΞϓϦ͕ىಈ
    

    View Slide

35. Vue CLI UI Ͱग़དྷΔࣄ
    • Vue CLI ͷ CLI ϕʔεͰग़དྷΔࣄ͸ͻͱ௨
    ΓͰ͖Δ
    • ϓϩδΣΫτ࡞੒
    • CLIϓϥάΠϯ௥Ճ
    • ։ൃαʔόͷىಈ
    • ΞϓϦέʔγϣϯͷϏϧυ
    • webpackͷΠϯεϖΫγϣϯ …ͳͲ
    

    View Slide

36. ϓϩδΣΫτ࡞੒
    

    View Slide

37. ։ൃαʔόͷىಈ
    

    View Slide

38. webpackͷΠϯεϖΫγϣϯ
    

    View Slide

39. CLI ൛ʹ͸ͳ͍ػೳͷఏڙ
    • GUIϕʔεͷಛੑΛੜ͔ͯ͠ɺҎԼͷΑ͏
    ͳ༷ʑͳػೳΛఏڙ͍ͯ͠Δ
    • ϓϩδΣΫτ؅ཧ
    • GUIϕʔεͷίϯϑΟάϨʔγϣϯ
    • CLIϓϥάΠϯͷݕࡧˍҰཡ
    • CLIϓϥάΠϯͷΞοϓσʔτ … ͳͲ
    

    View Slide

40. ϓϩδΣΫτ؅ཧ
    

    View Slide

41. GUIϕʔεͷίϯϑΟάϨʔγϣϯ
    

    View Slide

42. CLIϓϥάΠϯݕࡧˍҰཡ
    

    View Slide

43. Vue CLI UI ͷ֦ுੑ
    • Vue CLI UIͰ΋ϓ
    ϥάΠϯγεςϜ
    Λαϙʔτ

    (ui.js | vue-cli-ui.js)
    • UI API ʹΑΓ Vue
    CLI UIΛ֦ு͢Δ
    ͜ͱ͕ग़དྷΔ
    

    View Slide

44. UI API ʹΑΓग़དྷΔ͜ͱ
    • ίϯϑΟάϨʔγϣϯͷΧελϚΠζ
    • λεΫͷΧελϚΠζ
    • ϓϩϯϓτͷΧελϚΠζ
    • ΫϥΠΞϯτΞυΦϯʹΑΔ֦ு
    • ΧελϜϏϡʔʹΑΔ֦ு
    

    View Slide

45. UI API ͕ఏڙ͢Δ΋ͷ
    • ΫϥΠΞϯτ/αʔόؒͷσʔλڞ༗
    • ϓϥάΠϯΞΫγϣϯ
    • IPC
    • ϩʔΧϧετϨʔδ
    • ϓϩάϨεදࣔ
    • ϑοΫɺαδΣενϣϯɺ௨஌ɺ… etc
    

    View Slide

46. ίϯϑΟάϨʔγϣϯͷΧελϚΠζ
    • UI API Ͱઃఆը໘ΧελϚΠζͰ͖Δ
    ্ه࿮Α͏ʹಠࣗʹίϯϑΟάϨʔγϣϯΛ௥Ճͯ͠ɺ
    ࡉ͔͘ΧελϚΠζͰ͖Δ
    

    View Slide

47. ίϯϑΟάϨʔγϣϯͷΧελϚΠζ
    • describeConfig Λར༻ͯ͠ίϯϑΟάϨʔ
    γϣϯΛఆٛ͢Δ
    

    View Slide

48. • λεΫ΋ಉ༷UI APIͰΧελϚΠζͰ͖Δ
    λεΫͷΧελϚΠζ
    ্ه࿮Α͏ʹɺطଘͷpackage.jsonͷscriptsͷλεΫʹ
    ରͯ͠ΧελϚΠζͨ͠Γɺ৽نʹλεΫΛ௥Ճ͢Δ͜
    ͱ΋Ͱ͖Δ
    

    View Slide

49. λεΫͷΧελϚΠζ
    • describeTaskΛར༻ͯ͠طଘͷλεΫͷΧ
    ελϚΠζ
    

    View Slide

50. λεΫͷΧελϚΠζ
    • λεΫύϥϝʔλʔ
    ΋ఆٛ͢Δ͜ͱ͕
    Ͱ͖Δ
    

    View Slide

51. λεΫͷΧελϚΠζ
    • ಠࣗλεΫͷఆٛ͸addTaskΛར༻͢Δ
    ޙड़͢ΔΫϥΠΞϯτΞυΦϯΛར༻͢Δͱ͞Βʹߴ౓
    ͳΧελϚΠζՄೳ
    

    View Slide

52. λεΫͷΧελϚΠζͷྫ
    • Vue CLI UI ͷ build
    

    View Slide

53. ΫϥΠΞϯτΞυΦϯ
    • ಠࣗͷVue ίϯ
    ϙʔωϯτΛ
    Vue CLI UI ಺Ͱ
    ΞυΦϯͱͯ͠
    ಈ࡞ͤ͞Δ͜ͱ
    Ͱ֦ுͰ͖Δ
    

    View Slide

54. ΫϥΠΞϯτΞυΦϯ
    • ΫϥΠΞϯτΞ
    υΦϯͰ࣮૷͠
    ͯVueίϯϙʔω
    ϯτར༻Ͱ͖Δ
    ෦෼
    • λεΫͷϏϡʔ
    • ΧελϜϏϡʔ
    serve | build λεΫͷϏϡʔ
    ϓϩδΣΫτφϏήʔγϣϯ
    ʹΧελϜϏϡʔΛ௥ՃՄೳ
    

    View Slide

55. ΫϥΠΞϯτΞυΦϯͷ࡞Γํ
    • vue create ͰϓϩδΣΫτΛ࡞੒͠ɺઃఆ
    Λ͢Δ
    vue create my-client-addon
    ࡞੒ͨ͠ϓϩδΣΫτʹ্هͷΑ
    ͏ͳvue.config.js Λ௥Ճ
    UI ϓϥάΠϯͱ͸
    ผʹ࡞Δ
    

    View Slide

56. ΫϥΠΞϯτΞυΦϯͷ࡞Γํ
    • main.js ΛҎԼͷΑ͏ʹɺClientAddon API
    ͰίϯϙʔωϯτΛొ࿥ͨ͠Γɺϧʔτ
    Λఆٛ͢ΔΑ͏มߋ͢Δ
    

    View Slide

57. ΫϥΠΞϯτΞυΦϯͷ࡞Γํ
    • UIϓϥάΠϯͷ ui.js ͰҎԼͷΑ͏ʹΫϥ
    ΠΞϯτΞυΦϯΛొ࿥
    

    View Slide

58. ΫϥΠΞϯτΞυΦϯͷ࢖͍ํ
    • ޙ͸ίϯϙʔωϯτΛ࢖༻Մೳͳ෦෼Ͱ
    ઃఆ͢Δ͚ͩ (ҎԼ͸ λεΫϏϡʔͷྫ)
    

    View Slide

59. ΧελϜϏϡʔ
    • Vue CLI UI ͕ϢʔβʔʹΞϓϦͷΑ͏ͳ
    ੍ޚՄೳͳΤϦΞΛఏڙ
    

    View Slide

60. ΧελϜϏϡʔͷ௥Ճํ๏
    • ΫϥΠΞϯτΞυΦϯͱ UI API ͷ
    addView Λར༻͢Δ
    ΫϥΠΞϯτ
    ΞυΦϯ
    UI ϓϥάΠϯ
    

    View Slide

61. Vue CLI UI ֦ுͷྫ
    • ࠃࡍԽ(i18n)؅ཧ
    

    View Slide

62. Vue CLI UI
    ֦ு
    DEMO
    
    

    View Slide

63. ΧελϜϏϡʔͷϢʔεέʔε
    • ࠃࡍԽରԠ
    • Storybook ϥΠΫͳσβΠφͱڠۀͰ͖Δ
    πʔϧ
    • Vue DevToolsϥΠΫͳσόοΪϯάπʔϧ
    • docz ϥΠΫͳυΩϡϝϯςʔγϣϯπʔ
    ϧ
    • … ͳͲ
    

    View Slide

64. ΧελϜϏϡʔ
    ͷՄೳੑ
    
    

    View Slide

65. ·ͱΊ
    

    View Slide

66. • Vue CLI v3Ͱ͸ɺ͜Ε·Ͱͷ v2 Ͱͷ໰୊఺ɺ
    ݱঢ়ͷϑϩϯτΤϯυ։ൃπʔϧ؀ڥपΓͷ
    ਏ͍໰୊Λվળ͢ΔͨΊʹఏڙ͞ΕΔ
    • Vue ΞϓϦ։ൃϢʔβʔ͸ɺૉ௚ʹ Vue ެࣜ
    ʹఏڙ͢Δ Vue CLI Λར༻͢Δ͜ͱͰɺ޾ͤ
    ʹͳΕΔʂ
    • ։ൃπʔϧपΓͷߏஙɺπʔϧͷΞοϓάϨʔ
    υ౳͸ɺVue CLI ɺͦͯ͠ϓϥάΠϯ͕ݟͯ͘
    ΕΔΑ͏ʹͳΔ
    ·ͱΊ
    

    View Slide

67. • Vue CLI v3 ͷ໨ۄͱͯ͠ɺϓϥάΠϯγε
    ςϜ ͱ Vue CLI UI
    • ͜ΕΒʹΑΓɺVue CLI ެࣜͰ͸΋ͷ଍Γ
    ͳ͍ɺ։ൃ؀ڥΛڧԽ͢Δ͜ͱ͕Ͱ͖ΔΑ
    ͏ʹͳΔ
    • ͜ͷ݁Ռɺ͞Βʹੜ࢈ੑͷߴ͍։ൃ؀ڥΛ
    ߏங͢Δ͜ͱ͕ՄೳʹͳΔ
    ·ͱΊ
    

    View Slide

68. ͱ͍͏Θ͚Ͱ
    ඇৗʹ
    ExcitingͳͷͰ
    

    View Slide

69. https://twitter.com/kazu_pon/status/998630153843437568
    

    View Slide

70. ΍ͬͯ
    ͍͖·͠ΐ͏ʂ
    

    View Slide

71. One more thing …
    
    

    View Slide

72. Vue Fes Japan 2018
    ۙʑɺCFPืू΍ւ֎speakers৘ใΛ
    Ξφ΢ϯε͢Δ༧ఆ
    

    View Slide

73. ͝ਗ਼ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide