Roppongi.js #7で話したGridsomeのLTです。
Gridsome https://gridsome.org/
Vue.jsͰ੩తαΠτΛͭ͘Δ@mottox2/2018.11.19 Roppongi.js #7
View Slide
Work:React, Gatsby.js, Next.js, RoR…OSS:Gatsby.js, Nuxt.js,ReactNative, netlify-lambda…Comunity:#engineers_ltmottox2@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ʹϦΫΤετ͕Δɻɹɹଞͷબࢶͳ͔ͬͨͷ͔ʁิVuePressNuxt.js
GridsomeͷొGatsby.jsʹӨڹΛड͚ͯ࡞ΒΕͨ੩తαΠτδΣωϨʔλʔA new sta)c site generator baby is born. It's highly inspired byGatsby.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Λ৮ͬͯΈ͍ͯͩ͘͞ɻ·ͱΊ