【過去に書いたブログ記事のリライト版です】
microCMSからAPIからデータを取り出す①
こんにちは。ふじです。
microCMSで作成したブログの構築にあたって使用した技術などについて、自分の知識定着のため、そして備忘録として投稿としてまとめていこうと思います。
microCMSからデータを取り出す
まずはmicroCMSからAPIを用いて、ブログ記事のデータを取り出すことについて、まとめます。
ブログ記事の取り出し
ブログ記事はJavaScriptの「オブジェクトリテラル」として値が格納されています。
例えば、以下のような形です。
var object_name = {
key1: value1; // プロパティ名: 値
key2: value2;
key3: value3;
key4: value4;
key5: value5;
};基本的には波括弧（{}）で囲った中に、「プロパティ名: 値」という形でデータが格納されています。
これがmicroCMSの場合、「contents」という変数に記事に関する全てのデータが入っています。
例えば以下のとおりです。（表示内容は、記事内容の説明のため若干の修正をしています。）
{
"contents": [
{
"id": "コンテンツid",
"createdAt": "2021-07-13T22:22:29.846Z",
"updatedAt": "2021-07-24T13:28:17.248Z",
"publishedAt": "2021-07-14T11:02:53.836Z",
"revisedAt": "2021-07-24T13:28:17.248Z",
"title": "コンテンツタイトル",
"tags": [
{
"id": "タグid1",
"createdAt": "2021-07-13T22:22:40.569Z",
"updatedAt": "2021-07-13T22:22:40.569Z",
"publishedAt": "2021-07-13T22:22:40.569Z",
"revisedAt": "2021-07-13T22:22:40.569Z",
"name": "タグ名称1"
},
{
"id": "タグid2",
"createdAt": "2021-07-13T22:23:09.410Z",
"updatedAt": "2021-07-14T11:59:30.890Z",
"publishedAt": "2021-07-13T22:23:09.410Z",
"revisedAt": "2021-07-14T11:59:30.890Z",
"name": "タグ名称2"
},
{
"id": "タグid3",
"createdAt": "2021-07-11T02:06:00.639Z",
"updatedAt": "2021-07-24T02:53:36.037Z",
"publishedAt": "2021-07-11T02:06:00.639Z",
"revisedAt": "2021-07-24T02:53:36.037Z",
"name": "タグ名称3"
}
],
"toc_visible": true,
"body": "ブログコンテンツ",
"description": "ブログの概要など",
"ogimage": {
"url": "imageURL",
"height": image_height,
"width": image_width
},
"writer": {
"id": "writer_id",
"createdAt": "2021-07-11T02:06:33.467Z",
"updatedAt": "2021-07-24T09:30:23.649Z",
"publishedAt": "2021-07-11T02:06:33.467Z",
"revisedAt": "2021-07-24T09:30:23.649Z",
"name": "writer_name",
"text": "writer_text",
"image": {
"url": "writer_image_url",
"height": writer_image_height,
"width": writer_image_width
}
},
"partner": null, // partnerの登録・紐付けをした場合にidなど登録あり
"related_blogs": [] // 関連記事を登録した場合は登録あり
}
],
"totalCount": 1,
"offset": 0,
"limit": 10
}
microCMSとの連携設定
まずは、microCMSの公式で提供している「microcms-js-sdk（Githubリンクはこちら）」を導入する必要があります。
インストールは、
$ npm install --save microcms-js-sdk
によりおこないます。
インストール後は、
libsフォルダ – client.jsを作成してSDKの初期化を行います（公式の手順に従って行えば、うまくできると思います）。
次に、「service-domain」 と「api-Key」を設定します。
公式によると、
serviceDomainはXXXX.microcms.ioの場合、XXXXの部分になります。
apiKeyは環境変数を参照してください。
→「X-MICROCMS-API-KEY」に移行したようです。詳しくは公式サイトをご確認ください。
となっています。
設定をする際には、これらの設定項目を確認してください。
次に、client.jsの設定をします。
公式によると、以下のとおりclient.jsを設定するとあります。
// libs/client.js
import { createClient } from 'microcms-js-sdk';
export const client = createClient({
serviceDomain: 'service-domain',
apiKey: process.env.API_KEY,
});microcms-js-sdkからcreateClientを読み込み、serviceDomainとapiKeyをclientに分割代入し、exportしています。
これを他のページ用ファイルで読み込むことで、microCMSからデータを取得することができるようになります。
Next.jsでデータを取り出す
microCMSの設定が完了したならば、Next.jsの設定を書いていきます。
（Next.jsのプロジェクトの立ち上げなどは公式サイトを参照してください。ここでは省略します。）
今回は、Next.jsでブログサイトを構築していくため、Next.jsでのデータの取り出し方法について書いています。
データの単純な取り出しについては以下のコードにより取り出しが可能です。
microCMSの公式サイトに載っているコードをそのまま使用している形です。
ファイル自体は、pagesディレクトリのindex.js（このブログのトップページ）において、データ連携をしていきます。
// pages/index.js（公式より）
import Link from "next/link";
import { client } from "../libs/client";
export default function Home({ blog }) {
return (
<div>
<ul>
{blog.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",
queries: {orders: '-createdAt'}
});
return {
props: {
blog: data.contents,
}
}
}
内容自体はシンプルで、dataという定数に先ほど定義したclientを使ってデータを取得します。
この際、endpoint（どこからdataを取得するかの場所を示してあげる）を設定します。
このendpointだけの設定でもデータの取得は可能ですが、ブログなどの記事を表示する場合、新しい記事から上位に表示された方がいいですよね？
そのため、microCMSでは「queries」というパラメータを用意しています。
これを「orders: -createdAt」（降順）を設定することで、取り出すデータの順番を変更することができます。
便利ですね。
そして、「ブログ記事の取り出し」で示したとおり、microCMSのデータは「contents」の中に入っているため、dataの中にあるcontentsを一度dataという定数に代入しているため、「blog」というプロパティに代入するときは、「data.contents」で「dataの中のcontents」までを取り出して代入し、returnしています。
これでblogを使ってJSX内でデータを取り出すことができます。
// 代入の構造
blog ← 代入 ← data ← 代入 ← contents{ [ 各項目 ] }
という構造になっているため、contentsの中身である、titleやcreatedAtなどの項目は、
「blog.○○」
という形で取り出すことができます。
ただし、contentsの中身も「totalCount」や「offset」、「limit」などを除いて、角括弧（[ ]）で囲われた配列の形になっているため、取り出す際はmap関数などで一度配列の中身をblogという変数に代入してからデータを取り出します。
そのため、上記のようなデータの取り出しが可能となっています。
初心者の僕には、ここを理解するのが難しかったですね。
※map関数でデータを取り出すのは、各オブジェクトがキーと値のペアを保持しており、代入された順番が決められている（今回の場合はブログ記事の情報を降順で取得しているので、その順番に決まっている）ため、その順番によりデータを取り出すことで、降順のままブログ記事のタイトルなどを取り出し、表示することができます。
これで、プロジェクトのローカルサーバーで「npm run dev」を実行すると、データを呼び出せていることが確認できると思います。
このようにして、データを取り出して表示していくことができるというわけです。
便利ですね〜😁
最後に
今回は、microCMSの基本中の基本をまとめたわけですが、自分でも自作ブログを作った際に、初心者ながら調べて、探りながら作ったことを再確認できました。
JavaScriptをマスターしている人であれば、こんなこと言われなくてもわかるよと思われそうですが、初学者目線で、microCMSを導入したい人向けに記事を書いてみましたし、自分の復習にもなっていますので、これはこれでOKです！
最後まで読んでいただき、ありがとうございました。
うまくまとめられているかわかりませんが、参考になれば幸いです。
（まぁ、ほとんど公式に書いてあるんですけど…笑）
次も、microCMSについてまとめていきたいと思いますので、どうぞよろしくお願いいたします。
内容に誤り等があれば、Twitterから教えてください。
よろしくお願いします！
今日の一言
Next.jsの技術力アップも頑張りたいし、前から取り組んでいるPythonも頑張りたいな〜。
