JAMstackとは何か

ご訪問いただきありがとうございます。
ここではJAMstackという概念について解説していきたいと思います。

JAMstackって何！？

JAMstackとは「JavaScript」「API」「Markup」の頭文字を取ったもので、
サーバーレスで構成される高パフォーマンスかつ高セキュリティなWebアーキテクチャの事を言います。
2015年頃に静的サイトのホスティングサービスで有名なNetlifyの創始者がこの概念を提唱し始めたのがことはじめです。
まだ生まれて5年ほどのモダンなアーキテクチャですね。

さて、JAMstackの要素である「JavaScript」「API」「Markup」ですが、それぞれ以下のような役割になります。

JavaScript

動的データの処理を担います。APIを介してデータ取得し加工して出力したり、訪問者によるアクションをAPIを介してサーバーに伝えたりします。

API

他サーバーとの通信の役割を担います。HTTPまたはHTTPS通信によりリクエストを送信し、レスポンスを受け「JavaScript」に連携します。

Markup

画面表示のテンプレートの役割を担います。このマークアップをもとにデプロイ時に静的化され、HTMLファイルとなります。

また、Webサイトのアーキテクチャとして主に「MPA」「SPA」「SSR」「静的サイト（プリレンダリング）」の4点があると思います。

MPA（Multiple Page Application）

マルチページアプリケーション。HTTPリクエストをもとにサーバー側でHTMLを組み立て、ブラウザに返します。
WordPressなどの従来の一般的なサイト（LAMPstack）がこれにあたります。

SPA（Single Page Application）

シングルページアプリケーション。レンダリングを全てブラウザ側で担い、データのやりとりはAPIを介して行います。
ページ遷移のないシームレスなユーザ体験（UX）を実現します。

SSR（Server Side Rendering）

サーバーサイドレンダリング。SPAがSEOに弱かったり初期表示が遅い点を補うため、初回のみサーバー側でHTMLを組み立て、
ページ遷移はSPAの仕組みを使用したアーキテクチャです。

静的サイト（プリレンダリング）

全ての動的ページを事前にレンダリングしておき、リクエスト受信時はレンダリングされた静的なHTMLをそのまま返します。
JAMstackがこれにあたります。もちろんページ遷移はシームレスです。

JAMstackの特徴は！？

公式サイトを翻訳して解説していきます。

よりよい性能

デプロイ時にページを生成できるのに、ページがその場でビルドされるのを待つのはなぜですか？最初のバイトまでの時間を最小化することになると、CDNを介して提供されるビルド済みファイルに勝るものはありません。

➡️HTTPリクエストを受けてから、サーバーでデータを取得してHTMLを組み立てて、というのは時間がかかるしサーバー負荷もかかります。リアルタイムな変更が必要ないサイトは、事前にHTMLを生成しておいて、HTTPリクエストが来たら配信するだけの状態にしておきましょう、という事ですね。

より高いセキュリティ

サーバー側のプロセスがマイクロサービスAPIに抽象化されているため、攻撃の対象領域が減少します。また、専門のサードパーティサービスの専門知識を活用することもできます。

➡️事前にビルドしておく事で、サーバーとやり取りするのはAPIを介して行うのみとなります。API周りのセキュリティだけ気にすれば良いと言うことです。ビルドファイルをCDNに配置してAPIサーバーから分離しておけばDoS攻撃が来たとしても安心です。

安価で簡単なスケーリング

デプロイメントがどこでも提供できるファイルのスタックに達する場合、スケーリングはそれらのファイルをより多くの場所で提供することの問題です。CDNはこれに最適であり、多くの場合、すべての計画にスケーリングが含まれます。

➡️CDN（Content Delivery Network）を利用して、コンテンツ配信サーバーを冗長化したり、リクエスト元から近いサーバーから配信して高速化を実現したりなど、簡単にスケーリングが可能です。

開発者エクスペリエンスの向上

コントロールの疎結合と分離により、よりターゲットを絞った開発とデバッグが可能になり、サイトジェネレーターのCMSオプションの選択肢が拡大するため、コンテンツとマーケティング用に個別のスタックを維持する必要がなくなります。

➡️サーバーサイドとフロントエンドはAPIのみの疎結合。よって開発はそれぞれ別軸で進められますし、不具合が合った場合も原因の切り分けが容易です。APIのインターフェースのみ共通認識を持っていれば、それぞれのチームは自身の担当箇所のみに注力できます。

どんなサイトに向いているの！？向いていないサイトは！？

これまでに解説した通り、事前にビルドを行うため、向き不向きがあります。
導入したいサイトとJAMstackの特性を比べて判断していきましょう。

JAMstackに向いているサイト

・ニュース記事やブログなどのメディアサイト
・コーポレートサイトや店舗サイト
・ECサイトのカスタマー利用部分

JAMstackに向いていないサイト

・CMSなどの管理画面
・ユーザーによってコンテンツを出し分けする会員サイト
・リアルタイム速報メディア
・ユーザ投稿などの更新が頻繁にあるWebサービス

上記から分かるように、ビルドを頻繁にしなければならなかったり、サイトの大部分をAPIに頼らざるをえない場合はJAMstackにする恩恵はあまりないでしょう。
JAMstackに出来そうだけど部分的に更新が頻繁にある、例えばブログのコメント部分やECサイトのレコメンド部分、そんな時は部分的にAPIを使用して動的に作ると良いです。HeadlessCMS（ヘッドレスCMS）と組み合わせると相性が良いです。

どうやってJAMstackなサイトを作ればいいの！？

JAMstackの開発における一般的な構成は「静的サイトジェネレーター」「HeadlessCMS」「ホスティングサービス」の3点です。

静的サイトジェネレーター

JAMstackの肝となる部分です。データをHTMLテンプレートに当てはめ、静的コンテンツを作成します。
代表的なものですと、React.js製のGatsbyやNext.js、Go製のHugo、Vue.js製のNuxt.jsやGridsomeがあげられます。（一覧はこちら）
それぞれコンセプトや得意/不得意などがありますので、システム要件や開発者の技術スペックに応じて検討すると良いと思います。

HeadlessCMS（ヘッドレスCMS）

WordPressとは違い、管理画面のみで構成されるCMSです。ノーコードで簡単にAPIを作成する事が出来ます。
代表的なものですと、Contentful、Ghost、Strapi、NetlifyCMSなどがあげられますが、どれもベースは英語です。
microCMSは唯一日本製のヘッドレスCMSであり、利用者が日本人、かつ非エンジニアでも使いやすく、といった点を考慮するならmicroCMSがオススメです。

ホスティングサービス

ジェネレートした静的コンテンツを配信するサーバーです。サーバー上で処理する必要がないのでコンテンツ配信に特化したサーバーで十分です。
代表的なものですと、Netlify、Amazon Simple Storage Service（AWS S3）、Google Cloud Storage（GCS）、Google App Engine（GAE）、Firebase Hostingがあります。性能、スケーラビリティ、料金、配信場所などから決めると良いです。

これらを組み合わせてJAMstackなWebサイトを構築します。
ちなみに当ブログは、Nuxt.js / microCMS / Netlifyの構成を採用しております。

まとめ

JAMstackとは？

  • サーバーレスで高パフォーマンス/高セキュリティなアーキテクチャ
  • 事前にレンダリングしておき、アクセス時は静的コンテンツを配信するだけ
  • 静的サイトジェネレーター、ヘッドレスCMS、ホスティングサービスで構成される


以上、JAMstackの解説でした！

LINE共有