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

    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