はなゐろぐ

主に技術関係の覚え書きです。

microCMSでJamstackる

2020年9月29日

Jamstack とは

Jamstackという仕組みがあります。「JavaScript」「API」「Markup」でつくるから「Jam」なんですね。APIから取得したデータをJavascriptを使ってテンプレート(Markup)に流し込んで静的なウェブサイトを生成します。Movable Typeと似てますね。Wordpressなどの動的なウェブサイトと異なり、静的なので下記の点がメリットです。

ただ、よいことずくしではありません。いくつかデメリットもあります。

以上のことから、コンテンツがあまり複雑でない小規模なサイトやコーポレートサイトなどに向いています。

microCMS とは

microCMS|APIベースの日本製ヘッドレスCMS
microCMSはAPIベースの日本製のヘッドレスCMSです。もう社内向け編集/管理画面を自作する必要はありません。開発・運用コストを大きく下げることでビジネスを加速させます。
microCMS|APIベースの日本製ヘッドレスCMS favicon https://microcms.io/
microCMS|APIベースの日本製ヘッドレスCMS

Jamstackの「API」にあたる、ヘッドレスCMSです。Wordpressでいう管理画面だけを提供するサービスです。タイトルや本文などの入力項目を設定し、コンテンツを入力すればAPIとして配信してくれます。似たサービスにContentfulがありますが、こっちの方が日本語なのでクライアントにもとっつきやすそうです。

実際に触ってみた

microCMS + NuxtでJamstackブログを作ってみよう
ワークショップの内容を記事にしました。NuxtとmicroCMSを用いてJamstackなブログを作成してみましょう。
microCMS + NuxtでJamstackブログを作ってみよう favicon https://blog.microcms.io/microcms-nuxt-jamstack-blog/
microCMS + NuxtでJamstackブログを作ってみよう

microCMS公式ブログにサンプルコードが掲載されており、ほぼ書き写すだけでできあがりました。拍子抜けするほど簡単です。定期的にオンラインハンズオンが開催されているので、よくわからなかった方はこちらに参加されるのもおすすめです。

活発に開発され日々機能が追加されており、ヘッドレスCMSを盛り上げるために頑張っていらっしゃるなと感じます。クライアントワークに使われるケースも少しずつ見られるようになり、要件によっては十分選択肢になりえるのではないでしょうか。