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

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

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

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

kazupon

March 25, 2018
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

  1. Vue.jsͷࠓޙ
    ͱ
    ࣍ੈ୅ͷWeb։ൃʹ͍ͭͯ
    MANABIYA
    2018.03.24
    @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. We are hiring!!
    ϑϩϯτΤϯδχΞ
    ࠾༻தʂ

    View Slide

  5. ͸͡Ίʹ

    View Slide

  6. 2017೥
    ͷ
    Vue.js

    View Slide

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

    View Slide

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

    View Slide

  9. Progressive ʹ
    ਐԽͨ͠Vue.js

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. ࢿۚࢧԉͷڧԽ

    View Slide

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

    View Slide

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

    View Slide

  17. ΤίγεςϜ

    View Slide

  18. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. ίΞνʔϜ
    ͷ
    ڧԽ

    View Slide


  23. View Slide

  24. ࠓ೔࿩͢͜ͱ

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  28. Style Guide

    View Slide

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

    View Slide

  30. • Ϧʔυ: @chrisvfritz

    View Slide

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

    View Slide

  32. Cookbook

    View Slide

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

    View Slide

  34. • Ϧʔυ: @sdras

    View Slide

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

    View Slide

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

    View Slide

  37. eslint-plugin-vue
    4.0

    View Slide

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

    View Slide

  39. • Ϧʔυ: @michalsnik

    @mysticatea

    View Slide

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

    View Slide

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

    View Slide

  42. Vue Test Utils

    View Slide

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

    View Slide

  44. • Ϧʔυ: @eddyerburgh

    View Slide

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

    View Slide

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

    View Slide

  47. vue-component-
    compiler

    View Slide

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

    View Slide

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

    View Slide

  50. • Ϧʔυ: @znck

    @eddyerburgh

    View Slide

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

    View Slide

  52. Vue CLI
    3.0

    View Slide

  53. • Ϧʔυ: @yy990803

    View Slide

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

    View Slide

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

    View Slide

  56. Core

    View Slide

  57. • Ϧʔυ: @yy990803

    View Slide

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

    View Slide

  59. • ϦϦʔεܭը: 2018೥3݄
    • ରԠ಺༰:
    • ඇಉظपΓͷΤϥʔॲཧվળ
    • SSRपΓͷվળ
    • ίϯύΠϧΤϥʔͷվળ
    • v-for ͷΠςϨʔλʔαϙʔτ
    2.6

    View Slide

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

    View Slide

  61. • ϦϦʔεܭը: 2018೥4݄ or 5݄
    • Vue 3.0 ީิ (֬ఆͰ͸ͳ͍Ͱ͢)
    • APIͷେ͖ͳഁյతมߋ͸͠ͳ͍ํ਑
    • 2.x ܥͱฒߦͯ͠όʔδϣϯ؅ཧ
    2.x-next

    View Slide

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

    View Slide

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

    View Slide

  64. Core
    ະ֬ఆ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  68. Vue CLI 

    3.0

    View Slide

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

    View Slide

  70. ਏ͍ɻɻɻ

    View Slide

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

    View Slide

  72. ͜Εʹର͢ΔιϦϡʔγϣϯ
    • Vue CLI
    • ެࣜςϯϓϨʔτͷఏڙ
    npm install -g vue-cli
    vue-cli init webpack my-app
    cd my-app
    npm install
    npm run dev

    View Slide

  73. Be a Happy!

    View Slide

  74. ͔͠͠

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    ੜ੒
    ߋ৽

    View Slide

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

    View Slide


  80. ΞʔΩςΫνϟ

    View Slide

  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"]
    }
    }
    }

    View Slide

  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"
    ]
    }

    View Slide

  83. ઃఆͷॊೈੑ
    • vue.config.jsʹΑ
    ΔઃఆͷΧελϚ
    ΠζΛఏڙ
    • APIϓϩΩγ
    • webpack
    • ͳͲ…
    module.exports = {
    // ...
    // webpackͷΧελϚΠζ
    chainWebpack: () => {},
    configureWebpack: () => {},
    // ։ൃαʔόͷΧελϚΠζ
    devServer: {
    proxy: null,
    before: app => {}
    },
    // Vue CLI ϓϥάΠϯͷΧελϚΠζ
    pluginOptions: {
    // ...
    }
    }

    View Slide

  84. ϓϥάΠϯʹΑΔ֦ுੑ
    • Service
    • Generator
    • Prompt
    .
    !"" README.md
    !"" generator.js # generator (optional)
    !"" prompts.js # prompts file (optional)
    !"" index.js # service plugin
    #"" package.json

    View Slide

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

    View Slide

  86. DEMO

    جຊతͳ࢖͍ํ

    View Slide

  87. DEMO

    WebComponents
    Ϗϧυ

    View Slide

  88. DEMO

    Vue CLI UI

    View Slide

  89. ͦͷଞ
    ͷ
    औΓ૊Έ

    View Slide

  90. Vue DevTools

    View Slide

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

    View Slide

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

    View Slide

  93. TypeScript
    ؔ࿈

    View Slide

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

    View Slide

  95. ·ͱΊ

    View Slide

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

    View Slide

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

    View Slide

  98. Vue
    ͷ
    ϛογϣϯ

    View Slide

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

    View Slide

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

    View Slide

  101. One more thing …

    View Slide

  102. • 2018೥11݄3೔(౔)։࠵ܾఆʂ

    https://vuefes.jp
    Vue Fes Japan 2018

    View Slide

  103. • 2018೥4݄20೔։࠵༧ఆ 

    (teratail͞Μαϙʔτ)
    Vue.jsॳ৺ऀ޲͚ϋϯζΦϯ

    View Slide

  104. • 2018೥5݄։࠵ܾఆʂ
    • 1 ηογϣϯ(Nuxt) + 8 LT Λ༧ఆ
    • ۙʑΞφ΢ϯε༧ఆʂ
    Vue.js Tokyo v-meetup #7

    View Slide

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

    View Slide