MANABIYA 2018-03-24 (sat) Webセッション ３時限目の発表内容 https://manabiya.tech
Vue.jsͷࠓޙͱ࣍ੈͷWeb։ൃʹ͍ͭͯMANABIYA2018.03.24@kazupon
View Slide
ࣗݾհ
kazuponVue.js Core TeamVue.js japan users group organizervue-i18n, vuejs/jp.vuejs.org maintainerstorybook vue support memberCUUSOO SYSTEM CTO@kazu_pon kazupon
We are hiring!!ϑϩϯτΤϯδχΞ࠾༻தʂ
͡Ίʹ
2017ͷVue.js
GitHub StarsJavaScript ϕετɾΦϒɾβɾΠϠʔ 2017https://risingstars.js.org/2017/ja#section-framework• ϑϩϯτΤϯυϑϨʔϜϫʔΫ: 1Ґ
GitHub StarsJavaScript ϕετɾΦϒɾβɾΠϠʔ 2017https://risingstars.js.org/2017/ja#section-all• ૯߹Ͱ2࿈ଓͰϕετϓϩδΣΫτ
Progressive ʹਐԽͨ͠Vue.js
2017.02.26v2.2Initial D2017.04.27v2.3JoJo’s Bizarre Adventure2017.07.13v2.4Kill la Kill2017.10.13v2.5Level E
ॳͷެࣜΧϯϑΝϨϯε։࠵
VueConf 2017https://conf.vuejs.org
VueConf 2017Photo Reference by Laravel-Vuejshttps://www.laravel-vuejs.com/what-we-learned-at-vueconf/
ࢿۚࢧԉͷڧԽ
Patreonhttps://www.patreon.com/evanyou/overviewࢧԉʹΑΔOSSશϑϧλΠϜԽ
OpenCollectivehttps://opencollective.com/vuejsίϛϡχςΟ׆ಈࢧԉ͚
ΤίγεςϜ
Storybookhttps://medium.com/storybookjs/announcing-storybook-3-2-e00918a1764c
Nuxt.jshttps://twitter.com/nuxt_js/status/9504004271112069122018 Jan 9 ϦϦʔε
NativeScripthttps://nativescript-vue.org2018 Feb 13 ϦϦʔε
ίΞνʔϜͷڧԽ
…
ࠓ͢͜ͱ
• ίΞνʔϜମ੍ʹΑΔ։ൃঢ়گ• ࣍ੈͷWeb։ൃʹ͚ͯ
ίΞνʔϜମ੍ʹΑΔ։ൃঢ়گ
• Core• Vue Test Utils• Vue CLI 3.0• eslint-plugin-vue 4.0• vue-component-compiler• Style Guide• CookbookVue Project Roadmaphttps://github.com/vuejs/roadmap
Style Guide
ެࣜελΠϧΨΠυ• Vue.jsΛͬͨ։ൃͷखॿ͚ͱͳΔελΠϧΨΠυΛఏڙ
• Ϧʔυ: @chrisvfritz
betaϦϦʔεࡁΈݱࡏeslint-plugin-vueͷରԠͪ
Cookbook
ެࣜΫοΫϒοΫ• Α͋͘Δམͱ݀͠ͳͲͷରॲ͕ॻ͔ΕͨυΩϡϝϯτ
• Ϧʔυ: @sdras
͍ͭ࠷ۙbetaϦϦʔεhttps://vuejs.org/v2/cookbook/
ݱࡏϨγϐ͕Ճ͞Ε͍ͯΔhttps://github.com/vuejs/vuejs.org/pull/1464
eslint-plugin-vue4.0
ެࣜESLintϓϥάΠϯ• Vue.js͚ͷίʔυΛϦϯτͯ͘͠ΕΔϓϥάΠϯ
• Ϧʔυ: @michalsnik @mysticatea
v4.0 ϦϦʔεࡁΈhttps://twitter.com/michalsnik/status/947502214591012864
ݱࡏͷঢ়گhttps://github.com/vuejs/eslint-plugin-vue/issues?q=is%3Aissue+is%3Aopen+label%3A%22Present+in+Style+Guide%22• ελΠϧΨΠυͷશରԠத
Vue Test Utils
୯ମςετ͚ͷެࣜϥΠϒϥϦ
• Ϧʔυ: @eddyerburgh
• ίϛϡχςΟʹΑΔ༁Ͱ֤ݴޠ͚ʹυΩϡϝϯτ͕΄΅ἧ͍ͬͯΔυΩϡϝϯτhttps://vue-test-utils.vuejs.org/
• ݱࡏ 1.0.0-beta.121.0 ʹ͚ͨ࠷ऴ࡞ۀதhttps://github.com/vuejs/vue-test-utils/issues/246
vue-component-compiler
SFCͷίϯύΠϥ• όϯυϥʹͱΒΘΕͳ͍APIΛϥΠϒϥϦͱͯ͠ఏڙvue-component-compilerAPI
ҎԼͷ՝ղܾΛత• SFCίϯύΠϧϩδοΫͷॏෳͷআڈ• ϝϯςφϯεͷվળvue-loader rollup-plugin-vuevueifyparse / compile parse / compile parse / compilevue-template-compilervue-template-compilervue-template-compiler
• Ϧʔυ: @znck @eddyerburgh
• ·ͩ։ൃதɻϦϦʔεεέδϡʔϧະఆɻݱࡏͷঢ়گhttps://github.com/vuejs/vue-component-compiler/pull/29
Vue CLI3.0
• Ϧʔυ: @yy990803
3.0 beta ϦϦʔε • ݱࡏ: v3.0.0-beta.6
ৄࡉ༰͜ͷޙͰʂ
Core
ࠓޙͷόʔδϣϯ2.x2.x-next2.5
• ϦϦʔεܭը: 20183݄• ରԠ༰:• ඇಉظपΓͷΤϥʔॲཧվળ• SSRपΓͷվળ• ίϯύΠϧΤϥʔͷվળ• v-for ͷΠςϨʔλʔαϙʔτ2.6
• ϒϥβ͚ͷESMαϙʔτ2.6https://github.com/vuejs/vue/pull/7110
• ϦϦʔεܭը: 20184݄ or 5݄• Vue 3.0 ީิ (֬ఆͰͳ͍Ͱ͢)• APIͷେ͖ͳഁյతมߋ͠ͳ͍ํ• 2.x ܥͱฒߦͯ͠όʔδϣϯཧ2.x-next
• ωΠςΟϒʹES2015Λαϙʔτ͢ΔϒϥβͷΈʂରϒϥβ
• ES2015 Proxy Ͱॻ͖͑Δ༧ఆϦΞΫςΟϒγεςϜͷվળ2.x2.x-next Ҏ߱
Coreະ֬ఆ
• Class Fields ͱ Decorators ͕ stage-4ʹͳͬͨͱ͖ରԠ͢Δ͔͠Εͳ͍ΫϥεϕʔεͷAPIఏڙ
• WASMଆ͔ΒDOMΞΫηεͰ͖ΔΑ͏ʹͳͬͨΒ͏͔͠Εͳ͍WebAssemblyରԠhttps://github.com/WebAssembly/gc/blob/master/proposals/gc/Overview.md
࣍ੈͷWeb։ൃʹ͚ͯ
Vue CLI 3.0
WebϑϩϯτΤϯυ։ൃhttps://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.v7jsb7mjj
ਏ͍ɻɻɻ
ͱ͍͏ࠓͰ·ͩௌ͘
͜Εʹର͢ΔιϦϡʔγϣϯ• Vue CLI• ެࣜςϯϓϨʔτͷఏڙ npm install -g vue-cli vue-cli init webpack my-app cd my-app npm install npm run dev
Be a Happy!
͔͠͠
͍Ζ͍Ζ͕ग़͖ͯͨɻɻɻ
ΧΦεԽͨ͠ςϯϓϨʔτϩδοΫղͳϩδοΫͰϝϯς͕େม…
CLI͔ΒΘΕΔ࣭߲• ࣭߲͕ଟ͍ͱμϧ͍• ຖճೖྗ͕ඞཁESLintJestNightWatch… ޙͲΜ͚ͩ͋Δͷʁ
ϓϩδΣΫτΛੜ͢ΔͷΈ• ΞοϓάϨʔυ͢ΔΈ͕ͳ͍ҰϓϩδΣΫτΛੜ͢ΔͱςϯϓϨʔτͷߋ৽༰ΛϓϩδΣΫτଆʹಉظ͢Δ͜ͱ͕Ͱ͖ͳ͍ vue init webpack my-app cd my-app npm install npm run devςϯϓϨʔτϓϩδΣΫτ❌ੜߋ৽⚙
3.0Ͱ࠶ઃܭ• ͜͏ͨ͠ʹରԠ͢ΔͨΊ࠶ઃܭhttps://github.com/vuejs/vue-cli/issues/589
৽ΞʔΩςΫνϟ
ϓϦηοτϞσϧ• ~/.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"]}}}
σϑΥϧτθϩίϯϑΟά• 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"]}
ઃఆͷॊೈੑ• vue.config.jsʹΑΔઃఆͷΧελϚΠζΛఏڙ• APIϓϩΩγ• webpack• ͳͲ…module.exports = {// ...// webpackͷΧελϚΠζchainWebpack: () => {},configureWebpack: () => {},// ։ൃαʔόͷΧελϚΠζdevServer: {proxy: null,before: app => {}},// Vue CLI ϓϥάΠϯͷΧελϚΠζpluginOptions: {// ...}}
ϓϥάΠϯʹΑΔ֦ுੑ• Service• Generator• Prompt.!"" README.md!"" generator.js # generator (optional)!"" prompts.js # prompts file (optional)!"" index.js # service plugin#"" package.json
• WebComponents Ϗϧυͷαϙʔτ• ϨΨγʔίϚϯυ vue init ఏڙͦͷଞ
DEMOجຊతͳ͍ํ
DEMOWebComponentsϏϧυ
DEMOVue CLI UI
ͦͷଞͷऔΓΈ
Vue DevTools⚙
ڧԽ͞ΕͨσόοΨ4.0 Ͱ͍Ζ͍Ζͱศརػೳ͕Ճ
ελϯυΞϩϯ൛ͷఏڙ༧ఆhttps://github.com/vuejs/vue-devtools/issues/451
TypeScriptؔ࿈
ςϯϓϨʔτͷܕαϙʔτ͞ΕΔ͔ίΞνʔϜktsn͞Μ͕ͨͪؤுͬͯΔʂhttps://github.com/vuejs/vetur/pull/681
·ͱΊ
• ݱࡏɺίΞνʔϜ&ϓϩδΣΫτମ੍ʹΑͬͯ։ൃ͕ਐΊΒΕ͍ͯΔ• ͦͷऔΓΈͷ͏ͪͷ࣍ੈWeb։ൃʹ͚ͯɺVue CLI 3.0 ͰɺWebϑϩϯτΤϯυͷ։ൃʹઐ೦Ͱ͖ΔΑ͏ػೳڧԽ• Vue CLI 3.0 ۙʑϦϦʔε͢Δ༧ఆ
• ·ͨɺίΞνʔϜͷϝϯόɺͦͯ͠ίϯτϦϏϡʔλʹΑͬͯɺWebϑϩϯτΤϯυͷDXΛ্ͤ͞ΔͨΊʹɺ༷ʑͳ։ൃ͕͢͢ΊΒΕ͍ͯΔ
Vueͷϛογϣϯ
࡞ऀͷVueʹର͢ΔࢥSimple Made Easy!!https://twitter.com/youyuxi/status/735109888930648064https://www.vuejs.amsterdam
։ൃମݧΛΑ͘͢ΔͨΊʹࠓޙऔΓΜͰ͍͘
One more thing …
• 201811݄3()։࠵ܾఆʂ https://vuefes.jpVue Fes Japan 2018
• 20184݄20։࠵༧ఆ (teratail͞Μαϙʔτ)Vue.jsॳ৺ऀ͚ϋϯζΦϯ
• 20185݄։࠵ܾఆʂ• 1 ηογϣϯ(Nuxt) + 8 LT Λ༧ఆ• ۙʑΞφϯε༧ఆʂVue.js Tokyo v-meetup #7
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
kazupon
kazutan
zoetrope
iwaken71
ivargrimstad
usualoma
gennei
yuya4
kin29
meihei3
leichteckig
chatii
dicoding
swwweet
productmarketing
danielanewman
jnunemaker
dougneiner
akmur
carmenintech
garrettdimon
destraynor
brianwarren
caitiem20
mraible