こんにちは！ゴリラ転生組のケイジャニスト山田です！
さて、今回は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は国産ですので取り入れやすいかもしれません。
JAMstack 特徴
JAMstackの概要は前述の通りです。JAMstackの解説を要約すると『スタティックなサイトで、動的コンテンツはJavaScriptを通じてAPI経由で取得していること。サーバーサイドではなにも行わないこと』となります。
このJAMstackで作られたサイトとそうでないサイトとではどのような違いがあるのでしょうか。違いは以下のような形であると言えます。
表示スピードが早い
まずは何と言ってもこれです。スタティックとは静的と言う意味ですが、htmlファイルだけで、サーバーサイドで生成処理等を行いません。よって表示速度が速くなります。
セキュア
セキュリティ面でも効果があります。なぜなら静的サイトであるため、セキュリティ面もある程度担保することが可能です。
他にもありますが、少なくとも上記二点は該当すると思います。
その他
ではデメリットはなんでしょう？以下のようなことが挙げられます。
- まだ日が浅く、知見が溜まっていないためトラブルシュートやカスタマイズ幅は担当エンジニア次第である
- 公開時サーバーレスな場合がほとんどなため、思わぬところでハマる。もしくは対応しきれない場合がある。
- 要件で閲覧環境はモダンブラウザ以外だと利用が難しい
などが挙げられます。
また、WordPressなどのCMSのように、知見が結晶化された管理画面等がないため、コンテンツの更新を行うような管理画面を作る場合、１から作る/もしくはある程度が整備されたプラグイン等を探して導入を検討する必要があります。
あとは前述のヘッドレスCMSと呼ばれるスモールなCMSを導入する形ですが、microCMSやContentfulなど著名なサービスもあるものの、サービス自体も若いため。できること、できないことの仕分けは作成前によく検討しておく必要があるでしょう。
まとめ
ここまでJAMstackについて解説してきました。まずは自分のブログなど、スモールな形で導入して知見をためながら取り入れていくといいかもですね！
以上、ケイジャニストでした〜！
