Vue.jsͰ੩తαΠτΛͭ͘Δ @mottox2 / 2018.11.19 Roppongi.js #7

Work: React, Gatsby.js, Next.js, RoR… OSS: Gatsby.js, Nuxt.js, ReactNative, netlify-lambda… Comunity: #engineers_lt mottox2 @ 8FCϑϩϯτΤϯυͱ6*ܥͷϑϦʔϥϯε Who am I?

ࠓ೔͸੩తαΠτͷ͓࿩

Real WorldͰٻΊΒΕΔ੩తαΠτ • MarkdownΛݩʹϖʔδΛੜ੒͚ͩͩͱɺػೳෆ଍ɻ • ϦϙδτϦ֎ͷσʔλιʔε΋ར༻͢Δɻ • ຊ൪؀ڥͰ͸ɺ֎෦APIʹ͸ΞΫηε͠ͳ͍ɻ • APIͷϨεϙϯεΛ੩తԽ͓ͯ͘͠ඞཁ͕͋Δɻ • ʢಡΈࠐΜͩޙ͸SPAͱͯ͠ಈ͘ͱخ͍͠ɻʣ

GatsbyͳΒ࣮ݱͰ͖Δ ॏཁ React੡ͷ੩తαΠτδΣωϨʔλʔɻ ֎෦ͷιʔεΛ؆୯ʹѻ͑ɺϏϧυޙ͸֎෦APIʹΞΫηε͕૸Βͳ͍ɻ

ͨͩ͠ReactΛॻ͘ඞཁ͕͋ͬͨ mottox2 @ 8FCϑϩϯτΤϯυͱ6*ܥͷϑϦʔϥϯε Who am I? Ͱ΋ReactͰ͠ΐʁ mottox2 @ 8FCϑϩϯτΤϯυͱ6*ܥͷϑϦʔϥϯε Who am I? ͦ͏͚ͩͲɺศརͩΑ Vue͕޷͖ͳਓ Θͨ͠

Vuejsެࣜͷ੩తαΠτδΣωϨʔλʔɻ ϦϙδτϦ಺ͷmdϑΝΠϧΛݩʹαΠτΛߏஙɻ ੩తϑΝΠϧΛग़ྗ͢Δgenerateػೳ͕͋Δɻ SPAͷ2ϖʔδ໨Ҏ߱͸asyncData͕࣮ߦ͞ΕɺAPIʹϦΫΤετ͕૸Δɻ ɹɹଞͷબ୒ࢶ͸ͳ͔ͬͨͷ͔ʁ ิ଍ VuePress Nuxt.js

Gridsomeͷొ৔ Gatsby.jsʹӨڹΛड͚ͯ࡞ΒΕͨ੩తαΠτδΣωϨʔλʔ A new sta)c site generator baby is born. It's highly inspired by Gatsby.js (React based) but built on top of Vue.js. https://gridsome.org/blog/2018/10/10/say-hello-to-gridsome

Gridsomeͷొ৔ Gatsby.jsʹӨڹΛड͚ͯ࡞ΒΕͨ੩తαΠτδΣωϨʔλʔ

࢖͍ํ WordPressΛιʔεʹͨ͠Ϗϧυྫ

σʔλͷऔಘ ֤CMSͷσʔλΛऔಘ͢ΔͨΊͷϓϥάΠϯ͕ଘࡏ͢ΔͷͰಋೖɻ configͷϑΝΠϧʹPluginΛొ࿥͢Δ͚ͩͰσʔλΛ༻ҙͯ͘͠ΕΔɻ gridsome.config.js

σʔλͷར༻ औಘͨ͠σʔλ͸SFCͷpage-queryλά಺ʹؚ·ΕΔGraphQLʹΑͬͯ औಘ͠ɺ$page͔Βར༻Ͱ͖Δɻ src/pages/index.js

ৄࡉϖʔδ΋࡞ΕΔ src/templatesҎԼʹsourceͷnodeͷTypeʹରԠ໊ͨ͠લͷVueϑΝΠϧ Λஔ͘ͱϏϧυͯ͘͠ΕΔɻ src/templates/WordPressPost.vue

JSONͱͯ͠ॻ͖ग़͞ΕΔ ϏϧυͰύεຖͷσʔλ΋ॻ͖ग़͢ɻ͜Ε͸Ұཡϖʔδͷσʔλ

·ͩ·ͩൃల్্ Gridsome͸·ͩv0.3ܥɻൃల్্ͷϑϨʔϜϫʔΫɻ ͨͩɺίʔυ͕ബ͍ͷͰඇৗʹಡΈ΍͘͢ษڧʹͳΔɻ

VueͰ΋Real WorldͰ࢖͑Δ੩తαΠτ͕࡞ΕΔʂ React੎͸ͥͻGatsbyΛ৮ͬͯΈ͍ͯͩ͘͞ɻ ·ͱΊ