JAMstack_kotohajime.pdf

 JAMstack_kotohajime.pdf

78d138a74c8135fe40735a286a71f4c7?s=128

IMANISHI TOSHIFUMI

December 07, 2019
Tweet

Transcript

  1. +".TUBDL͜ͱ͸͡Ί ΤϯδχΞަྲྀձʙ7VFͱ͔3FBDU΋৮͓͔ͬͯͳ͍ͱͶʙʛ%FD  ࠓ੢ढ़จ גࣜձࣾΞϯςΟʔɾϑΝΫτϦʔ

  2. ࠓ੢ढ़จ ͍·ʹ͠ ϑϩϯτΤϯυΤϯδχΞ !UPTIJNBSOJF UPTIJGVNJJNBOJTIJ ͱ͠;Έ

  3. +BWB4DSJQU "1*T .BSLVQ +".TUBDLͱ͸ ˠΫϥΠΞϯταΠυͷ+BWB4DSJQU ˠ࠶ར༻Մೳͳ"1* ˠ͋Β͔͡Ίߏங͞Εͨ.BSLVQ

  4. IFBEMFTT$.4ͱ͸  "1*

  5. 813&45"1* QVTI OVYUHFOFSBUF

  6. 813&45"1*Λऔಘ͢Δʹ͸ɺ ύʔϚϦϯΫΛઃఆ͠·͢ ౤ߘ*%

  7. const apiUrl = 'http://localhost:8000/wp-json/wp/v2'; export default { … axios: {

    baseURL: apiUrl }, … } OVYUDPOpHKT
  8. None
  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> ݻఆϖʔδͷϦϯΫऔಘ ݻఆϖʔδͷλΠτϧऔಘ ݻఆϖʔδͷ಺༰ൈਮ
  11. None
  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 } } } }
  14. None
  15. QVTI HBUTCZCVJME

  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 HBUTCZEFWFMPQΛ࣮ߦ͢Δͱʮ։ൃʯ؀ڥʹͳΓ·͢ɻ w HBUTCZCVJMEɺ·ͨ͸ɺHBUTCZTFSWFΛ࣮ߦ͢Δͱʮຊ൪ʯ؀ڥʹͳΓ·͢ɻ HBUTCZUSBOTGPSNFSSFNBSL͸(BUTCZ+4Ͱ.BSLEPXOϑΝΠϧΛѻ͏ͨΊͷ5SBOTGPSNFSϓϥάΠϯͰ͢ɻ
  18. FOWEFWFMPQNFOU CONTENTFUL_SPACE_ID=xxxxxxxx CONTENTFUL_ACCESS_TOKEN=xxxxxxxx FOWQSPEVDUJPO CONTENTFUL_SPACE_ID=xxxxxxxx CONTENTFUL_ACCESS_TOKEN=xxxxxxxx

  19. None
  20. None
  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` …
  23. None
  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 } }) }) } औಘ͍ͨ͠$POUFOU5ZQFΛࢦఆ͠·͢ɻ w QBUIϖʔδΛग़ྗ͢Δύεͷࢦఆ w DPNQPOFOUϖʔδΛੜ੒͢Δࡍʹ࢖͏ςϯ ϓϨʔτͷύεΛࢦఆ w DPOUFYUQBHF2VFSZͷҾ਺ͱςϯϓϨʔτ ͷQSPQTʹ౉͢஋Λࢦఆ σʔλΛऔಘ͢ΔͨΊͷ(SBQI2-ΫΤϦ ϖʔδੜ੒ͷॲཧ
  25. None
  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Ͱ౉ͯ͠ϖʔδΛੜ੒͠·͢ɻ औಘ͍ͨ͠$POUFOU5ZQFΛࢦఆ͠·͢ɻ
  27. None
  28. None
  29. None
  30. w +".TUBDL͸8FC։ൃͷΞʔΩςΫνϟ w ૊Έ߹Θͤ͸ࣗ༝ w ϑϩϯτΤϯυͷ৽ٕज़ʹ৮ΕΔ w -FU`T+".TUBDL ·ͱΊ

  31. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠