Future of Vue.js

Vue.jsの今後

Transcript

1. Future of Vue.js
   Vue.js v-meetup #6
   2017.12.13
   @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. രൃͨ͠
   2017೥
   

   View Slide

6. Google Trend
   

   View Slide

7. • 2016೥
   GitHub Stars
   

   View Slide

8. • 2017೥
   GitHub Stars
   

   View Slide

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

   View Slide

10. VueConf 2017
    https://conf.vuejs.org
    

    View Slide

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

    View Slide

12. Progressive ʹ
    ਐԽ͢ΔVue.js
    

    View Slide

13. 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
    

    View Slide

14. 2017.02.26
    v2.2
    Initial D
    • SSRͷվળ
    • ΤϥʔϋϯυϦϯάͷվળ
    • ίϯϙʔωϯτ޲͚v-modelͷΧελϚΠζ
    • Provide / Inject
    

    View Slide

15. 2017.04.27
    v2.3
    JoJo’s Bizarre Adventure
    • SSRͷվળ
    • ඇಉظίϯϙʔωϯτͷվળ
    • ؔ਺ܕίϯϙʔωϯτͷվળ
    

    View Slide

16. 2017.07.13
    v2.4
    Kill la Kill
    • SSRͷϑϧରԠ
    • ༰қͳϥούίϯϙʔωϯτͷ࡞੒αϙʔτ

    (inheritAttrs, $attrs, $listeners)
    • ύϑΥʔϚϯεվળ
    

    View Slide

17. 2017.10.13
    v2.5
    Level E
    • TypeScript ܕఆٛͷվળ
    • ͞ΒͳΔΤϥʔϋϯυϦϯάͷվળ
    • SFCͷؔ਺ܕίϯϙʔωϯτͷαϙʔτ
    

    View Slide

18. ͞Βʹ
    ൟӫ͢Δ
    ΤίγεςϜ
    

    View Slide

19. View Slide

20. StorybookͰαϙʔτ
    

    View Slide

21. ͞ΒͳΔڧྗͳ
    ίΞνʔϜϝϯό
    ͷδϣΠϯ
    

    View Slide

22. …
    

    View Slide

23. ͦΜͳத
    

    View Slide

24. 2017.09.26
    

    View Slide

25. AMA with Vue.js Team
    https://hashnode.com/ama/with-vuejs-team-cj7itlrki03ae62wuv2r2005s
    

    View Slide

26. Vue.jsίΞνʔϜ͚ͩͲ
    ͳΜ͔ฉ͖͍ͨ͜ͱ͋
    Δʁ
    

    View Slide

27. কདྷʹΉ͚ͨϩʔυϚοϓΛެ։
    https://github.com/vuejs/roadmap
    

    View Slide

28. ࠓ೔࿩͢͜ͱ
    

    View Slide

29. Vue.jsͷࠓޙ
    

    View Slide

30. • Core
    • vue-test-utils
    • vue-cli
    • eslint-plugin-vue
    • vue-component-compiler
    • Style Guide
    • Cookbook
    Vue Project Roadmap
    

    View Slide

31. Style Guide
    

    View Slide

32. ެࣜελΠϧΨΠυ
    • Vue.jsϓϩδΣΫτͰͷ։ൃͷखॿ
    ͚ͱͳΔελΠϧΨΠυΛఏڙ
    

    View Slide

33. • Lead: @chrisvfritz
    • beta
    

    View Slide

34. ެࣜυΩϡϝϯτʹެ։ࡁΈ
    

    View Slide

35. ESLintͱͷΠϯςάϨʔγϣϯ
    • eslint-plugin-vueͰࣗಈνΣοΫͰ
    ͖ΔΑ͏ڞಉ࡞ۀத
    https://github.com/vuejs/eslint-plugin-vue/issues/77
    

    View Slide

36. Cookbook
    

    View Slide

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

    View Slide

38. • Lead: @chrisvfritz
    

    View Slide

39. ணख͸͜Ε͔Β
    • ελΠϧΨΠυͷରԠ͕͋ΔͨΊɺ
    ·ͩ࡞ۀʹணखͰ͖͍ͯͳ͍
    • ͜Ε͔Βணख͢Δͱ͍ͬͨঢ়گ
    

    View Slide

40. eslint-plugin-vue
    

    View Slide

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

    View Slide

42. • Lead: @michalsnik

    @mysticatea
    • v4.0.0-beta.2
    

    View Slide

43. ެࣜελΠϧΨΠυରԠத
    https://twitter.com/michalsnik/status/934340597720154113
    

    View Slide

44. 4.0
    Comming
    Soon…
    

    View Slide

45. ಺༰ʹ͍ͭͯ͸
    ͜ͷޙͷൃදͰʂ
    

    View Slide

46. vue-test-utils
    

    View Slide

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

    View Slide

48. എܠ
    https://github.com/vuejs/vue-test-utils/issues/1
    

    View Slide

49. • Lead: @eddyerburgh
    • v1.0.0-beta.7
    

    View Slide

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

    View Slide

51. 1.0 ʹ޲͚ͨ࠷ऴௐ੔
    https://github.com/vuejs/vue-test-utils/issues/246
    

    View Slide

52. 1.0
    Comming
    Soon…
    

    View Slide

53. ಺༰ʹ͍ͭͯ͸
    ͜ͷޙͷൃදͰʂ
    

    View Slide

54. vue-component-
    compiler
    

    View Slide

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

    View Slide

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

    View Slide

57. • Lead: @znck

    @eddyerburgh
    • WIP
    

    View Slide

58. • ࠷ॳͷ࣮૷͸େମऴΘ͍ͬͯΔঢ়گ
    ݱࡏϨϏϡʔ଴ͪ
    https://github.com/vuejs/vue-component-compiler/pull/29
    

    View Slide

59. Parcel΋ରԠ͢Δ͔΋
    https://github.com/parcel-bundler/parcel/issues/5
    

    View Slide

60. vue-cli
    

    View Slide

61. VueϓϩδΣΫτߏஙCLI
    • ݱࡏͷ࠷৽όʔδϣϯ: v2.9.2
    ָʹ։ൃ؀ڥ
    ΛߏஙͰ͖ͯ
    ͙͢ʹ։ൃͰ
    ͖Δʂ
    

    View Slide

62. ͔͠͠
    ͍Ζ͍Ζͱ
    ໰୊͕͋Δ
    

    View Slide

63. ςϯϓϨʔτͷϝϯς͕େม
    • ϓϩδΣΫτͷมߋͱςϯϓϨʔ
    τͷมߋͷಉظ
    • ςϯϓϨʔτͷόʔδϣϯ؅ཧ
    

    View Slide

64. CLI͔Β໰ΘΕΔ࣭໰߲໨
    • ஌ࣝΛཁ͢Δ΋ͷ͕͋ͬͯॳ৺ऀʹ༏͠
    ͘ͳ͍
    • ࣭໰߲໨͕ଟ͗͢Δ
    ESLintʁ
    Jestʁ
    NightWatchʁ
    … ޙͲΜ͚ͩ
    ͋Δͷʁ
    

    View Slide

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

    View Slide

66. • Lead: @yy990803

    @egoist
    • WIP
    

    View Slide

67. 3.0
    ΞʔΩςΫνϟ
    ⚠ݱࡏ·ͩઃܭதͷஈ֊ͷ΋ͷͰ͢ʂ
    

    View Slide

68. ৽͍͠ΞʔΩςΫνϟ
    • ϓϦηοτϞσϧͷ࠾༻
    • ίϚϯυͰΦϯσϚϯυͰϓϦηο
    τͷ௥ՃՄೳ
    • ϓϦηοτຖʹnpmͰ؅ཧՄೳ
    • ϓϦηοτଆͰscaffoldingΛఆٛ
    Մೳ
    

    View Slide

69. ৽͍͠ΞʔΩςΫνϟ
    • ϕʔε͸webpackςϯϓϨʔτ
    • browserify͸ഇࢭ͍ͯ͘͠༧ఆ
    

    View Slide

70. ৽͍͠ΞʔΩςΫνϟ
    • configϑΝΠϧʹΑΔूத؅ཧ
    • ؀ڥม਺
    • APIϓϩΩγ
    • webpack-chainʹΑΔ௿Ϩϕϧઃ
    ఆ
    • …ͳͲ
    

    View Slide

71. ৽͍͠ΞʔΩςΫνϟ
    • vue-cliͷ෼཭
    • ैདྷͷ vue build ͸ΞυΦϯ͢Δܗ
    Ͱར༻Ͱ͖ΔΑ͏ʹ͢Δ
    

    View Slide

72. Core
    

    View Slide

73. • Lead: @yy990803
    • called `2.x-next`
    • 2018 early
    Vue 3.0 ?
    

    View Slide

74. • େ͖ͳഁյతมߋ͸͠ͳ͍༧ఆ
    • 2.xܥͱฏߦͯ͠ϝϯς͞ΕΔ
    APIͷޓ׵ੑͱ2.x
    2.x
    2.x-next
    2.5
    

    View Slide

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

    View Slide

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

    View Slide

77. όοΫϩά
    (ະఆ)
    

    View Slide

78. • SFC͔Βม׵͢ΔCLIΛαϙʔτ͢Δ͔΋͠Εͳ͍
    WebComponentsରԠ
    https://www.youtube.com/watch?v=wZN_FtZRYC8&t=2397s
    

    View Slide

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

    View Slide

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

    View Slide

81. 2018
    ΧϯϑΝϨϯε
    

    View Slide

82. • Vue.js Conference Amsterdm
    • VueConf US 2018
    • Vue.js London 2018
    • VueConf EU 2018
    ͦͯ͠೔ຊ΋
    ։࠵ʹ޲͚ͯ४උதʂʂ
    

    View Slide

83. ·ͱΊ
    

    View Slide

84. • ݱࡏɺίΞνʔϜ&ϓϩδΣΫτମ੍ʹ
    Αͬͯ։ൃ͕ਐΊΒΕ͍ͯΔ
    • ελΠϧΨΠυɺࠓޙΫοΫϒοΫʹΑΓ
    ͞ΒʹυΩϡϝϯτ͕ॆ࣮͍ͯ͘͠
    • vue-test-utilsɺeslint-plugin-vue͸ɺͦΖͦ
    Ζਖ਼ࣜϦϦʔε͞ΕΔ
    ·ͱΊ
    

    View Slide

85. • vue-component-compilerʹΑΓɺSFCͷί
    ϯύΠϧΛ͢ΔͨΊʹɺόϯυϥʹͱΒΘ
    Εͳ͍APIͱͯ͠ఏڙ͞ΕΔΑ͏ʹͳΔ༧
    ఆ
    • vue-cli 3.0 Ͱ͸ɺ࠶ઃܭ͞ΕΔ͜ͱʹΑ
    ΓɺϓϦηοτͱconfigϑΝΠϧʹΑΔɺ
    ϝϯςφϯε͠қ͘ɺ֦ுੑ͕ߴ͍ɺϓϩ
    δΣΫτ։ൃ؀ڥͷߏங͕ՄೳʹͳΔ༧ఆ
    ·ͱΊ
    

    View Slide

86. • Vue ίΞͷ2.x-nextͰ͸ɺAPIͷޓ׵ੑ͕อ
    ͨΕͭͭɺվળ͞ΕͨϦΞΫςΟϒγες
    Ϝ͕ఏڙ͞ΕΔ༧ఆ
    • ͨͩ͠ɺݱ࣌఺Ͱ͸αϙʔτର৅ͱͳΔϒ
    ϥ΢β͸ωΠςΟϒʹES2015Λαϙʔτ
    ͍ͯ͠Δ΋ͷͷΈ͕ର৅༧ఆ
    ·ͱΊ
    

    View Slide

87. Vue.jsͷϛογϣϯ
    ։ൃମݧΛΑ͘͢ΔͨΊʹ
    ࠓޙ΋औΓ૊ΜͰ͍͘
    

    View Slide

88. One more thing …
    
    

    View Slide

89. • 2018೥3݄·ͨ͸4݄։࠵༧ఆ
    • teratail͞Μαϙʔτ
    Vue.jsॳ৺ऀ޲͚ϋϯζΦϯ
    ͜Μͳײ͡Ͱू·ͬͯ΍Γ·͢ʂ
    (React.jsͷ࣌ͷ༷ࢠ)
    

    View Slide

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

    View Slide