汗ばむ季節になってきたので、GatsbyとmicroCMSを使ったコンテンツ管理を学んでいきます

みなさんこんにちは！株式会社アルダグラムでWebのエンジニアをしている大木です。
11月になり、気温も2桁になる日が続くなど汗ばむ季節になりましたね。
そんな時に必要なアイテムと言えばそう、Gatsby です。
間違えました、Gatsby ですね。今回は、ReactベースのSSGフレームワークである Gatsby.js を学んでいこうかと思います。

弊社ではサービスサイトのLPページ・コーポレートサイトのような静的サイトで、Gatsbyとコンテンツ管理のサービスである microCMS を利用しています。SSGの文脈でいうと Next.js も選択肢として挙げられるかと思います。

今まであまり触れる機会がなかったのですが、ちょうど改修が必要になりそうだったため勉強してみました。

GatsbyとmicroCMSの準備

Gatsbyの構築に関しては、公式の手順が直感的にわかりやすかったです。(当たり前なのですが)

https://www.gatsbyjs.com/docs/tutorial/getting-started/

microCMSは様々なAPI連携の方法を提供しており、Gatsbyでの連携も可能です。こちらも公式に連携方法が記載されていました。APIキーなど、必要な情報を管理画面から取得する必要がありそうです。

https://document.microcms.io/tutorial/gatsby/gatsby-top

Gatsbyで新たにプロジェクトを作成したときに、 gatsby-config.js(ts) というファイルが存在しているかと思います。ここにmicroCMSとの連携で必要な情報を書いていくようですね。
今回私は、「テストコンテンツ」という名前で新たにコンテンツAPIを作成してみました。エンドポイントも自分で決めることができ、これが先程の gatsby-config で必要になるものなようですね。

ですので以下のようにconfigを更新しました。

plugins: [
    {
      resolve: 'gatsby-source-microcms',
      options: {
        apiKey: 'MICROCMS_API_KEY',
        serviceId: 'myblog',
        apis: [
          {
            endpoint: 'test-contents',
            format: "object" # 今回作成したコンテンツはオブジェクト形式にしたのでこのオプションを付与しています
          },
        ],
      },
    },
  ],

microCMSの管理画面から、先程作成した「テストコンテンツ」を以下のようなスキーマに変更してみました。タイトルという名の文字列と、メインビジュアルという画像用のフィールドが含まれるようなスキーマになっています。


このスキーマをもとに、以下のようにコンテンツの内容を入力してみました。

これでmicroCMS側の準備はひとまず完了です。

実際にデータを取得してみる

Gatsbyではデータの取得などにGraphQLを利用します。使い慣れていない方だと最初は少し難しく感じるかもしれません。しかしGUIのツールなども存在しており、スキーマの情報などは GraphiQL というツールから確認することができるため、慣れていない方でもすぐに使いこなせるようになるかと思います。
gatsby-config に設定が記載されている状態で、Gatsbyの開発用のサーバを立ち上げます。 そこでGraphiQLのエンドポイント (デフォルトであれば http://localhost:8000/___graphql ) にアクセスすると、GraphQLのスキーマ一覧が確認できるかと思います。今回作成した「テストコンテンツ」は以下のように取得することができました。

query MyQuery {
  microcmsTestContents {
    id
    title
    mainVisual {
      url
      height
      width
    }
  }
}

こちらのクエリを元にコードを書いていきます。コードの善し悪しはあるかもしれませんが、以下のように実装してみました。

import { graphql } from 'gatsby'

const TestContents = ({ data }) => {
  const contents = data.microcmsTestContents
  return (
    <div>
      <h1>TestContents</h1>
      <p>{contents.title}</p>
      <img src={contents.mainVisual.url} alt="" />
    </div>
  )
}

export default TestContents

export const query = graphql`
  query TestContents {
    microcmsTestContents {
      id
      title
      mainVisual {
        url
        width
        height
     }
    }
  }
`

該当のエンドポイントにアクセスしてみたところ… 無事ページが表示されました！画像もいい感じに表示されていそうです。

試してみた感想

GatsbyとmicroCMSを連携させることで、簡単にコンテンツ管理を実現させることができました。特別な知識も必要ないため、導入するハードルもかなり低いなと感じました。静的なコンテンツで完結できる・コンテンツの入稿の管理画面が必要ないという点では、エンジニアの工数を削減させることのできるかなり強力なツールなのではと改めて感じます。

今回はGatsbyでの実装方法も含め、microCMSのReadのAPIについて学んでいきましたが、書き込みを行うWriteのAPIもあるとのことです。今度はそちらについても勉強していきたいなと思いました！