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

Transcript

1. 1.

   Vue.jsͷࠓޙ ͱ ࣍ੈ୅ͷWeb։ൃʹ͍ͭͯ MANABIYA 2018.03.24 @kazupon

2. 2.

   ࣗݾ঺հ

3. 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. 4.

   We are hiring!! ϑϩϯτΤϯδχΞ ࠾༻தʂ

5. 5.

   ͸͡Ίʹ

6. 6.

   2017೥ ͷ Vue.js

7. 7.

   GitHub Stars JavaScript ϕετɾΦϒɾβɾΠϠʔ 2017 https://risingstars.js.org/2017/ja#section-framework • ϑϩϯτΤϯυϑϨʔϜϫʔΫ: 1Ґ

8. 8.

   GitHub Stars JavaScript ϕετɾΦϒɾβɾΠϠʔ 2017 https://risingstars.js.org/2017/ja#section-all • ૯߹Ͱ΋2೥࿈ଓͰϕετϓϩδΣΫτ

9. 9.

   Progressive ʹ ਐԽͨ͠Vue.js

10. 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. 11.

    ॳͷެࣜ ΧϯϑΝϨϯε ։࠵

12. 12.

    VueConf 2017 https://conf.vuejs.org

13. 13.

    VueConf 2017 Photo Reference by Laravel-Vuejs https://www.laravel-vuejs.com/what-we-learned-at-vueconf/

14. 14.

    ࢿۚࢧԉͷڧԽ

15. 15.

    Patreon https://www.patreon.com/evanyou/overview ࢧԉʹΑΔOSS׬શϑϧλΠϜԽ

16. 16.

    OpenCollective https://opencollective.com/vuejs ίϛϡχςΟ׆ಈࢧԉ޲͚

17. 17.

    ΤίγεςϜ

18. 18.

    None
19. 19.

    Storybook https://medium.com/storybookjs/announcing-storybook-3-2-e00918a1764c

20. 20.

    Nuxt.js https://twitter.com/nuxt_js/status/950400427111206912 2018 Jan 9 ϦϦʔε

21. 21.

    NativeScript https://nativescript-vue.org 2018 Feb 13 ϦϦʔε

22. 22.

    ίΞνʔϜ ͷ ڧԽ

23. 23.

    …

24. 24.

    ࠓ೔࿩͢͜ͱ

25. 25.

    • ίΞνʔϜମ੍ʹΑΔ։ൃঢ়گ • ࣍ੈ୅ͷWeb։ൃʹ޲͚ͯ

26. 26.

    ίΞνʔϜମ੍ ʹΑΔ ։ൃঢ়گ

27. 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. 28.

    Style Guide

29. 29.

    ެࣜελΠϧΨΠυ • Vue.jsΛ࢖ͬͨ։ൃͷखॿ͚ͱͳΔ ελΠϧΨΠυΛఏڙ

30. 30.

    • Ϧʔυ: @chrisvfritz

31. 31.

    betaϦϦʔεࡁΈ ݱࡏ eslint-plugin-vue ͷରԠ଴ͪ

32. 32.

    Cookbook

33. 33.

    ެࣜΫοΫϒοΫ • Α͋͘Δམͱ݀͠ͳͲͷରॲ͕ॻ ͔ΕͨυΩϡϝϯτ

34. 34.

    • Ϧʔυ: @sdras

35. 35.

    ͍ͭ࠷ۙbetaϦϦʔε https://vuejs.org/v2/cookbook/

36. 36.

    ݱࡏ΋Ϩγϐ͕௥Ճ͞Ε͍ͯΔ https://github.com/vuejs/vuejs.org/pull/1464

37. 37.

    eslint-plugin-vue 4.0

38. 38.

    ެࣜESLintϓϥάΠϯ • Vue.js޲͚ͷίʔυΛϦϯτͯ͘͠ ΕΔϓϥάΠϯ

39. 39.

    • Ϧʔυ: @michalsnik
 @mysticatea

40. 40.

    v4.0 ϦϦʔεࡁΈ https://twitter.com/michalsnik/status/947502214591012864

41. 41.

    ݱࡏͷঢ়گ https://github.com/vuejs/eslint-plugin-vue/issues?q=is%3Aissue+is%3Aopen+label%3A%22Present+in+Style+Guide%22 • ελΠϧΨΠυͷ׬શରԠத

42. 42.

    Vue Test Utils

43. 43.

    ୯ମςετ޲͚ͷެࣜϥΠϒϥϦ

44. 44.

    • Ϧʔυ: @eddyerburgh

45. 45.

    • ίϛϡχςΟʹΑΔ຋༁Ͱ֤ݴޠ޲ ͚ʹυΩϡϝϯτ͕΄΅ἧ͍ͬͯΔ υΩϡϝϯτ https://vue-test-utils.vuejs.org/

46. 46.

    • ݱࡏ 1.0.0-beta.12 1.0 ʹ޲͚ͨ࠷ऴ࡞ۀத https://github.com/vuejs/vue-test-utils/issues/246

47. 47.

    vue-component- compiler

48. 48.

    SFCͷίϯύΠϥ • όϯυϥʹͱΒΘΕͳ͍APIΛϥΠ ϒϥϦͱͯ͠ఏڙ vue-component-compiler API

49. 49.

    ҎԼͷ՝୊ղܾΛ໨త • SFCίϯύΠϧϩδοΫͷॏෳͷআڈ • ϝϯςφϯεͷվળ vue-loader rollup-plugin-vue vueify parse /

    compile parse / compile parse / compile vue-template- compiler vue-template- compiler vue-template- compiler
50. 50.

    • Ϧʔυ: @znck
 @eddyerburgh

51. 51.

    • ·ͩ։ൃதɻϦϦʔεεέδϡʔϧ ͸ະఆɻ ݱࡏͷঢ়گ https://github.com/vuejs/vue-component-compiler/pull/29

52. 52.

    Vue CLI 3.0

53. 53.

    • Ϧʔυ: @yy990803

54. 54.

    3.0 beta ϦϦʔε • ݱࡏ: v3.0.0-beta.6

55. 55.

    ৄࡉ಺༰͸ ͜ͷޙͰʂ

56. 56.

    Core

57. 57.

    • Ϧʔυ: @yy990803

58. 58.

    ࠓޙͷόʔδϣϯ 2.x 2.x-next 2.5

59. 59.

    • ϦϦʔεܭը: 2018೥3݄ • ରԠ಺༰: • ඇಉظपΓͷΤϥʔॲཧվળ • SSRपΓͷվળ •

    ίϯύΠϧΤϥʔͷվળ • v-for ͷΠςϨʔλʔαϙʔτ 2.6
60. 60.

    • ϒϥ΢β޲͚ͷESMαϙʔτ 2.6 https://github.com/vuejs/vue/pull/7110

61. 61.

    • ϦϦʔεܭը: 2018೥4݄ or 5݄ • Vue 3.0 ީิ (֬ఆͰ͸ͳ͍Ͱ͢)

    • APIͷେ͖ͳഁյతมߋ͸͠ͳ͍ํ਑ • 2.x ܥͱฒߦͯ͠όʔδϣϯ؅ཧ 2.x-next
62. 62.

    • ωΠςΟϒʹES2015Λαϙʔτ͢Δϒ ϥ΢βͷΈʂ ର৅ϒϥ΢β

63. 63.

    • ES2015 Proxy Ͱॻ͖׵͑Δ༧ఆ ϦΞΫςΟϒγεςϜͷվળ 2.x 2.x-next Ҏ߱

64. 64.

    Core ະ֬ఆ

65. 65.

    • Class Fields ͱ Decorators ͕ stage-4ʹ ͳͬͨͱ͖ରԠ͢Δ͔΋͠Εͳ͍ ΫϥεϕʔεͷAPIఏڙ

66. 66.

    • WASMଆ͔ΒDOMΞΫηεͰ͖ΔΑ͏ ʹͳͬͨΒ࢖͏͔΋͠Εͳ͍ WebAssemblyରԠ https://github.com/WebAssembly/gc/blob/master/proposals/gc/Overview.md

67. 67.

    ࣍ੈ୅ͷ Web։ൃʹ ޲͚ͯ

68. 68.

    Vue CLI 
 3.0

69. 69.

    WebϑϩϯτΤϯυ։ൃ https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.v7jsb7mjj

70. 70.

    ਏ͍ɻɻɻ

71. 71.

    ͱ͍͏੠͸ ࠓͰ΋·ͩௌ͘

72. 72.

    ͜Εʹର͢ΔιϦϡʔγϣϯ • Vue CLI • ެࣜςϯϓϨʔτͷఏڙ npm install -g vue-cli

    vue-cli init webpack my-app cd my-app npm install npm run dev
73. 73.

    Be a Happy!

74. 74.

    ͔͠͠

75. 75.

    ͍Ζ͍Ζ໰୊͕ ग़͖ͯͨɻɻɻ

76. 76.

    ΧΦεԽͨ͠ςϯϓϨʔτϩδοΫ ೉ղͳϩδοΫͰϝϯς͕େม…

77. 77.

    CLI͔Β໰ΘΕΔ࣭໰߲໨ • ࣭໰߲໨͕ଟ͍ͱμϧ͍ • ຖճೖྗ͕ඞཁ ESLint Jest NightWatch … ޙͲΜ͚ͩ

    ͋Δͷʁ
78. 78.

    ϓϩδΣΫτΛੜ੒͢ΔͷΈ • ΞοϓάϨʔυ͢Δ࢓૊Έ͕ͳ͍ Ұ౓ϓϩδΣΫτΛੜ੒͢ΔͱςϯϓϨʔτͷߋ৽಺༰Λ ϓϩδΣΫτଆʹಉظ͢Δ͜ͱ͕Ͱ͖ͳ͍ vue init webpack my-app cd

    my-app npm install npm run dev ςϯϓϨʔτ ϓϩδΣΫτ ❌ ੜ੒ ߋ৽ ⚙
79. 79.

    3.0Ͱ࠶ઃܭ • ͜͏ͨ͠໰୊ʹରԠ͢ΔͨΊ࠶ઃܭ https://github.com/vuejs/vue-cli/issues/589

80. 80.

    ৽ ΞʔΩςΫνϟ

81. 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. 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. 83.

    ઃఆͷॊೈੑ • vue.config.jsʹΑ ΔઃఆͷΧελϚ ΠζΛఏڙ • APIϓϩΩγ • webpack •

    ͳͲ… module.exports = { // ... // webpackͷΧελϚΠζ chainWebpack: () => {}, configureWebpack: () => {}, // ։ൃαʔόͷΧελϚΠζ devServer: { proxy: null, before: app => {} }, // Vue CLI ϓϥάΠϯͷΧελϚΠζ pluginOptions: { // ... } }
84. 84.

    ϓϥάΠϯʹΑΔ֦ுੑ • Service • Generator • Prompt . !"" README.md

    !"" generator.js # generator (optional) !"" prompts.js # prompts file (optional) !"" index.js # service plugin #"" package.json
85. 85.

    • WebComponents Ϗϧυͷαϙʔτ • ϨΨγʔίϚϯυ vue init ΋ఏڙ ͦͷଞ

86. 86.

    DEMO جຊతͳ࢖͍ํ

87. 87.

    DEMO WebComponents Ϗϧυ

88. 88.

    DEMO Vue CLI UI

89. 89.

    ͦͷଞ ͷ औΓ૊Έ

90. 90.

    Vue DevTools ⚙

91. 91.

    ڧԽ͞ΕͨσόοΨ 4.0 Ͱ͸͍Ζ͍Ζͱศརػೳ͕௥Ճ

92. 92.

    ελϯυΞϩϯ൛ͷఏڙ༧ఆ https://github.com/vuejs/vue-devtools/issues/451

93. 93.

    TypeScript ؔ࿈

94. 94.

    ςϯϓϨʔτͷܕαϙʔτ͞ΕΔ͔΋ ίΞνʔϜktsn͞Μ͕ͨͪؤுͬͯΔʂ https://github.com/vuejs/vetur/pull/681

95. 95.

    ·ͱΊ

96. 96.

    • ݱࡏɺίΞνʔϜ&ϓϩδΣΫτମ੍ʹ Αͬͯ։ൃ͕ਐΊΒΕ͍ͯΔ • ͦͷऔΓ૊Έͷ͏ͪͷ࣍ੈ୅Web։ൃʹ޲ ͚ͯɺVue CLI 3.0 Ͱ͸ɺWebϑϩϯτΤ ϯυͷ։ൃʹઐ೦Ͱ͖ΔΑ͏ػೳڧԽ

    • Vue CLI 3.0 ͸ۙʑϦϦʔε͢Δ༧ఆ
97. 97.

    • ·ͨɺίΞνʔϜͷϝϯόɺͦͯ͠ίϯτ ϦϏϡʔλʹΑͬͯɺWebϑϩϯτΤϯυ ͷDXΛ޲্ͤ͞ΔͨΊʹɺ༷ʑͳ։ൃ͕ ͢͢ΊΒΕ͍ͯΔ

98. 98.

    Vue ͷ ϛογϣϯ

99. 99.

    ࡞ऀͷVueʹର͢Δࢥ૝ Simple Made Easy!! https://twitter.com/youyuxi/status/735109888930648064 https://www.vuejs.amsterdam

100. 100.

     ։ൃମݧΛΑ͘͢ΔͨΊʹ ࠓޙ΋औΓ૊ΜͰ͍͘

101. 101.

     One more thing …

102. 102.

     • 2018೥11݄3೔(౔)։࠵ܾఆʂ
 https://vuefes.jp Vue Fes Japan 2018

103. 103.

     • 2018೥4݄20೔։࠵༧ఆ 
 (teratail͞Μαϙʔτ) Vue.jsॳ৺ऀ޲͚ϋϯζΦϯ

104. 104.

     • 2018೥5݄։࠵ܾఆʂ • 1 ηογϣϯ(Nuxt) + 8 LT Λ༧ఆ •

     ۙʑΞφ΢ϯε༧ఆʂ Vue.js Tokyo v-meetup #7
105. 105.

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