Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

mottox2
November 19, 2018

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

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

Gridsome
https://gridsome.org/

mottox2

November 19, 2018
Tweet

More Decks by mottox2

Other Decks in Technology

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Λ৮ͬͯΈ͍ͯͩ͘͞ɻ ·ͱΊ