shimar's blog

JAMstackについて調べてみた
2019-02-27
jamstackjavascriptweb

Twitterを眺めていたら、JAMstackなるキーワードに遭遇し、気になったので調べてみました。

JAMstack

JAMstackは、公式サイトによると、

Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

のことのようで、特定のテクノロジーのことではなく、よいパフォーマンスで、セキュアで、低コストでスケールし、良い開発者の体験を伴ったWebサイトやアプリケーションの新しい構築方法である、と書かれています。

JAMstackとは何か

JAM stackは、J avaScript、A PIs、M arkupが語源となっていて、それぞれ次のような特徴があるようです。

JavaScript

リクエスト/レスポンスのサイクルの間の動的なプログラミングはすべてJavaScriptによって処理され、完全にクライアント上で実行される。これはどんなフロントエンドのフレームワーク、ライブラリ、あるいは一般的なJavaScriptでも構わない。

APIs

すべてのサーバーサイドプロセスまたはデータベースアクションは、JavaScriptを使用してHTTPS経由でアクセスされる再利用可能なAPIに抽象化されている。これらはカスタムメイドでもサードパーティのサービスを利用することもできる。

Markup

テンプレートマークアップは、通常はコンテンツサイト用のサイトジェネレータ、またはWebアプリケーション用のビルドツールを使用して、デプロイ時に事前に作成されるべきである。

JAMstackのメリット

パフォーマンス

事前にビルドされたファイルをCDNで配信するため、高いパフォーマンスが得られる。

セキュリティ

サーバーサイドのプロセスはマイクロサービスなAPIに抽象化されるため、攻撃を受ける領域が減り、セキュアになる。

スケーリング

デプロイがどこにでも提供できるファイルのスタックになると、スケーリングはより多くの場所でそれらのファイルを提供することの問題になる。CDNはこれに最適であり、多くの場合、すべてのプランにスケーリングが含まれているので、安価かつ簡単にスケーリングできる。

開発者体験

Loose coupling and separation of controls allow for more targeted development and debugging, and the expanding selection of CMS options for site generators remove the need to maintain a separate stack for content and marketing.

ちょっと意味がわからない...

JAMstackなサイトの作り方

では、JAMstackなサイトはどう作るのか、については、

Static Websites + JAMstack = <3 ｜ Julian Gaviria — Web Designer

という記事が参考になります。

この記事では、

  1. ホストとCDNを選ぶ。
  2. Static Site Generatorを決める。
  3. Headless CMSを選ぶ。

という手順が書かれています。

ホストとCDNを選ぶ

上記の記事では、具体的なサービスとして、Netlify、AWS S3、Cloudflareが挙げられています。

Static Site Generatorを決める

上記の記事では、具体的なツールとして、Jekyll、Hugoが挙げられています。また、

StaticGen ｜ Top Open Source Static Site Generators

で、JAMstackなサイトで使えるStatic Site Generatorがリストアップされています。

Headless CMSを選ぶ

Headless CMSというのは今回初めて知りました。通常のCMSといえば、WordPressのようにコンテンツを管理する機能と、それを公開する機能が備わっていますが、Headless CMSは、乱暴な言い方かもしれませんが、後者を削ぎ落としたCMSのようです。

上記の記事では具体的なサービスは書かれていませんが、

headlessCMS ｜ Top Content Management Systems for JAMstack sites

で、JAMstackなサイトで使えるHeadless CMSがリストアップされています。

まとめ

JAMstackを採用すると、

  • パフォーマンスが良い
  • セキュアである
  • スケールしやすい
  • 開発体験が良い

というメリットが得られ、具体的には、

  • サイトは静的サイトジェネレーターを使って作る。
  • コンテンツの管理は、Headless CMSを使う。
  • CDNで配信する。

で実現する、というように理解しました。

このブログはJekyllで作っているのですが、CDNもHeadless CMSも使ったことがないので、何か作ってみたくなりました。