こんにちはhiro08です。

現在フロントエンドエンジニアとしてmicroCMS本体の開発に携わっていて、日々サービスの新機能開発や改善を行っています。

そして、先日リリースされたmicroCMSのJavaScript、iOS、Android SDKの3つのうち、JavaScript SDKの開発を担当させて頂きました。リリース時のブログはこちらです。
https://blog.microcms.io/introduce-sdk

microcms-js-sdkはnpmで配布されていて、GitHubにオープンソースとして公開されています。
※現在はGetリクエストのみに対応しています。今後、機能追加や改善していく予定です。

SDKを用いて開発するメリットとしては、Fetch APIやXMLHttpRequest等のネットワーク通信に関する処理を隠蔽できることにあります。冗長的になりがちなリクエスト処理を、メソッド化することによって一貫性があり、クリーンなコードを書くことができます。

今回は、SDK利用の最初の一歩としてNext.jsと組み合わせ開発手順をご紹介します。

microCMSでAPIの作成

最初にmicroCMS側でAPIを作成します。基本的な操作や作成方法はドキュメントを参照してください。

今回使う簡易的なAPIを作成します。

API名 - ブログ
エンドポイント - blog
APIの型 - リスト形式

APIスキーマの作成後コンテンツを作成して公開してください。

実際のレスポンスは、コンテンツ一覧の右上にあるAPIプレビューをクリックすると確認することができます。そして、取得をクリックするとコンテンツを含んだレスポンスを確認することができます。Paramsを追加すると動的にSDKのコードが変更されるので、ぜひ試してください。

Next.jsで開発する準備

開発する準備としてCLIを使ってベースプロジェクトを作成します。

$ npx create-next-app microcms-next

作成が完了したら、フォルダに移動してmicrocms-js-sdkをインストールします。

$ yarn add microcms-js-sdk

インストールの完了後、libsなどのフォルダを作成してclient.jsを作成します。createClientというAPIがあるのでインポートして、引数にserviceDomainとapiKeyを指定します。serviceDomainはXXXX.microcms.ioの場合、XXXXの部分になります。

オプションとしてglobalDraftKeyも指定することができます。これは、全ての下書き状態のコンテンツを一度に取得するための認証キーです。

// libs/client.js
import { createClient } from "microcms-js-sdk";

export const client = createClient({
  serviceDomain: 'service-domain',
  apiKey: 'api-key',
  globalDraftKey: 'global-draft-key', // これはオプション。今回は必要ない
});

一覧ページの作成

それでは実際にmicroCMSのAPIからデータを取得してみましょう。pages配下にあるindex.jsを編集します。

import Link from "next/link";
import { client } from "../libs/client";
import styles from "../styles/Home.module.css";

export default function Home({ data }) {
  return (
    <div className={styles.container}>
      <ul>
        {data.map((blog) => (
          <li key={blog.id}>
            <Link href={`/blog/${blog.id}`}>
              <a>{blog.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export const getStaticProps = async () => {
  const data = await client.get({ endpoint: "blog" });

  return {
    props: {
      data: data.contents,
    },
  };
};

createClientで初期化したclientはgetというAPIを使うことができます。これは、microCMSのデータを取得するときに使います。endpointを指定して、先程作成したAPIのデータを取得することができます。

そして、前述したネットワーク通信に関する処理を隠蔽することで、この1文を追加するだけでデータ取得の処理が完結しました。

const data = await client.get({ endpoint: "endpoint" });

個別ページの作成

次に個別ページを作成してみましょう。pages配下にblogフォルダを作成して、その中に[id].jsを作成します。

// pages/blog/[id].js
import { client } from "../../libs/client";

export default function BlogId({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
    </div>
  );
}

export const getStaticPaths = async () => {
  const data = await client.get({ endpoint: "blog" });

  const paths = data.contents.map((content) => `/blog/${content.id}`);

  return { paths, fallback: false };
};

export const getStaticProps = async (context) => {
  const id = context.params.id
  const data = await client.get({ endpoint: "blog", contentId: id });

  return {
    props: {
      data,
    },
  };
};

getはendpointのほかにcontentIdとqueriesを指定することができます。contentIdはリスト形式のデータの個別ページを取得したいときに使います。また、queriesを指定することで、さまざまなデータ形式で取得することもできます。

queriesで指定できるパラメータはドキュメントを参照してください。

queriesの利用例として、filtersを用いてcategoryモデルがコンテンツ参照として設定されている場合の、blogデータを取得したい場合の一例です。

const data = await client.get({
  endpoint: "blog",
  queries: {
    filters: `category[equals]category-id`,
  },
});

今後の課題

今回はmicrocm-js-sdkを用いたNext.jsとの連携を紹介しました。microcms-js-sdkは今後継続的に機能追加・改善をしていきます。特に現在取り組んでいるのは下記3点です。

型周りの見直し
対応リクエストを増やす
対応ブラウザの表記

など山積みです。

今後、JavaやPHP、RubyなどのSDKもリリースする予定なので、もしmicroCMSを利用する機会がある場合は合わせてご利用ください。

Discussion