JAMstackとは何か?

はじめに

Webサイトの技術は色々なものがあり、私達がWebサイト、サプリを制作する時には「ライブラリ」「フレームワーク」等の先人達の偉大な知恵を借りて制作することがほとんどです。
それに伴って「LAMPstack」「MEANstack」のように、「〇〇stack」と呼ばれる開発を効率的に行うことのできるフレームワーク、ライブラリ、言語の組み合わせといったものも数多く誕生しました。
今回は最近登場してきた、「JAMstack」という新しいWeb開発のスタックについて紹介します。

JAMstackとは？

JAMstackは、Netlifyの創業者Matt Biilmann氏が提唱した新しいフロントエンド開発のスタックです。
それぞれ

• J・・・Javascript
• A・・・API
• M・・・MarkUp

の頭文字をとって作られた言葉です。
「LAMPstack」や「MEANstack」は特定のOS、ライブラリ、フレームワークを指していたのに対し、JAMstackは少し抽象的な概念ですが、それぞれの部分を詳しく解説すると、

Javascript

すべてのクライアントサイド（フロントエンド側）はJavascriptによって構成され、リクエストとレスポンスのサイクルを管理していること。

API

すべてのサーバーサイド（バックエンド側）またはデータベースは、再利用可能なAPIで構成され、JavascriptによってHTTP通信経由で操作されること。

Markup

テキストやソースコードは、SSG(静的サイトジェネレータ)やアプリケーションのビルドツールによって事前にビルドされていること。



要約すると、Javascriptによって構成、制御され、SSG等で事前にビルドされたサイトということになります。

メリット

高速

事前にビルドされた静的ファイルを読み込むので、とても高速です。
フロントエンドの開発方法としては、SPA（Single Page Application）や、SSR（Server Side Rendering）もありますが、

• SPA・・初回のロード時間が長いため、SEOで不利
• SSR・・実装がやや難しい

といった問題もあります。
JAMstackによって実装すると、SPAよりも高速なサイトがSSRに比べて比較的簡単に作成できます。

強いセキュリティ

処理はクライアントサイドで行われ、サーバーサイドの処理はAPIによって抽象化されているため、セキュリティの対策も限定され、セキュリティの強いサイトを作成することができます。

安価

CMSなどのサーバーサイドに存在するデータは、ビルド時に静的なコンテンツとして処理され、NetlifyなどのCDN（Content Delivery Network）に無料で公開できるため、レンタルサーバーやクラウド上にサイトをデプロイする必要が無くなります。NetlifyはSSL化も無料で行うことができるため、サイト作成にかかる費用、維持費は従来に比べて格段に抑えることができます。

開発のしやすさ

サーバーサイドのプログラムを書く必要が無くなり、お問い合わせフォームの作成やメール受信機能など、Netlifyなどの外部サービスに委託できることも多くなるので、その分フロントエンドの開発に集中することができ、開発効率が向上します。

JAMstackで開発するのに向いているサイト

個人サイト、コーポレートサイト

JAMstackは静的なコンテンツの作成に特化した技術スタックです。なので静的なコンテンツで構成されている個人サイトやコーポレートサイトにおいてその真価を発揮します。

ブログなどのCMSを使用したWebサイト、アプリケーション

SSGはビルド時にCMSのデータを取得し、静的なコンテンツとすることができます。
例えば、GatsbyJSというReactベースのフレームワークは、プラグインを使うことでビルド時にCMSのデータを抽出することができるようになります。デプロイ時にはもうCMSのデータは入っている状態なので、PHPなどのサーバーサイドの言語を書くこともなく、DBを用意する必要も無くなります。
また、CMSに障害が出たとしてもすでにデータは取得してあるのでサイト本体は全く影響を受けません。
速度、安定性の面から考えてJAMstackでCMSを用いたブログ等のアプリケーションを作成するのはメリットが大きいです。

JAMstackで開発するのには向かないサイト

動的なサイト

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

JAMstackの代表的なフレームワーク、CMS、CDN

SSG

• ・NuxtJS

VueJSベースのフレームワーク。SSGとしてだけではなく、SPAやSSRの実装も可能。

• ・GatsbyJS

Reactベースのフレームワーク。SSGの機能に特化しており、公式サイトからWordPressのようにテーマをダウンロードすることが可能な上、標準でGraphQLが使える。

• ・HUGO

GO(Golang)ベースのフレームワーク。こちらも公式サイトからテーマをダウンロードできる上に、多言語に対応している。

HeadlessCMS

• ・Contentful
• ・NetlifyCMS
• ・Strapi

CDN

• ・Netlify
無料でデプロイ出来る枠が大きい上に、SSL化も自動で行われ、お問い合わせフォームやメールサーバー等の機能も簡単に実装出来る。
• ・Firebase Hosting
Netlifyほど無料枠が大きくはないが、静的サイトを簡単にデプロイすることが出来る。

まとめ

そしてJAMstackの登場により、フロントエンドの開発が更に効率的になりました。今後サーバーレスWebサイト、アプリケーション開発の流れはますます加速していくことでしょう。
この記事がJAMstackを使用したモダンなフロントエンド開発の助けになれば幸いです。