JAMstackとは何か？初心者のWebエンジニア向けに解説

2023年8月30日2023年11月17日

日々進化しているWeb開発の世界で、近年注目を集めているのが「JAMstack」というアーキテクチャです。

今回は、JAMstackの基本的な概念とメリット、そしてJAMstackを活用するための具体的な手法について解説していきます。

初心者のWebエンジニアのみなさんにとって、JAMstackの理解を深めるきっかけとなれば幸いです！

JAMstackとは

JAMstackとは、JavaScript・APIs・Markupの3つの頭文字を取ったもので、これらの技術を用いてWebサイトやWebアプリケーションを構築するアーキテクチャのことを指します。

JAMstackの主な特徴は、プリレンダリングとデカップリングです。

この2つの作用によって、高速なページロード・高いセキュリティ・スケーラビリティ・開発者体験の向上などのメリットが得られます。

JAMstackではすべてのページがプリレンダリングされており、ユーザーがページをリクエストした際にはすでに完成したHTMLが配信されます。

これによってサーバーサイドでの動的な処理が不要となるため、ページの読み込み速度が大幅に向上します。

JAMstackではフロントエンドとバックエンドが分離されているため、攻撃者が直接バックエンドにアクセスすることが困難です。

また、APIを介してデータを取得・操作できることから、APIのセキュリティ対策に集中することができます。

JAMstackでは、静的なファイルをCDN（Content Delivery Network）から配信するため、トラフィックが増えたときでも迅速にスケールアウトできます。

JAMstackの開発には、これらの3つの要素が必要です。

JavaScript：クライアントサイドの全ての動作はJavaScriptによって制御されます。これにより、リクエストとレスポンスのサイクルを管理できるようになります。
APIs：サーバーサイドの処理は再利用可能なAPIによって抽象化されます。APIsによって、JavaScriptからHTTP通信を介して操作することが可能です。
Markup：テキストやソースコードは、静的サイトジェネレータ（SSG）やビルドツールによって事前にビルドされます。そのため、サーバーサイドでの動的な処理が不要になります。

これらの要素を組み合わせることで、高速でセキュアなWebサイトやWebアプリケーションを構築することができます。

JAMstackは、こちらのような種類のWebサイトやWebアプリケーションの開発に適しています。

個人サイトやコーポレートサイト：静的なコンテンツで構成されるWebサイトにはJAMstackが最適です。JAMstackにより、高速なページロードと高いセキュリティの実現が可能です。
ブログやCMSを使用したWebサイト：JAMstackは、SSGを用いてCMSのデータを静的なコンテンツに変換することができます。高速なページロードと高いセキュリティを実現しながら、CMSの便利な機能を活用できます。

一方で、JAMstackはユーザーが書き込むたびにデータが増えていく掲示板サイトや、ユーザーごとに異なる内容が表示される会員制のサイトなど、アクセスした時の状況に応じて内容が変わる動的なサイトの開発には向いていません。

JAMstackの開発には、以下のようなフレームワーク、CMS、CDNがよく使用されます。

フレームワーク
- NuxtJS：VueJSベースのフレームワーク。SSGとしてだけではなく、SPAやSSRの実装も可能。
- GatsbyJS：Reactベースのフレームワーク。SSGの機能に特化しており、公式サイトからWordPressのようにテーマをダウンロードすることができる。標準でGraphQLが使用可能。
- HUGO：GO(Golang)ベースのフレームワーク。こちらも公式サイトからテーマをダウンロードできるうえ、多言語に対応している。
HeadlessCMS
- Contentful
- NetlifyCMS
- Strapi
CDN
- Netlify：無料でデプロイ出来る枠が広く、SSL化も自動で行われ、問い合わせフォームやメールサーバー等の機能も簡単に実装出来る。
- Firebase Hosting：Netlifyほど無料枠が広くはないが、静的サイトを簡単にデプロイできる。