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

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

Gridsome
https://gridsome.org/

Transcript

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

   View Slide

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?
   

   View Slide

3. ࠓ೔͸੩తαΠτͷ͓࿩
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide