Vueで静的サイトを作るGridsome / gridsome

Roppongi.js #7で話したGridsomeのLTです。

Gridsome
https://gridsome.org/

Transcript

1. Vue.jsͰ੩తαΠτΛͭ͘Δ @mottox2 / 2018.11.19 Roppongi.js #7
2. Work: React, Gatsby.js, Next.js, RoR… OSS: Gatsby.js, Nuxt.js, ReactNative, netlify-lambda… Comunity: #engineers_lt mottox2 @ 8FCϑϩϯτΤϯυͱ6*ܥͷϑϦʔϥϯε Who am I?
3. ࠓ೔͸੩తαΠτͷ͓࿩
4. Real WorldͰٻΊΒΕΔ੩తαΠτ • MarkdownΛݩʹϖʔδΛੜ੒͚ͩͩͱɺػೳෆ଍ɻ • ϦϙδτϦ֎ͷσʔλιʔε΋ར༻͢Δɻ • ຊ൪؀ڥͰ͸ɺ֎෦APIʹ͸ΞΫηε͠ͳ͍ɻ • APIͷϨεϙϯεΛ੩తԽ͓ͯ͘͠ඞཁ͕͋Δɻ • ʢಡΈࠐΜͩޙ͸SPAͱͯ͠ಈ͘ͱخ͍͠ɻʣ
5. GatsbyͳΒ࣮ݱͰ͖Δ ॏཁ React੡ͷ੩తαΠτδΣωϨʔλʔɻ ֎෦ͷιʔεΛ؆୯ʹѻ͑ɺϏϧυޙ͸֎෦APIʹΞΫηε͕૸Βͳ͍ɻ
6. ͨͩ͠ReactΛॻ͘ඞཁ͕͋ͬͨ mottox2 @ 8FCϑϩϯτΤϯυͱ6*ܥͷϑϦʔϥϯε Who am I? Ͱ΋ReactͰ͠ΐʁ mottox2 @ 8FCϑϩϯτΤϯυͱ6*ܥͷϑϦʔϥϯε Who am I? ͦ͏͚ͩͲɺศརͩΑ Vue͕޷͖ͳਓ Θͨ͠
7. Vuejsެࣜͷ੩తαΠτδΣωϨʔλʔɻ ϦϙδτϦ಺ͷmdϑΝΠϧΛݩʹαΠτΛߏஙɻ ੩తϑΝΠϧΛग़ྗ͢Δgenerateػೳ͕͋Δɻ SPAͷ2ϖʔδ໨Ҏ߱͸asyncData͕࣮ߦ͞ΕɺAPIʹϦΫΤετ͕૸Δɻ ɹɹଞͷબ୒ࢶ͸ͳ͔ͬͨͷ͔ʁ ิ଍ VuePress Nuxt.js
8. 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
9. Gridsomeͷొ৔ Gatsby.jsʹӨڹΛड͚ͯ࡞ΒΕͨ੩తαΠτδΣωϨʔλʔ
10. ࢖͍ํ WordPressΛιʔεʹͨ͠Ϗϧυྫ
11. σʔλͷऔಘ ֤CMSͷσʔλΛऔಘ͢ΔͨΊͷϓϥάΠϯ͕ଘࡏ͢ΔͷͰಋೖɻ configͷϑΝΠϧʹPluginΛొ࿥͢Δ͚ͩͰσʔλΛ༻ҙͯ͘͠ΕΔɻ gridsome.config.js
12. σʔλͷར༻ औಘͨ͠σʔλ͸SFCͷpage-queryλά಺ʹؚ·ΕΔGraphQLʹΑͬͯ औಘ͠ɺ$page͔Βར༻Ͱ͖Δɻ src/pages/index.js
13. ৄࡉϖʔδ΋࡞ΕΔ src/templatesҎԼʹsourceͷnodeͷTypeʹରԠ໊ͨ͠લͷVueϑΝΠϧ Λஔ͘ͱϏϧυͯ͘͠ΕΔɻ src/templates/WordPressPost.vue
14. JSONͱͯ͠ॻ͖ग़͞ΕΔ ϏϧυͰύεຖͷσʔλ΋ॻ͖ग़͢ɻ͜Ε͸Ұཡϖʔδͷσʔλ
15. ·ͩ·ͩൃల్্ Gridsome͸·ͩv0.3ܥɻൃల్্ͷϑϨʔϜϫʔΫɻ ͨͩɺίʔυ͕ബ͍ͷͰඇৗʹಡΈ΍͘͢ษڧʹͳΔɻ
16. VueͰ΋Real WorldͰ࢖͑Δ੩తαΠτ͕࡞ΕΔʂ React੎͸ͥͻGatsbyΛ৮ͬͯΈ͍ͯͩ͘͞ɻ ·ͱΊ