Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

38bee248082f6071230de65e9d74a944?s=47 kazupon
March 25, 2018

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

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

38bee248082f6071230de65e9d74a944?s=128

kazupon

March 25, 2018
Tweet

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. • ίΞνʔϜମ੍ʹΑΔ։ൃঢ়گ • ࣍ੈ୅ͷWeb։ൃʹ޲͚ͯ

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

  26. • 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
  27. Style Guide

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

  29. • Ϧʔυ: @chrisvfritz

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

  31. Cookbook

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

  33. • Ϧʔυ: @sdras

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

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

  36. eslint-plugin-vue 4.0

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

  38. • Ϧʔυ: @michalsnik
 @mysticatea

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

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

  41. Vue Test Utils

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

  43. • Ϧʔυ: @eddyerburgh

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

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

  46. vue-component- compiler

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

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

    compile parse / compile parse / compile vue-template- compiler vue-template- compiler vue-template- compiler
  49. • Ϧʔυ: @znck
 @eddyerburgh

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

  51. Vue CLI 3.0

  52. • Ϧʔυ: @yy990803

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

  54. ৄࡉ಺༰͸ ͜ͷޙͰʂ

  55. Core

  56. • Ϧʔυ: @yy990803

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

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

    ίϯύΠϧΤϥʔͷվળ • v-for ͷΠςϨʔλʔαϙʔτ 2.6
  59. • ϒϥ΢β޲͚ͷESMαϙʔτ 2.6 https://github.com/vuejs/vue/pull/7110

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

    • APIͷେ͖ͳഁյతมߋ͸͠ͳ͍ํ਑ • 2.x ܥͱฒߦͯ͠όʔδϣϯ؅ཧ 2.x-next
  61. • ωΠςΟϒʹES2015Λαϙʔτ͢Δϒ ϥ΢βͷΈʂ ର৅ϒϥ΢β

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

  63. Core ະ֬ఆ

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

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

  66. ࣍ੈ୅ͷ Web։ൃʹ ޲͚ͯ

  67. Vue CLI 
 3.0

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

  69. ਏ͍ɻɻɻ

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

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

    vue-cli init webpack my-app cd my-app npm install npm run dev
  72. Be a Happy!

  73. ͔͠͠

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

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

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

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

    my-app npm install npm run dev ςϯϓϨʔτ ϓϩδΣΫτ ❌ ੜ੒ ߋ৽ ⚙
  78. 3.0Ͱ࠶ઃܭ • ͜͏ͨ͠໰୊ʹରԠ͢ΔͨΊ࠶ઃܭ https://github.com/vuejs/vue-cli/issues/589

  79. ৽ ΞʔΩςΫνϟ

  80. ϓϦηοτϞσϧ • ~/.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"] } } }
  81. σϑΥϧτθϩίϯϑΟά • 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" ] }
  82. ઃఆͷॊೈੑ • vue.config.jsʹΑ ΔઃఆͷΧελϚ ΠζΛఏڙ • APIϓϩΩγ • webpack •

    ͳͲ… module.exports = { // ... // webpackͷΧελϚΠζ chainWebpack: () => {}, configureWebpack: () => {}, // ։ൃαʔόͷΧελϚΠζ devServer: { proxy: null, before: app => {} }, // Vue CLI ϓϥάΠϯͷΧελϚΠζ pluginOptions: { // ... } }
  83. ϓϥάΠϯʹΑΔ֦ுੑ • Service • Generator • Prompt . !"" README.md

    !"" generator.js # generator (optional) !"" prompts.js # prompts file (optional) !"" index.js # service plugin #"" package.json
  84. • WebComponents Ϗϧυͷαϙʔτ • ϨΨγʔίϚϯυ vue init ΋ఏڙ ͦͷଞ

  85. DEMO جຊతͳ࢖͍ํ

  86. DEMO WebComponents Ϗϧυ

  87. DEMO Vue CLI UI

  88. ͦͷଞ ͷ औΓ૊Έ

  89. Vue DevTools ⚙

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

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

  92. TypeScript ؔ࿈

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

  94. ·ͱΊ

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

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

  97. Vue ͷ ϛογϣϯ

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

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

  100. One more thing …

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

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

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

    ۙʑΞφ΢ϯε༧ఆʂ Vue.js Tokyo v-meetup #7
  104. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ