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

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. ΤίγεςϜ

18. None

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. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ