Vue.jsの今後と次世代Web開発について

MANABIYA
2018-03-24 (sat) Webセッション ３時限目の発表内容
https://manabiya.tech

Transcript

1. Vue.jsͷࠓޙ ͱ ࣍ੈ୅ͷWeb։ൃʹ͍ͭͯ MANABIYA 2018.03.24 @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. We are hiring!! ϑϩϯτΤϯδχΞ ࠾༻தʂ
5. ͸͡Ίʹ
6. 2017೥ ͷ Vue.js
7. GitHub Stars JavaScript ϕετɾΦϒɾβɾΠϠʔ 2017 https://risingstars.js.org/2017/ja#section-framework • ϑϩϯτΤϯυϑϨʔϜϫʔΫ: 1Ґ
8. GitHub Stars JavaScript ϕετɾΦϒɾβɾΠϠʔ 2017 https://risingstars.js.org/2017/ja#section-all • ૯߹Ͱ΋2೥࿈ଓͰϕετϓϩδΣΫτ
9. Progressive ʹ ਐԽͨ͠Vue.js
10. 2017.02.26 v2.2 Initial D 2017.04.27 v2.3 JoJo’s Bizarre Adventure 2017.07.13 v2.4 Kill la Kill 2017.10.13 v2.5 Level E
11. ॳͷެࣜ ΧϯϑΝϨϯε ։࠵
12. VueConf 2017 https://conf.vuejs.org
13. VueConf 2017 Photo Reference by Laravel-Vuejs https://www.laravel-vuejs.com/what-we-learned-at-vueconf/
14. ࢿۚࢧԉͷڧԽ
15. Patreon https://www.patreon.com/evanyou/overview ࢧԉʹΑΔOSS׬શϑϧλΠϜԽ
16. OpenCollective https://opencollective.com/vuejs ίϛϡχςΟ׆ಈࢧԉ޲͚
17. ΤίγεςϜ
19. Storybook https://medium.com/storybookjs/announcing-storybook-3-2-e00918a1764c
20. Nuxt.js https://twitter.com/nuxt_js/status/950400427111206912 2018 Jan 9 ϦϦʔε
21. NativeScript https://nativescript-vue.org 2018 Feb 13 ϦϦʔε
22. ίΞνʔϜ ͷ ڧԽ
23. …
24. ࠓ೔࿩͢͜ͱ
25. • ίΞνʔϜମ੍ʹΑΔ։ൃঢ়گ • ࣍ੈ୅ͷWeb։ൃʹ޲͚ͯ
26. ίΞνʔϜମ੍ ʹΑΔ ։ൃঢ়گ
27. • Core • Vue Test Utils • Vue CLI 3.0 • eslint-plugin-vue 4.0 • vue-component-compiler • Style Guide • Cookbook Vue Project Roadmap https://github.com/vuejs/roadmap
28. Style Guide
29. ެࣜελΠϧΨΠυ • Vue.jsΛ࢖ͬͨ։ൃͷखॿ͚ͱͳΔ ελΠϧΨΠυΛఏڙ
30. • Ϧʔυ: @chrisvfritz
31. betaϦϦʔεࡁΈ ݱࡏ eslint-plugin-vue ͷରԠ଴ͪ
32. Cookbook
33. ެࣜΫοΫϒοΫ • Α͋͘Δམͱ݀͠ͳͲͷରॲ͕ॻ ͔ΕͨυΩϡϝϯτ
34. • Ϧʔυ: @sdras
35. ͍ͭ࠷ۙbetaϦϦʔε https://vuejs.org/v2/cookbook/
36. ݱࡏ΋Ϩγϐ͕௥Ճ͞Ε͍ͯΔ https://github.com/vuejs/vuejs.org/pull/1464
37. eslint-plugin-vue 4.0
38. ެࣜESLintϓϥάΠϯ • Vue.js޲͚ͷίʔυΛϦϯτͯ͘͠ ΕΔϓϥάΠϯ
39. • Ϧʔυ: @michalsnik
 @mysticatea
40. v4.0 ϦϦʔεࡁΈ https://twitter.com/michalsnik/status/947502214591012864
41. ݱࡏͷঢ়گ https://github.com/vuejs/eslint-plugin-vue/issues?q=is%3Aissue+is%3Aopen+label%3A%22Present+in+Style+Guide%22 • ελΠϧΨΠυͷ׬શରԠத
42. Vue Test Utils
43. ୯ମςετ޲͚ͷެࣜϥΠϒϥϦ
44. • Ϧʔυ: @eddyerburgh
45. • ίϛϡχςΟʹΑΔ຋༁Ͱ֤ݴޠ޲ ͚ʹυΩϡϝϯτ͕΄΅ἧ͍ͬͯΔ υΩϡϝϯτ https://vue-test-utils.vuejs.org/
46. • ݱࡏ 1.0.0-beta.12 1.0 ʹ޲͚ͨ࠷ऴ࡞ۀத https://github.com/vuejs/vue-test-utils/issues/246
47. vue-component- compiler
48. SFCͷίϯύΠϥ • όϯυϥʹͱΒΘΕͳ͍APIΛϥΠ ϒϥϦͱͯ͠ఏڙ vue-component-compiler API
49. ҎԼͷ՝୊ղܾΛ໨త • SFCίϯύΠϧϩδοΫͷॏෳͷআڈ • ϝϯςφϯεͷվળ vue-loader rollup-plugin-vue vueify parse / compile parse / compile parse / compile vue-template- compiler vue-template- compiler vue-template- compiler
50. • Ϧʔυ: @znck
 @eddyerburgh
51. • ·ͩ։ൃதɻϦϦʔεεέδϡʔϧ ͸ະఆɻ ݱࡏͷঢ়گ https://github.com/vuejs/vue-component-compiler/pull/29
52. Vue CLI 3.0
53. • Ϧʔυ: @yy990803
54. 3.0 beta ϦϦʔε • ݱࡏ: v3.0.0-beta.6
55. ৄࡉ಺༰͸ ͜ͷޙͰʂ
56. Core
57. • Ϧʔυ: @yy990803
58. ࠓޙͷόʔδϣϯ 2.x 2.x-next 2.5
59. • ϦϦʔεܭը: 2018೥3݄ • ରԠ಺༰: • ඇಉظपΓͷΤϥʔॲཧվળ • SSRपΓͷվળ • ίϯύΠϧΤϥʔͷվળ • v-for ͷΠςϨʔλʔαϙʔτ 2.6
60. • ϒϥ΢β޲͚ͷESMαϙʔτ 2.6 https://github.com/vuejs/vue/pull/7110
61. • ϦϦʔεܭը: 2018೥4݄ or 5݄ • Vue 3.0 ީิ (֬ఆͰ͸ͳ͍Ͱ͢) • APIͷେ͖ͳഁյతมߋ͸͠ͳ͍ํ਑ • 2.x ܥͱฒߦͯ͠όʔδϣϯ؅ཧ 2.x-next
62. • ωΠςΟϒʹES2015Λαϙʔτ͢Δϒ ϥ΢βͷΈʂ ର৅ϒϥ΢β
63. • ES2015 Proxy Ͱॻ͖׵͑Δ༧ఆ ϦΞΫςΟϒγεςϜͷվળ 2.x 2.x-next Ҏ߱
64. Core ະ֬ఆ
65. • Class Fields ͱ Decorators ͕ stage-4ʹ ͳͬͨͱ͖ରԠ͢Δ͔΋͠Εͳ͍ ΫϥεϕʔεͷAPIఏڙ
66. • WASMଆ͔ΒDOMΞΫηεͰ͖ΔΑ͏ ʹͳͬͨΒ࢖͏͔΋͠Εͳ͍ WebAssemblyରԠ https://github.com/WebAssembly/gc/blob/master/proposals/gc/Overview.md
67. ࣍ੈ୅ͷ Web։ൃʹ ޲͚ͯ
68. Vue CLI 
 3.0
69. WebϑϩϯτΤϯυ։ൃ https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.v7jsb7mjj
70. ਏ͍ɻɻɻ
71. ͱ͍͏੠͸ ࠓͰ΋·ͩௌ͘
72. ͜Εʹର͢ΔιϦϡʔγϣϯ • Vue CLI • ެࣜςϯϓϨʔτͷఏڙ npm install -g vue-cli vue-cli init webpack my-app cd my-app npm install npm run dev
73. Be a Happy!
74. ͔͠͠
75. ͍Ζ͍Ζ໰୊͕ ग़͖ͯͨɻɻɻ
76. ΧΦεԽͨ͠ςϯϓϨʔτϩδοΫ ೉ղͳϩδοΫͰϝϯς͕େม…
77. CLI͔Β໰ΘΕΔ࣭໰߲໨ • ࣭໰߲໨͕ଟ͍ͱμϧ͍ • ຖճೖྗ͕ඞཁ ESLint Jest NightWatch … ޙͲΜ͚ͩ ͋Δͷʁ
78. ϓϩδΣΫτΛੜ੒͢ΔͷΈ • ΞοϓάϨʔυ͢Δ࢓૊Έ͕ͳ͍ Ұ౓ϓϩδΣΫτΛੜ੒͢ΔͱςϯϓϨʔτͷߋ৽಺༰Λ ϓϩδΣΫτଆʹಉظ͢Δ͜ͱ͕Ͱ͖ͳ͍ vue init webpack my-app cd my-app npm install npm run dev ςϯϓϨʔτ ϓϩδΣΫτ ❌ ੜ੒ ߋ৽ ⚙
79. 3.0Ͱ࠶ઃܭ • ͜͏ͨ͠໰୊ʹରԠ͢ΔͨΊ࠶ઃܭ https://github.com/vuejs/vue-cli/issues/589
80. ৽ ΞʔΩςΫνϟ
81. ϓϦηοτϞσϧ • ~/.vuerc ʹ࣭໰߲ ໨ɺπʔϧͷઃఆɺ ϓϥάΠϯͳͲͷ ৘ใ͕อଘ͞ΕΔ • ϦϞʔτͷϓϦηο τ΋ࢀরՄೳ { "useConfigFiles": true, "router": true, "vuex": true, "cssPreprocessor": "sass", "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-eslint": { "version": "^3.0.0", "config": "airbnb", "lintOn": ["save", "commit"] } } }
82. σϑΥϧτθϩίϯϑΟά • webpackɺbabelɺ eslintͳͲͷઃఆ͸ ͳΔ΂͘Ӆṭ͞Ε ΔΑ͏ʹͳ͍ͬͯΔ • .vue ϑΝΠϧʹΑ ΔϓϩτλΠϐϯ ά΋ैདྷͲ͓Γఏ ڙ { // package.json "eslintConfig": { "root": true, "extends": [ "plugin:vue/essential", "eslint:recommended" ] }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }
83. ઃఆͷॊೈੑ • vue.config.jsʹΑ ΔઃఆͷΧελϚ ΠζΛఏڙ • APIϓϩΩγ • webpack • ͳͲ… module.exports = { // ... // webpackͷΧελϚΠζ chainWebpack: () => {}, configureWebpack: () => {}, // ։ൃαʔόͷΧελϚΠζ devServer: { proxy: null, before: app => {} }, // Vue CLI ϓϥάΠϯͷΧελϚΠζ pluginOptions: { // ... } }
84. ϓϥάΠϯʹΑΔ֦ுੑ • Service • Generator • Prompt . !"" README.md !"" generator.js # generator (optional) !"" prompts.js # prompts file (optional) !"" index.js # service plugin #"" package.json
85. • WebComponents Ϗϧυͷαϙʔτ • ϨΨγʔίϚϯυ vue init ΋ఏڙ ͦͷଞ
86. DEMO جຊతͳ࢖͍ํ
87. DEMO WebComponents Ϗϧυ
88. DEMO Vue CLI UI
89. ͦͷଞ ͷ औΓ૊Έ
90. Vue DevTools ⚙
91. ڧԽ͞ΕͨσόοΨ 4.0 Ͱ͸͍Ζ͍Ζͱศརػೳ͕௥Ճ
92. ελϯυΞϩϯ൛ͷఏڙ༧ఆ https://github.com/vuejs/vue-devtools/issues/451
93. TypeScript ؔ࿈
94. ςϯϓϨʔτͷܕαϙʔτ͞ΕΔ͔΋ ίΞνʔϜktsn͞Μ͕ͨͪؤுͬͯΔʂ https://github.com/vuejs/vetur/pull/681
95. ·ͱΊ
96. • ݱࡏɺίΞνʔϜ&ϓϩδΣΫτମ੍ʹ Αͬͯ։ൃ͕ਐΊΒΕ͍ͯΔ • ͦͷऔΓ૊Έͷ͏ͪͷ࣍ੈ୅Web։ൃʹ޲ ͚ͯɺVue CLI 3.0 Ͱ͸ɺWebϑϩϯτΤ ϯυͷ։ൃʹઐ೦Ͱ͖ΔΑ͏ػೳڧԽ • Vue CLI 3.0 ͸ۙʑϦϦʔε͢Δ༧ఆ
97. • ·ͨɺίΞνʔϜͷϝϯόɺͦͯ͠ίϯτ ϦϏϡʔλʹΑͬͯɺWebϑϩϯτΤϯυ ͷDXΛ޲্ͤ͞ΔͨΊʹɺ༷ʑͳ։ൃ͕ ͢͢ΊΒΕ͍ͯΔ
98. Vue ͷ ϛογϣϯ
99. ࡞ऀͷVueʹର͢Δࢥ૝ Simple Made Easy!! https://twitter.com/youyuxi/status/735109888930648064 https://www.vuejs.amsterdam
100. ։ൃମݧΛΑ͘͢ΔͨΊʹ ࠓޙ΋औΓ૊ΜͰ͍͘
101. One more thing …
102. • 2018೥11݄3೔(౔)։࠵ܾఆʂ
 https://vuefes.jp Vue Fes Japan 2018
103. • 2018೥4݄20೔։࠵༧ఆ 
 (teratail͞Μαϙʔτ) Vue.jsॳ৺ऀ޲͚ϋϯζΦϯ
104. • 2018೥5݄։࠵ܾఆʂ • 1 ηογϣϯ(Nuxt) + 8 LT Λ༧ఆ • ۙʑΞφ΢ϯε༧ఆʂ Vue.js Tokyo v-meetup #7
105. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ