最近技術系のブログしかあげてないことに多少の危機感を感じる。
どうも、寿司です。
今回は最近激アツの「Headless CMS」界隈の金字塔である、我が日本の誇るプラットフォーム「microCMS」について綴っていこうと思う。
これがやばいのなんのって…これさえあればめちゃくちゃ簡単に個人開発から大規模メディアまで色々作れてしまうのだ。そんなmicroCMSについて是非紹介させて欲しい。
Headless CMSをご存知ない方にもわかる様に概要も綴るのでぜひ最後までご覧いただきたい。
👉 microCMS
では定例通りまずは目次からご覧いただこう。
いつも通りの四段構造だ。
では早速綴っていこう
Headless CMSとは？
結論から申し上げよう。Headless CMSとは、
コンテンツ管理システム（バックエンド）とクライアントサイド（フロントエンド）が完全に切り分けられているCMSの事だ。
恐らく皆様は「WordPress」は聞いたことあるのではないだろうか。あれが俗に言う「CMS」だ。そこから頭（フロントテンプレート）のみを取り除いたものがHeadless CMSだ。
ここだけ聞くと
何がそんなに良いの？🤔
いやいや、Headlessっておまっ😂
等のご意見があることだろう。確かに普段コードをあまり書かれない方からするとデメリットになるだろう。しかし、これはフロントエンドエンジニア、ないしビジネスサイドの人間からすると「これを待ってました‼️」と思わず叫ぶほどのものなのだ。
Headless CMSの最大の特徴は何よりも
圧倒的に柔軟にコンテンツ開発が出来る所にある
既存のWordPressのテンプレートだとすこし「WordPressっぽいな🤔」となるが、一から自分でフロントをコーディング出来るので圧倒的に自由度が増すのだ。
さらにデータの構造もめちゃくちゃ柔軟に変えられる為、複雑なコンテンツの作成も用意となるのだ。
アイデア次第では今までにないメディアを作ることだって可能だろう。
とまあ、Headless CMSの概要はこの辺にしておいて次のセクションから本題のmicroCMSについて綴っていこうと思う。
microCMSの概要
このセクションではまず概要からご紹介しよう。
microCMSはAPIベースで提供されるHeadless CMSだ。これはフロントエンドエンジニアとしては大変開発しやすくてありがたい限りだ。
APIベースの為モダンなフロント技術系でも実装しやすく、実装するためのサーバーサイドの知識も不要だ。
また、データの構造も大変優れている。下記の画像をご覧いただこう。
ベースのデータ構造だけでもかなり充実している。更にカスタムフィールドを使用することで、お好みの構造に書き換えて連想配列としてもデータを扱うことが出来る。
データの編集は全てGUIで完結することができる。
GODオブGODと言わざるを得ないよね？
権限管理機能も充実しており、組織としてコンテンツを運営する上ではかなり重宝することだろう。
まだまだ、語り尽くせないほど素晴らしいサービスをご提供してくださるmicroCMS社様だが、皆様も気になるサービス使用料について綴ろう。
なんと
無料で使用することが出来るのだ。
個人開発勢にはめちゃくちゃ嬉しい😊
もちろんサポートやサービスの拡大に重きを持たれる方のためのプランもご用意されている。
下記にプランの詳細をまとめたのでご覧いただこう。
とまあわかりやすく3つのプランで構成されている。
更に極め付けの驚愕事実がある。
なんとmicroCMSは
日本の企業が運営しているのだ‼️
これはマジで激アツ🔥 来たぞ来たぞニッポン🍣 トキニッポニアニッポン🦚
昨今のプラットフォーム系サービスはどうしても海外のサービスに軍配が上がっていたが、ここに来て躍り出たぞニッポン‼️
早急にmicroCMSが日本の、いや、世界のディファレクトスタンダードになる日もそう遠くないだろう。
失礼、熱弁してしまった。
それでは皆様お待たせしました。ここからはmicroCMSの始め方について綴っていこう。
microCMSの始め方
始め方は至って簡単。microCMSの公式webページへ行き、ユーザー登録をするだけだ。アナウンスに従いプロジェクトのビルドまで済ましてしまおう。
それではここからはNext.jsを例に実際にmicroCMSで登録したデータをクライアントに表示してみよう。
まずは提供される「X-API-KYE」をコピーしてもらおう。X-API-KYEは漏洩しない様に.envファイル等に入れておこう。
*.env*
X_API_KEY=[your api key]
envの設定ができたら「next.config.js」にモジュールエクスポートだ！これでプロジェクト内でenvデータを使用することが出来る。
*next.config.js*
require("dotenv").config();
module.exports = {
env: {
X_API_KEY: process.env.X_API_KEY,
},
};
これで準備は整った。
あとはデータをfetchしてみよう‼️
*pages/index.tsx*
const fetchData = async () => {
const key = {
headers: { "X-API-KEY": process.env.X_API_KEY },
};
const res = await fetch("https://polegon.microcms.io/api/v1/articles", key);
const data = await res.json();
console.log(data);
};
useEffect(() => {
fetchData();
}, []);これでコンソールを見てみると...
はいデータ取得完了！
あとは煮るなり焼くなり皆様の自由だ！
余談だが、ずーっと開発が滞っていたポレゴンコレクションはmicroCMSを使ってコンテンツ開発する予定だ。
上記の画像はそのテストデータだ。
microCMS SDKの紹介
前述ではJavaScriptのfetchを用いてデータの取得を行なっていたが、microCMS社様がまたまた、素晴らしいものを開発して下さった。
それが「microCMS SDK」だ。このライブラリを用いることでmicroCMSのデータを最適にやり取りすることが出来るのだ。
しかもサポートがJavaScriptのみならずネイティブ（モバイル）も扱うことが出来ると言うのだから驚きだ😳
簡単に使い方だけ綴り、このセクションを終了しよう。
まずはnpm or yarnでインストール
npm install microcms-js-sdk
//or//
yarn add microcms-js-sdk続いてsrcディレクトリ内に適当なファイルを作る。
*src/lib/microCMS.ts*
import { createClient } from "microcms-js-sdk";
const clientCMS = createClient({
serviceDomain: process.env.MICROCMS_ENDPOINT,
apiKey: process.env.X_API_KEY,
});
export { clientCMS };
この「serviceDomain」は作成したプロジェクトのドメイン名を定義している。
「https:// polegon.microcms.io/api/v1/articles」でいうところの「polegon」の部分だ。
*pages/index.tsx*
const fetchData = async () => {
const data = await clientCMS.get({ endpoint: "articles" });
console.log(data);
};
useEffect(() => {
fetchData();
}, []);これを実行すると...
はい同じ感じでデータ取得できました！
他にもこのgetメソッドにはオプションがあるので複雑なクエリも簡単な記述で実装できてしまうのだ！
fetchを使うよりもだいぶシンプルに書けるし、良い感じだ😳
皆様もmicroCMSを始める際は公式のSDKを使うことも検討されると良い。
さいごに
いかがだっただろうか？ CMS界隈は空前のHeadlessブームが到来している。既存のCMS（WordPress）ではなくHeadless CMSを導入するベンチャー企業が続々と出てきている。
最前線フロントエンドエンジニアが今学ぶべきは「WordPress」から「Headless CMS」へとシフトした。
恐らく学習コストもかなり少なく習得することができる為、エンジニアやビジネスサイドの人間は思う存分デザインやマーケティング戦略に注力できることだろう。
乗り遅れるなこの
ビッグウェーブに‼️
