こんにちは、キノトロープアカデミーです。
「キノトロープアカデミー」は、Web業界のトップランナーである株式会社キノトロープの社員が講師を務めるオンラインアカデミーです。リモートワーク時代に不可欠な「個のスキル」を高め、職人のような「匠」を目指す人を増やしたい。そんな願いを込め、基礎から経営判断、業務フローまで、一生モノのナレッジを惜しみなく公開していきます。
Jamstackとは？ についてお伝えします。
担当は濱田です。
従来のサーバーを介して動的にページを構築するWebサイトとは異なり、Jamstackはあらかじめ生成した静的HTMLを直接ストレージから返却するサーバーを介さない最先端の開発手法です。
このシンプルな仕組みにより、表示スピードの圧倒的な向上やハッキング対象を隠すことによるセキュリティリスクの軽減、大量アクセス時の高負荷耐性といった劇的なメリットを実現できます。
運用の自動化やデータ管理にはJavaScript、SSG、ヘッドレスCMSといった専門的な知識やツール連携が必要となりますが、コーポレートやメディアといった静的サイトのUX・SEO改善に極めて高い価値をもたらします。
”Jamstackとは？”をテーマに、
今日お伝えしたいことは3つあります。
Jamstackとは、フロントエンドのWEB開発手法のひとつです。静的HTMLをあらかじめ生成しておくことで、静的なWEBサイトをより素早く表示させられます。
なお「Jamstack」は、次の頭文字からできた言葉です。
J：JavaScript（プログラミング言語の１つ）
A：API（データをやり取りする仕組みの１つ）
M：Markup（WEBサイトを表示するためのHTML・いわゆるフロント部分）
stack：システム構成のこと
「JavaScript」と「API」については、現状のJamstackの定義では必須の技術ではありません。そのため、かつては「JAMstack」と大文字表記されていましたが、現在は「Jamstack」と表記されることが一般的です。
Jamstackを理解するためには、そもそも従来のWEBサイトの仕組みを知る必要があります。ここからは、WEBサイトをサーバーサイドで作る場合とクライアントサイドで作る場合の仕組みについて解説します。
まず、サーバーサイドで作る場合です。サーバーサイドでWEBサイトを表示させることは、サーバーサイドレンダリング（SSR）と呼ばれています。
仕組みについては以下のようになります。
1. ブラウザからURLにアクセス
2. サーバーはデータベースからデータ取得
3. サーバーでページ構築
4. サーバーからブラウザにページ返却
ユーザーがブラウザからURLにアクセスすると、サーバーはデータベースにデータを取りに行きページを構築します。
そして、ブラウザにページを表示させるのがサーバーサイドレンダリングです。
これがWEBサイトの基本的な仕組みです。構成要素は少なくシンプルな流れですが、必ずサーバーが必要になります。
次に、クライアントサイドで作る場合の仕組みです。
1. ブラウザからURLにアクセス
2. ストレージからブラウザにページ返（JavaScript）
3. ブラウザはサーバーへコンテンツを取得しに行く
4. サーバーはデータベースからデータ取得
5. サーバーからブラウザにデータ返却
6. JavaScriptコードを実行じ、返却されたデータからコンテンツを表示
クライアントサイド、つまりブラウザでページを作る手法もあります。
ブラウザでURLにアクセスすると、予めページが置かれているストレージからページ（JavaScriptファイル）が返されます。
その後、ブラウザはサーバーにコンテンツを取得しにいき、サーバーはデータベースにデータを取りにいき、サーバーからブラウザにデータを返却します。
この一連の流れがクライアントサイドレンダリング（SCR）です。クライアントサイドレンダリングは、ユーザー数（アクセス数）過多になった場合にサーバー負荷を減らしやすいといわれています。
しかし、必ずサーバーが必要になることはサーバーサイドレンダリングと同様です。
従来のWEBサイトの仕組みには必ずサーバーを介することから、これらの問題点や課題があったためJamstackが必要とされました。
表示スピードが遅い
サーバーの処理能力の限界
セキュリティに関する懸念
まず一つ目に、「表示スピードが遅い」点です。
サーバーサイドレンダリングもクライアントサイドレンダリングも、サーバー・データベースとのやり取りが必要です。そのため、ブラウザにコンテンツを表示させるまでにどうしても時間がかかってしまいます。
二つ目が、「サーバーの処理能力の限界」です。
サーバーとやり取りする必要があるということは、サーバーの処理能力に依存することになります。
急激なアクセス増などでサーバーの処理能力が限界を迎えると、コンテンツを表示できないことは従来の手法の大きな課題です。
三つ目が「セキュリティに関する懸念」です。
ブラウザ（ユーザー）がサーバーにアクセスするということは、それだけサーバーが無防備な状態であるともいえます。
いわゆる脆弱性を抱えている状態になるため、不正アクセスを防ぐ仕組み、監視する体制を築かねばならず、セキュリティ対策に対する懸念もありました。
従来のサーバーを介した仕組みは、さまざまな課題を抱えていることがお分かりいただけたでしょうか。
従来の仕組みに対して、Jamstackはサーバーを介しない仕組みであることが特徴です。
Jamstackでは、あらかじめストレージにすべてのページ（静的HTML）を置いておきます。
ユーザー（ブラウザ）がアクセスした際は、
既に生成されているページ情報をそのまま返却するため、サーバーが登場しません。
1. ユーザー（ブラウザ）がURLにアクセス
2. ストレージに用意してあるページを返却
極めてシンプルな仕組みといえます。
次に、Jamstackを使うメリットとしては以下の3つが挙げられます。
表示スピードが上昇する
セキュリティリスクを防ぎやすい
大量のアクセスを効率的に処理できる
それぞれの具体例を挙げてしていきます。
まず一つ目の「表示スピードが上昇する」点です。
Jamstackはサーバーを介さずページを表示するため、表示スピードが上昇します。
表示スピードが早いことはSEOでも重視され、UXを向上させることにもなるためJamstackの大きなメリットといえるでしょう。
次に、「セキュリティリスクを防ぎやすい」点です。
サーバーを介さないということは、セキュリティリスクを防ぎやすいことにつながります。
たとえば一般的なCMSである「WordPress」であっても、多くの脆弱性が報告されていることをご存知でしょうか。従来のWEBページを構築する仕組みでは、どうしてもセキュリティ対策が難しい場合があります。
一方、Jamstackはページを事前生成して静的HTMLを返す仕組みなので、そもそもハッキングの攻撃対象が隠されています。
悪意のある第三者からWEBサイト・情報を守りやすいことは、Jamstackならではの特徴です。
三つ目に「大量のアクセスを効率的に処理できる」点です。
Jamstackは生成済みのページをブラウザに対してそのまま返すという仕組み上、大量のアクセスがあってもダウンしづらいことも特徴です。
アクセスに対する負荷がほとんど存在しないため、スケーラビリティがあるともいえます。
一方で、メリットがあれば少なからずデメリットもあります。
デメリットとしては、次の3つが挙げられます。
運用において技術的な知識が必要
インタラクティブな要素を組み込めない
デザイン変更にコードを扱う必要がある
Jamstackを導入する場合、これらのデメリットについても理解しておきましょう。
まず「運用において技術的な知識が必要」な点について、Jamstackを運用するためには技術的な知識が必要になります。
既存のスタッフだけで対応することは、ほとんどの企業にとって難しいのではないでしょうか。一般的なWEBサイトのように簡単に構築できないことは、Jamstackのデメリットです。
なお、Jamstackの運用にあたって必要となる知識・技術については、JavaScript、SSG、API、ヘッドレスCMS、CDNなどが挙げられます。
次に「インタラクティブな要素を組み込めない」点について、Jamstackで表示されるのは、静的なコンテンツのみです。
つまり、ユーザーの挙動によって内容が変わるインタラクティブな要素を組み込めないことは、Jamstackの弱みといえます。
静的なコンテンツとは、コーポレートサイトやサービス紹介サイトなど、だれがいつ見ても同じ内容が表示されるページです。
一方、動的なコンテンツとは、閲覧するユーザー、閲覧するタイミングによって内容が変わるページです。ECサイトのレコメンド機能や、SNS等の投稿コンテンツ、会員機能のついたWEBサイトなどが挙げられます。
最後に「デザイン変更にコードを扱う必要がある」点です。
Jamstackを導入しているWEBサイトでデザインを変更する場合、コードを扱わなければなりません。
WordPressやノーコードツールであれば、多少の知識があれば簡単にデザイン変更が可能です。
一方、Jamstackを導入している場合は、HTMLやCSS以外にJavaScriptなどのコードにおこす必要があります。
色を変えたり、ボタンの位置をずらしたりするだけだとしてもエンジニアに依頼しなくてはならないことはデメリットといえるでしょう。
Jamstackの構成がおすすめのWEBサイト、おすすめしないWEBサイトについて紹介します。
Jamstackの構成に必要なツール・技術としては、次のような例が挙げられます。
ヘッドレスCMS
SSG（静的サイトジェネレーター）
ホスティングサービス
JavaScript
API
CDN（コンテンツ・デリバリー・ネットワーク）
このうち、特に重要なのが「ヘッドレスCMS」、「静的サイトジェネレーター」、「ホスティングサービス」です。Jamstackで構築されているWEBサイトでは、事前にページを生成していく必要があります。
たとえばメディアサイトで新規記事を投稿したい場合、「ヘッドレスCMS」で記事を追加します。ヘッドレスCMSで更新された情報が「静的サイトジェネレーター」に通知されると、静的ページが生成されます。
その後ホスティングサービスにページが設置されることで、Jamstackの準備が整うのです。
また、静的サイトジェネレーター（SSG）は静的なページを作るツールです。ヘッドレスCMSでWEBサイトが更新されると、WEBサイト全ページの静的ファイルが生成されます。
このとき、不要なJavaScriptがあれば排除してくれますし、外部リソースの読み込み最適化も行ってくれることが特徴です。
なお、全ページの静的ファイルが生成されるという特性上、大規模なWEBサイトではページ生成に時間がかかることがあります。
静的サイトジェネレーターも非常に多くのサービスがありますが、次の4つが代表的です。
● Next.js｜Reactベース（中規模〜大規模サイト向け。SSRやISRも対応可能）
● Nuxt.js｜Vueベース（小〜中規模サイト向け。SSRやISRも対応可能）
● Gatsby（純粋な静的サイトジェネレーター。SSR未対応）
● Astro（フレームワークやライブラリを組み合わせて利用可能）
最後にホスティングサービスについて、ホスティングサービスはJamstackの仕組みにおいてページを配信する役割を担っています。
従来のWEBサイトを表示する仕組みにおける「サーバー」とほぼ同等の存在です。
なお、ホスティングサービスはサイト配信だけではなく、CDNからの配信やバックエンド処理などの役割も担っています。
この点がサーバーとホスティングサービスの大きな違いです。
ホスティングサービスの代表例は次の4サービスです。
● Vercel（Next.jsと相性がいい）
● Netlify（世界中で利用されている）
● Cloudflare Pages（無料で利用できる範囲が広い）
● AWS Amplify（AWSが提供するフルスタック開発プラットフォーム）
最後にまとめです。Jamstackは従来型のWEBサイトの仕組みと異なり、ページ表示速度やセキュリティ面に強みのある仕組みです。
専門的な知識と技術が必要になりますが、メディアサイトやコーポレートサイトに導入する価値があるといえます。
静的コンテンツをメインに運用されている方は、ぜひJamstackの導入を検討してみてください。
最後までご覧いただきありがとうございました。
の３点についての内容でした。
