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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

͸͡Ίʹ

Slide 6

Slide 6 text

2017೥ ͷ Vue.js

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Progressive ʹ ਐԽͨ͠Vue.js

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

VueConf 2017 https://conf.vuejs.org

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ࢿۚࢧԉͷڧԽ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ΤίγεςϜ

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ίΞνʔϜ ͷ ڧԽ

Slide 23

Slide 23 text

…

Slide 24

Slide 24 text

ࠓ೔࿩͢͜ͱ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ίΞνʔϜମ੍ ʹΑΔ ։ൃঢ়گ

Slide 27

Slide 27 text

• 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

Slide 28

Slide 28 text

Style Guide

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

• Ϧʔυ: @chrisvfritz

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Cookbook

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

• Ϧʔυ: @sdras

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

eslint-plugin-vue 4.0

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

• Ϧʔυ: @michalsnik  @mysticatea

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Vue Test Utils

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

• Ϧʔυ: @eddyerburgh

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

vue-component- compiler

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

• Ϧʔυ: @znck  @eddyerburgh

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Vue CLI 3.0

Slide 53

Slide 53 text

• Ϧʔυ: @yy990803

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

ৄࡉ಺༰͸ ͜ͷޙͰʂ

Slide 56

Slide 56 text

Core

Slide 57

Slide 57 text

• Ϧʔυ: @yy990803

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Core ະ֬ఆ

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

࣍ੈ୅ͷ Web։ൃʹ ޲͚ͯ

Slide 68

Slide 68 text

Vue CLI   3.0

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

ਏ͍ɻɻɻ

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Be a Happy!

Slide 74

Slide 74 text

͔͠͠

Slide 75

Slide 75 text

͍Ζ͍Ζ໰୊͕ ग़͖ͯͨɻɻɻ

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

৽ ΞʔΩςΫνϟ

Slide 81

Slide 81 text

ϓϦηοτϞσϧ • ~/.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"] } } }

Slide 82

Slide 82 text

σϑΥϧτθϩίϯϑΟά • 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" ] }

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

DEMO جຊతͳ࢖͍ํ

Slide 87

Slide 87 text

DEMO WebComponents Ϗϧυ

Slide 88

Slide 88 text

DEMO Vue CLI UI

Slide 89

Slide 89 text

ͦͷଞ ͷ औΓ૊Έ

Slide 90

Slide 90 text

Vue DevTools ⚙

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

TypeScript ؔ࿈

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

·ͱΊ

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

Vue ͷ ϛογϣϯ

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

One more thing …

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ