JAMstackってなに？もやもやするのでJAMstackについて調べてみた。

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは！ゴリラ転生組のケイジャニスト山田です！
さて、今回はJAMstackとはなにか？というJAMstackそのもののご紹介と、その特徴、メリットデメリットについて紹介したいと思います！

それではいってみよ〜！

JAMstack 概要

JAMstackとはなんでしょうか？ここではJAMstackの概要を簡潔に紹介したいと思います。

JAMstackをざっくり

『JAMstack』という単語ですが、いろいろ調べていくとホスティングを提供している『Netlify創業者』のMatt Biilmann氏が提唱した言葉だそうです。

JAMstackなWebサイトの肝はサーバーに依存しないスタティックなサイトが対象です。
逆にJAMstackではないサイトとは以下のようなものを指します。

サーバーでページを生成する(WordPressなど)
サーバーサイドで生成されるWebアプリ

サーバーサイドで生成されるものは全て該当しません。
JAMstackとは後述の『JavaScript、APIs、Markup』で作られたスタティックなサイトで、動的コンテンツはすべてJavaScriptを通じ、API経由で取得する形のものを指します。

JAM = 『JavaScript、APIs、Markup』

その意味合いを理解するには単語の理解から入るといいかもしれません。JAMの略称は『JavaScript, API, Markup』の頭文字をとってJAMとなります。
『stack』ですが『LAMPスタック』や『MEANスタック』という単語に触れたことがある方なら、理解が早いかもしれません。
stackはシステム構成という意味ですが、要するに『JavaScrip、API、Markupで作るシステム構成』と考えると掴みやすいかもしれません。

JAMstackでのJavaScript

完全にクライアント上で稼働するJavaScriptであればvue.jsでもReact.jsでもいずれもOKです。

JAMstackでのAPIs

サーバーサイドでの処理やCRUDなどは、JavaScriptでAPI経由で行います。CDN提供等でも構いません。JAMstackを名乗るのであればサーバーサイドで処理しないということが肝です。

JAMstackでのMarkup

Pugや静的ジェネレーター等も含まれますが、ポイントはそれらを使ってビルドされた後のファイル、htmlファイルであることが重要です。JAMstackを名乗る上での肝は『スタティックなhtmlがビルドされている状態で公開されている』必要があります。

ヘッドレスCMSとJAMstack

先ほど動的コンテンツはAPI経由で取得すると書きましたが、コンテンツを動的に更新する場合はどうすればいいでしょう？

回答としては何かしらの手段で、例えばWordPressの投稿のようなデータを用意し、そのデータをAPIとして公開、公開されたAPIではjson等で配信しておいて、表示側のJavaScriptでAPIエンドポイントを叩いて取得するといったような枠組みが必要です。

当然、自前で作成するとなるとかなりの時間をそれだけで要します。
そこで、最近出現したのが『ヘッドレスCMS』です。

著名なヘッドレスCMSは以下です。

Contentful
microCMS

上記2つのヘッドレスCMSの解説は省略しますが、ヘッドレスCMSとは簡単にいうと、先ほど回答で紹介した枠組みを提供してくれるサービスで、サービス上で自由にフォームを作成しデータを登録することができるのですが、そのサービス上で作成したフォームからデータを登録してそのままAPIとして公開してくれるステキなサービスです。

JAMstackにおいて動的なコンテンツはなんらかAPI経由で用意する必要がありますので、ページの部位に関して、動的に更新するものが必要であればこのヘッドレスCMSを利用するのは手段となるでしょう。

上記2つであればmicroCMSは国産ですので取り入れやすいかもしれません。