【GatsbyJS製ブログ】ページを作るcreatePageの仕組みを理解する

PR

Gatsbyでは、サイトをビルドする際に、gatsby-node.jsと言われるJSファイルで色々な情報を取得しながらページを作っていきます。

そのなかでも実際にページを作るcreatePageについてまとめていきます。

クマ

今回はcreatePageの使い方の確認&まとめの健忘録記事です。

LINEスタンプもぜひご覧ください!

目次

createPageとは

createPageはテンプレートからページを作成するAPIです。

クマ

テンプレートは、例えばブログ記事やタグページの大枠のようなもの、と思ってもらえたらOKです。これにcreatePageで、それぞれのページの内容を渡すことで実際にページを作っていきます。

ですので、実際にはgatsby-node.js内でGraphQLを使ってデータ取得→必要なデータ加工をしてcreatePageに渡してページ作成、という流れになります。

具体的には、次のような形でcreatePageを使います。

createPage({
  path: "(作るページのパス)",
  component: path.resolve(`(ページ作成のためのテンプレートファイルのパス)`),
  context: {
    (↑のテンプレートファイルへ渡すprops)
  },
})

createPageの構造は結構シンプルです。

pathは作るページのパスです。もちろん個別に入力しても構いませんが、そんなことをしていたらGatsbyの機能が泣いてしまいます。先ほど言ったように、GraphQLで必要な情報を引っ張ってきて、加工して渡すのがセオリーです。

componentは上記の形で作りたいテンプレートファイルのパスを指定してあげます。

一番重要なのはcontextです。

ここで指定した値は、受け取り側のテンプレートにpageContextとして渡っていきます

そして、ここで渡した値は、渡した先のテンプレート内でGraphQLの条件指定などに変数として使えます

クマ

GraphQLのフィルターで変数を使いたいときは、このcreatePageのcontextで渡すしかないです。

ちょっと話がわかりにくくなってきたので、gatsby-starter-blogのソースでどのようにcreatePageが使われているか見てみましょう。

…
const blogPost = path.resolve(`./src/templates/blog-post.js`) //あらかじめ「blogPost」にブログ記事のテンプレートを入れとく
…
const result = await graphql(` //GraphQLでマークダウンのidとslugを取得
    {
      allMarkdownRemark(sort: { frontmatter: { date: ASC } }, limit: 1000) {
        nodes {
          id
          fields {
            slug
          }
        }
      }
    }
  `)
…
  const posts = result.data.allMarkdownRemark.nodes //postsにGraphQLのnode情報だけ入れとく

  if (posts.length > 0) {
    posts.forEach((post, index) => {
      const previousPostId = index === 0 ? null : posts[index - 1].id 
    //↑ここは前の投稿のIDを取得するロジック。前の投稿のIDを取得してテンプレートに渡すことで、よくある「前の記事」のリンクに使う。
      const nextPostId = index === posts.length - 1 ? null : posts[index + 1].id
      //↑同様に次の投稿のIDを取得する。

      createPage({
        path: post.fields.slug, //pathはGraphQLから取得したslugから作る
        component: blogPost, //あらかじめ入れておいたテンプレートのパスをこのような形でも指定できる。
        context: {
          id: post.id, //各記事のIDが個別に渡される
          previousPostId, //その記事の前のID
          nextPostId, //その記事の次のID
        },
      })
    })
  }
}
…
…
export const pageQuery = graphql`
  query BlogPostBySlug(
    $id: String! //こんな感じでcontextからもらった値を…
    $previousPostId: String //同上
    $nextPostId: String //同上
  ) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(id: { eq: $id }) { //フィルターの条件として使える
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
    }
    previous: markdownRemark(id: { eq: $previousPostId }) { //これも同じ
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
    next: markdownRemark(id: { eq: $nextPostId }) { //これも同じ
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
  }
`

こんな感じでテンプレート側のGraphQLでcontextの値を使えるのが最大の特徴です。

これによって、テンプレート側でピンポイントでブログ記事の内容、タイトル、ディスクリプション、etc..を拾ってくることができます。

クマ

もちろん、contextで渡した値はpageContextとして直接propsに入ってくるので、GraphQLだけじゃなくテンプレート側のpropsとして扱えます。

まとめ

createPageについての説明でした。

Gatsbyのページ作成における基本ですが、GraphQLも含めて、Gatsbyの構造がわかっていないとちょっと何をしているかわかりにくい部分です。

特に、contextがテンプレートにpropsとGraphQLのフィルターで使える変数として渡っていく、というイメージを持っておくと、テンプレートも思い通りに加工しやすくなります。

クマ

このへんがGatsby特有の振る舞いですので、押さえておきましょう。

ちょっと一息…

最近本格的にCSSの勉強を始めました。

WordPressでもGatsbyJSでも必要な基本的な知識「CSS」…これが奥深い。

クマ

もちろんCSSに関する基本的な知識はあるのですが、引き出しは多くしておきたいものです。

ワンランク上のホームページ、ブログ作成を目指して、特に「これはよかった」というオススメのCSS学習教材の紹介をしていきます。

動画編

Webデザインのオンラインスクールなどは沢山ありますが、数万円〜数十万円するので、なかなかハードルが高いですよね。

そこでオススメなのはUdemy

このブログでもちょくちょく紹介させてもらっていますが、一つの講座買い切り、というのがありがたいです。

しかも、種類もかなり豊富!GatsbyJSの講座まである、というのは他ではなかなかないです。

そのなかでもオススメのCSSに関する講座を紹介しておきます。

クマ

CSSの講座とかは沢山あるので、「これよさそう!」と思ったものを探すのも楽しいかもしれません。

書籍編

CSSを実践的に書いていくなら、書籍も便利です。

本を片手にコーディング、というのは効率もいいですよね。

こちらもオススメの本を紹介しておきます。

クマ

CSSの基本ができている人が「次のステップに行きたいなぁ…」というときにオススメです。

あなたへオススメ!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次