Jamstack

Jamstack を分かりやすく？

Jamstackとは、JavaScript、APIs、Markupの頭文字を取ったものです。これは近年特に注目されているWeb開発のアーキテクチャで、パフォーマンスの向上、より高度なセキュリティ、低コスト、より良い開発体験を実現することを目指しています。

さて、それではJamstackを例え話で説明してみましょう。

伝統的なWeb開発のアプローチを、レストランで料理を注文することに例えてみます。あなたが料理を注文すると、シェフはキッチンで料理を作り、それをウェイターがあなたのテーブルまで運びます。このとき、料理が完成するまでの間、あなたは待たされるわけです。これが、サーバーサイドレンダリングやデータベースクエリを伴う伝統的なWeb開発のアプローチです。

一方、Jamstackのアプローチは、予め料理（Webページ）を作っておき、顧客（ユーザー）が注文するとすぐに出すビュッフェスタイルのレストランに似ています。料理は予め作られているため、顧客は注文後すぐに料理を受け取ることができ、また、シェフは一度に多くの料理を作ることができます。これにより、Webページの読み込み時間が大幅に短縮され、同時に多くのユーザーをさばくことができるわけです。

つまり、Jamstackはあらかじめ静的に生成されたページを配信し、必要に応じてクライアントサイドでJavaScriptを使って動的な機能を追加するというアプローチを採用しています。そのため、サーバーサイドでの処理を最小限に抑えることができ、結果として高速なページロードと優れたパフォーマンスを実現することができます。

一体ナンノコッチャ？って思うかもしれませんが、要するに、Jamstackはよりスムーズで迅速なWeb体験を提供するための新しいアプローチなんですよ。ここまで大丈夫ですか？

まとめると、Jamstack とは、JavaScript、API、マークアップの略で、静的サイトジェネレーターや、CDN などを利用して高速でセキュアなウェブサイトを構築するアーキテクチャのことを指します。

Jamstack のメリット

従来のウェブサイトは、サーバーサイドレンダリングを行い、HTML をサーバーからクライアントに送信するため、データの変更がある場合には、サーバーから再度 HTML を生成して、クライアントに送信する必要がありました。このため、リクエストが多い場合や、大量のコンテンツを含む場合、ウェブサイトの表示速度が遅くなることがありました。

一方で、Jamstack では、事前に HTML を生成し、CDN にキャッシュすることで、ウェブサイトの表示速度を大幅に高速化することができます。また、API を活用することで、必要に応じてデータを動的に取得することができます。

Jamstack に対応した 3 大フレームワーク

フレームワークの選定は、Jamstack アプリケーションを構築する上で重要なポイントです。以下の表は、Jamstack アプリケーションを構築する上で、フレームワークの選定に役立つ情報をまとめたものです。

難易度は Next.js が一番高く、Astro が一番低い（日本語ドキュメントも充実しているから）。とっつきやすいのは、Astro で、機能を実装しやすいのは Gatsby.js 。今後楽しみなのは Astro。

ヘッドレス CMS

ヘッドレス CMS（Content Management System）とは、従来の CMS がフロントエンドの表示（"head"と呼ばれる部分）とバックエンドのコンテンツ管理を一体化していたのに対し、ヘッドレス CMS ではこれらを分離し、API を通じてコンテンツを配信するシステムを指します。これにより、ウェブサイトだけでなく、スマートフォンのアプリ、IoT デバイス、AR/VR デバイスなど、様々なプラットフォームに対応したコンテンツ配信が可能になります。

これらの CMS はそれぞれ特性や特徴が異なるので、使用するプロジェクトの要件に応じて選択することが重要です。

最も人気のあるヘッドレス CMS contentful の料金表です。

Contentful Pricing | Contentful

Jamstack × TypeScript × Next.js

以下のコードは、Next.js と TypeScript を利用して、Jamstack アプリケーションを構築する例です。getStaticProps という関数を利用することで、事前に HTML を生成することができます。

import { GetStaticProps } from 'next'
import { useState } from 'react'

type Props = {
  items: string[]
}

export default function Jamstack({ items }: Props) {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>Items</h1>
      <ul>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <p>You've clicked the button {count > 0 ? count : 'no'} times.</p>
    </div>
  )
}

export const getStaticProps: GetStaticProps<Props> = async () => {
  const items = ['Item 1', 'Item 2', 'Item 3']

  return {
    props: {
      items,
    },
  }
}

そして、Jamstack では、サーバーサイドでデータを生成して、静的ファイルとしてクライアントに提供することで、サイトの表示速度を向上させます。この方式によって、サーバーサイドの処理が必要ないため、サーバー負荷が軽くなり、セキュリティが向上します。

また、Jamstack では、サーバーレスアーキテクチャを採用することができます。これは、サーバーレスコンピューティングサービス（例：AWS Lambda、Azure Functions、Google Cloud Functions など）を使って、サーバー側の処理を行うことができる方法です。サーバーレスコンピューティングでは、必要なリソースのみが使用されるため、コストを削減することができます。

Jamstack を利用するためには、静的サイトジェネレーター（例：Gatsby、Next.js、Hugo、Jekyll など）や、API との連携を行うためのフレームワーク（例：Nuxt.js、Next.js）などを使用することが一般的です。また、コンテンツ管理システム（CMS）との連携により、コンテンツの更新を容易にすることもできます。

以下は、Next.js と TypeScript を使用した Jamstack アプリケーションの例です。

import { useState, useEffect } from 'react'
import axios from 'axios'

const Blog = () => {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await axios.get('/api/posts')
      setPosts(data)
    }
    fetchData()
  }, [])

  return (
    <div>
      <h1>Blog</h1>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  )
}

export default Blog

この例では、API を介してデータを取得し、それを使用して React コンポーネントをレンダリングしています。このように、サーバーサイドでデータを生成して静的ファイルとして提供することで、Jamstack のメリットを享受することができます。