JAMstack_kotohajime.pdf

Transcript

1. +".TUBDL
   ͜ͱ͸͡Ί ΤϯδχΞަྲྀձ
   ʙ7VF
   ͱ͔
   3FBDU
   ΋৮͓͔ͬͯͳ͍ͱͶʙʛ%FD
   
    ࠓ੢
   ढ़จ
   גࣜձࣾΞϯςΟʔɾϑΝΫτϦʔ
2. ࠓ੢
   ढ़จ ͍·ʹ͠ ϑϩϯτΤϯυΤϯδχΞ !UPTIJNBSOJF UPTIJGVNJJNBOJTIJ ͱ͠;Έ
3. +BWB4DSJQU "1*T .BSLVQ +".TUBDL
   ͱ͸ ˠ
   ΫϥΠΞϯταΠυͷ+BWB4DSJQU ˠ
   ࠶ར༻Մೳͳ
   "1* ˠ
   ͋Β͔͡Ίߏங͞Εͨ
   .BSLVQ
4. IFBEMFTT
   $.4
   ͱ͸  "1*
5. 81
   3&45
   "1* QVTI OVYU
   HFOFSBUF
6. 81
   3&45
   "1*
   Λऔಘ͢Δʹ͸ɺ
   ύʔϚϦϯΫΛઃఆ͠·͢ ౤ߘ
   *%
7. const apiUrl = 'http://localhost:8000/wp-json/wp/v2'; export default { … axios: { baseURL: apiUrl }, … } OVYUDPOpHKT
9. JOEFYWVF export default { data () { return { posts: [] } }, … async asyncData({ $axios }) { const { data } = await $axios.get('/posts?_embed') return { posts: data } }, } BTZOD%BUB
   ͸
   /VYUKT
   Ͱఏڙ͢Δಠࣗʹ֦ுͨ͠
   7VFKT
   ͷίϯϙʔωϯτΦϓγϣϯ
   ඇಉظʹσʔλΛऔಘ͢ΔͨΊͷϝιουͰɺ7VFKT
   
   ͷ
   EBUB
   ʹϚʔδ͞Ε·͢ OVYUDPOpHKT
   Ͱఆٛͨ͠
   CBTF63-
   ͕ࢀর͞Ε·͢ @FNCFE
   ύϥϝʔλ͸ɺΞΠΩϟονը૾΍ίϝϯτͳͲͷ৘ใΛऔಘͰ͖·͢
10. JOEFYWVF <template> … <article v-for="post in posts" :key=“post.id"> <n-link :to="{ path: '/posts/' + post.id }"> <h2>{{ post.title.rendered }}</h2> <div v-html="post.excerpt.rendered"></div> </n-link> </article> … </template> ݻఆϖʔδͷϦϯΫऔಘ ݻఆϖʔδͷλΠτϧऔಘ ݻఆϖʔδͷ಺༰ൈਮ
12. export default { … generate: { routes: async () => { const { data } = await axios.get(`${apiUrl}/posts?_embed`) return data.map(post => { return { route: `/posts/${post.id}`, payload: post } }) } } … } OVYUDPOpHKT HFOFSBUF
    ίϚϯυͰ͸ɺಈతͳϧʔςΟϯά͸ແࢹ͞Ε·͢ɻ
    ಈతͳύϥϝʔλʔΛ༻͍ͨϧʔτΛੜ੒͍ͤͨ͞৔߹͸ɺಈతͳϧʔςΟϯάͷ഑ྻΛηοτ͢Δඞཁ͕͋Γ·͢ɻ
    QBZMPBE
    ͸ɺಈతϧʔςΟϯάੜ੒ͷߴ଎ԽͷͨΊͰ͢ɻ
13. @JEWVF <template> <div> <h2>{{ post.title.rendered }}</h2> <div v-html="post.content.rendered"></div> </div> </template> … export default { data () { return { post: {} } }, async asyncData({ $axios, params, error, payload }) { if (payload) { return { post: payload } } else { const { data } = await $axios.get(`/posts/${params.id}?_embed`) return { post: data } } } }
15. QVTI HBUTCZ
    CVJME
16. $ npm install --save gatsby-source-contentful $ npm install --save gatsby-transformer-remark
17. HBUTCZDPOpHKT require('dotenv').config({ path: `.env.${process.env.NODE_ENV}` }) module.exports = { … plugins: [ … { resolve: `gatsby-source-contentful`, options: { spaceId: `${process.env.CONTENTFUL_SPACE_ID}`, accessToken: `${process.env.CONTENTFUL_ACCESS_TOKEN}`, } }, `gatsby-transformer-remark` … ], } (BUTCZ+4
    ͸
    
    ͭͷ؀ڥΛαϙʔτ͠·͢ɻ
    w HBUTCZ
    EFWFMPQ
    Λ࣮ߦ͢Δͱʮ։ൃʯ؀ڥʹͳΓ·͢ɻ
    w HBUTCZ
    CVJMEɺ·ͨ͸ɺHBUTCZ
    TFSWF
    Λ࣮ߦ͢Δͱʮຊ൪ʯ؀ڥʹͳΓ·͢ɻ HBUTCZUSBOTGPSNFSSFNBSL
    ͸
    (BUTCZ+4
    Ͱ
    .BSLEPXO
    ϑΝΠϧΛѻ͏ͨΊͷ
    5SBOTGPSNFS
    ϓϥάΠϯͰ͢ɻ
18. FOWEFWFMPQNFOU CONTENTFUL_SPACE_ID=xxxxxxxx CONTENTFUL_ACCESS_TOKEN=xxxxxxxx FOWQSPEVDUJPO CONTENTFUL_SPACE_ID=xxxxxxxx CONTENTFUL_ACCESS_TOKEN=xxxxxxxx
21. w pMUFSɿϩέʔϧ͸ӳޠ
    w TPSUɿهࣄ࡞੒೔࣌ͷ߱ॱ
22. TSDQBHFTJOEFYKT import React from "react" import { Link, graphql } from "gatsby" const IndexPage = ({ data }) => ( <div> <ul> { data.allContentfulCourse.edges.map(edge => { return ( <li key={edge.node.slug}> <Link to={ edge.node.slug }><h3>{ edge.node.title }</h3></Link> <div>{ edge.node.description.childMarkdownRemark.excerpt }</div> </li> ) }) } </ul> </div> ) export default IndexPage export const pageQuery = graphql` …
24. HBUTCZOPEFKT const path = require(`path`) exports.createPages = async ({ graphql, actions: { createPage } }) => { const sources = await graphql(` … `) if (sources.errors) return const posts = sources.data.allContentfulCourse.edges posts.forEach(({ node }) => { createPage({ path: `${node.slug}`, component: path.resolve(`src/templates/blog-post.js`), context: { slug: node.slug } }) }) } औಘ͍ͨ͠
    $POUFOU
    5ZQF
    Λࢦఆ͠·͢ɻ w QBUI
    
    ϖʔδΛग़ྗ͢Δύεͷࢦఆ
    w DPNQPOFOU
    
    ϖʔδΛੜ੒͢Δࡍʹ࢖͏ςϯ ϓϨʔτͷύεΛࢦఆ
    w DPOUFYU
    
    QBHF2VFSZ
    ͷҾ਺ͱςϯϓϨʔτ ͷ
    QSPQT
    ʹ౉͢஋Λࢦఆ σʔλΛऔಘ͢ΔͨΊͷ
    (SBQI2-
    ΫΤϦ ϖʔδੜ੒ͷॲཧ
26. UFNQMBUFTCMPHQPTUKT import React from 'react' import { graphql } from 'gatsby' export const pageQuery = graphql` … ` export default (props) => { const { title, description } = props.data.contentfulCourse return ( <div> <h1>{ title }</h1> <div dangerouslySetInnerHTML={{ __html: description.childMarkdownRemark.html }} /> </div> ) } QBHF2VFSZ
    ͸ϖʔδʹඞཁͳσʔλΛ
    (SBQI2-
    ͷ
    RVFSZ
    ʹΑͬͯऔಘ͢ΔͨΊͷ΋ͷͰɺ
    औಘͨ͠σʔλΛίϯϙʔωϯτʹ
    QSPQT
    Ͱ౉ͯ͠ϖʔδΛੜ੒͠·͢ɻ औಘ͍ͨ͠
    $POUFOU
    5ZQF
    Λࢦఆ͠·͢ɻ
30. w +".TUBDL
    ͸
    8FC
    ։ൃͷΞʔΩςΫνϟ
    w ૊Έ߹Θͤ͸ࣗ༝
    w ϑϩϯτΤϯυͷ৽ٕज़ʹ৮ΕΔ
    w -FU`T
    +".TUBDL ·ͱΊ
31. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠