こんにちは。Webシステム開発部の竹内です。

イーディーエーではスマホアプリ開発はもちろんWebシステムやWebアプリ開発も請け負っております。

「Webサイトを立ち上げたい」「スマホもWebも対応したアプリを作りたい」という方は是非お気軽にお問い合わせ下さい。

さて今回は、Webアーキテクチャの一つとして近年盛り上がりを見せている「JAMstack」についてまとめていきたいと思います。

• 「JAMstackって何？」
• 「そもそも一般的なWebサイトの構成とはどう違うの？」

上記のような疑問を持つ方にも分かりやすく、ご覧頂ける内容となっております。

<目次>

1. 新たなWebのスタイル「JAMstack」とは何か
2. なぜ近年JAMstackが注目を浴びているのか
3. JAMstackの基本構成とは？
4. 導入を手軽に可能にするツール
5. JAMstackを導入しないほうが良いケース
6. 最後に

1. 新たなWebのスタイル「JAMstack」とは何か

JAMstack（ジャムスタック）とは新たなWebアプリケーションアーキテクチャで、「JAM」は各用語の先頭アルファベットを取った略語です。

JavaScript × API × Markup

簡単に言えば、JavaScriptフレームワークを動かしてAPIを叩き、サイト閲覧者には静的コンテンツのみを配信します。
（参考）JAMスタック公式

サイト閲覧者から見たらデータベースを介さずにWebサイトにアクセスできるため、表示速度やセキュリティの面から大変パフォーマンスが良いです。

余談ですが、「JAM」という名前は従来のWebアーキテクチャの一つ「LAMP」に対抗するために名付けられました。

2. なぜ近年JAMstackが注目を浴びているのか

JAMstackはなぜ昨今、注目を浴びているのでしょうか。

現在のフロントエンド界隈では、UI/UXを高めるためにシームレスな画面遷移を実現したSPA（エスピーエー）でのサイト構築が主流となりつつあります。

SPAとは？
Single Page Applicationの略。
単一ページで構成されたアプリケーション。
静的なHTML + JavaScriptで実現したもので、各ページをJavaScriptがレンダリングする。
アプリのような滑らかな画面遷移が実現されるため、サイト閲覧者にとっては極力ストレスを感じさせない動きになる。

SPAの流行にあわせて、Googleも2021年6月に「Core Web Vitals」というWebパフォーマンス指標を検索アルゴリズムに反映しています。

「Core Web Vitals」には、UX(より良いユーザー体験）を追求しているサイトを評価するということが書かれています。
(参考)Core Web Vitals の指標のしきい値の定義

しかし、SPAはJavaScriptを実行してから画面を作るので、SEOの観点からGoogleのクローラーがHTMLを読み込むのに時間がかかり正確にSEO評価してくれなかったり、OGPタグが読み込めなかったりと不安要素が残っています。

Webサイト管理者にとっては、SEOとサイトパフォーマンスの両立は是非実現したいです。

そんな中で登場したのがJAMstackです。

JAMstackで開発したWebサイトは「静的サイトジェネレーター（SSG）」というものが全ページ分の静的ファイル（HTMLやCSS）を事前に配信するため、サイト閲覧者側ではページ遷移したときにあらかじめ配信されたファイルを読み込むだけです。

あらかじめ配信されたHTMLを読み込むだけなのでSEOやOGPタグの懸念はなく、むしろ高速かつセキュリティ性が高いWebサイト構築が実現できます。

(参考) Jamstack | 2021 | The Web Almanac by HTTP Archive

（参考）国内でJAMstackを使ったサイト事例（ページ下部）

3. JAMstackの基本構成とは？

従来サイト（LAMP等使用の場合）

リクエストごとにサーバー側でDBにアクセスしてコンテンツを表示させるため、パフォーマンスや表示速度にムラが出てしまいます。
一般的なWebサイトはこれにあたります。

SPAなサイト

あらかじめ静的なHTMLとCSSファイルを読み込み、APIを通じて動的にコンテンツを取得するためパフォーマンスは上がりますが、Googleクローラーが正確に読み取ってくれないのでSEOの観点で懸念が残ります。

JAMstackなサイト

「え・・？これだけ・・？」と思うかもしれませんが、これだけです。静的ファイルを読み込んで終わりです。

動的コンテンツの表示も上記で対応しています。

実は裏側でごちゃごちゃ動いていて、APIからデータを事前に読み込み、それを埋め込んだ静的ファイルを作成しています。

つまりJAMstackの決定的な特徴は、

サイト閲覧者はあらかじめ設置されたファイルをただ読み込むだけとなるので、表示速度やセキュリティで常に高いパフォーマンスを保つことができます。

4. 導入を手軽に可能にするツール

JAMstackの基本的な構成はイメージできましたか？

• 「パフォーマンスが良いのは分かったけど、結局ビルドとかSSGとかよく分からないし導入のハードルが高いんじゃないの？」
• 「運用が面倒くさそうだから今のままでいいや・・」
• 「でも、お高いんでしょう〜？」

といったことを気にしている方も多数いらっしゃると思います。

ですが、JAMstackはハードルの高いものではありません。

「ヘッドレスCMS」「静的サイトジェネレーター」「ホスティングサービス」これらを使えば、全て手軽に解決できます。

今回は数多くある中からおすすめなサービスをピックアップします。

ヘッドレスCMS

簡単に言えば、管理画面とAPIだけを提供してくれるCMSです。

管理画面からコンテンツを投稿すると、json形式でAPIを配信してくれます。

自由にAPIパラメータも設定できるので、柔軟な設計が可能かつ管理画面からAPIの追加削除が出来るため管理もしやすいのが特徴的です。

基本的には会員登録さえすれば、無料で使用できます。（有料プランも勿論あります）

■ microCMS (https://microcms.io/)

• 初心者向け
• 純国産のためドキュメントが日本語対応
• UIが分かりやすく非ITの方にも操作しやすい
• 小規模なサイトの場合無料プランで事足りるが、大規模だとスペックが物足りない

■ Contentfull (https://www.contentful.com/)

• とにかく自由にカスタマイズしたい人向け
• 無料枠で出来ることが多い
• 最も知られているヘッドレスCMSのため有志のモジュールなんかもある
• 他と比べ有料枠のコスパ最強

静的サイトジェネレーター（SSG）

ヘッドレスCMS等で配信されたAPIをJavascriptベースのテンプレートに埋め込み、静的なHTMLを作成するライブラリです。

これのおかげで静的なHTMLにも関わらず動的なコンテンツを配信することが可能になります。

Javascriptのフレームワークが用いられており、ReactやVueがベースとなるものがほとんどです。

■ Gatsby(https://www.gatsbyjs.com/)

• Reactベースのフレームワーク
• GraphQLを使用しており、プラグインも豊富

■ Next.js(https://nextjs.org/)

• Reactベースのフレームワーク
• 静的サイト以外にもSPAでも使用可能

■ Nuxt.js(https://nuxtjs.org/)

• Vueベースのフレームワーク
• 名前から分かる通り、Next.js を意識して作られた
• Vueを使うならこれ一択

ホスティングサービス

静的なHTMLをCDNを通して配信してくれるサービスです。

中には、GitHub 等と連携することでソースをプッシュしたタイミングで自動的にSSGを動かしてビルドまでしてくれるものもあります。

■ Netlify(https://www.netlify.com/)

• 最も代表的なホスティングサービス
• GitHubと連携するとソースをプッシュしたタイミングでビルドからホスティングまで行ってくれる

■ Vercel(https://vercel.com/)

• 無料プランでほぼフル機能使用できる
• Netlifyと同様にGitHubやGitLabとの連携が可能
• Next.jsの開発もとの会社のため親和性が高い

5. JAMstackを導入しないほうが良いケース

ここまでJAMstackの魅力をお伝えしてきましたが、導入するべきかの判断は状況によって変わります。

開発体制が必要

WordPressのようにあらかじめテンプレートを読み込んで管理画面を使ってレイアウトを組み替えることが出来ないので、画面を自前で用意する必要があります。

ただ、開発者側にとっては画面のみを作成するだけなので、通常のWebサイトを構築するより格段に作業工数の圧縮が可能です。

よって開発者は必要ですが、もし開発体制が整っているならばJAMstack導入はおすすめです。

ユーザーによって画面を切り替えたい時

JAMstackはあくまでも静的なHTMLを配信するのみです。

そのためユーザーによって動的に画面を変えるWebサイトには不向きです。

ただ、ページごとに導入することは可能です。

例えば、LPはJAMstackで構築して、他はSPAやSSRを使用するなど柔軟な導入も可能です。

プラグインの物足りなさ

ヘッドレスCMSには、WordPressのような細かなSEO対策設定が出来るプラグインやプレビュー機能などがありません。

Contentfullのように有志がプラグインを提供しているものもありますが、まだ歴史が浅いためプラグインの物足りなさは否めません。

ただ、JAMstack構成が増えている近年の現状を見るに、これらに対応するプラグインがリリースされたり、新たなヘッドレスCMSが登場する可能性は大いにあります。

6. 最後に

メリットもデメリットもあるJAMstackですが、Webサイトを作成する時の選択肢として有力なのは変わりありません。

この記事を読んで、

• 「自社サイトのセキュリティが心配になってきた」
• 「Webサイトの表示速度が遅いと感じた。もっと早くしたい」

上記、課題をお持ちであれば、導入をおすすめします。

イーディーエーはアプリ開発、Web開発ともにお客様の状況にあわせて、最適なアーキテクチャをご提案しています。

JAMstackが気になった方はお気軽にご相談ください。

お問い合わせはこちら