Jamstack（ジャムスタック） とは

最近、Jamstack という言葉をよく聞くようになりましたね。

Jamstack が実際に何を意味するのかという境界線が曖昧になり始めていますが、For fast and secure sites | Jamstack で次のように書かれています。

Jamstack は、データやビジネスロジックから Web 体験層を切り離すアーキテクチャアプローチであり、柔軟性、スケーラビリティ、パフォーマンス、および保守性が向上します。Jamstack は、ビジネスロジックが Web 体験を決定する必要性を排除します。これにより、カスタムロジックとサードパーティサービスが API を通じて消費される Web のための組み合わせ可能なアーキテクチャが可能になります。

カタカナ表記が多すぎてナンノコッチャ？と思いますよね。

分かりやすく説明すると、Jamstack は、インターネット上のページを作るための方法のひとつで、データや仕組みからページの見た目を分けることで、より低コストで、安全で速く、メンテナンス性もよく、大量のアクセスにも強いページを作れるようになるんです。

Jamstack のおかげで、仕組みが見た目にどう影響するかを心配することがなくなります。

「Jamstack」はもともと「JAMstack」と呼ばれていました。「JAM」は JavaScript、API、Markup を表していました。

• JavaScript
• APIs
• Markup

Jamstack（JavaScript、API、およびマークアップのスタック）は、高速で堅牢なウェブサイトおよびアプリケーションを構築するためのアーキテクチャです。つまり、JavaScript という言語を用いて API をたたいて Markup を配信します。

API という言葉もふんわりしていて難しいですよね。API というのは、「アプリケーション・プログラミング・インターフェース」の略で、コンピューターやインターネット上のサービスがお互いに話しかけて、情報をやり取りするためのルールや方法なんです。

例えば、お天気の情報を教えてくれるアプリがあるとします。そのアプリは、お天気の情報を持っているサービスと、API を使って情報を交換します。そうすることで、アプリは最新のお天気情報を得ることができます。

API は、コンピューターやアプリがお互いに助け合って、いろいろな機能を使えるようにする仲間のようなものです。

Jamstack の考え方については、PDF:Modern Web Development on the JAMstack をご覧ください。

なぜ、WordPress から Jamstack へ乗り換えるとよいのか？

最近、モノリシック（※1）な WordPress から Jamstack へ乗り換える企業様が増えています。なぜでしょうか？

Wordpress は、コンテンツの作成を容易にしましたがパフォーマンスとセキュリティに⼀連の課題をもたらしています。使いやすい反面、アクセスが増えるとサーバに負荷がかかり重くなり、コストも保守もセキュリティ問題も心配です。プラグインの脆弱性・ハッキング・悪質サイトへのリダイレクト・ウイルスの埋め込みなどの懸念もありますし、アップデートせず古いバージョンのまま放置していると、サイトが乗っ取られる可能性もあります。

このようにデータベースを活⽤したコンテンツによって、サイトがクラッシュしたり、誰も注意深く⾒ていないときにサイトがハッキングされたりするという、⾮常に現実的な脅威に直⾯することになります。

一方、Jamstack はフロントエンドとサーバーサイドを分離したことで、軽量で速度や安全性が大幅に向上。データと見た目が分かれているため、柔軟なデザインが可能です。サーバーやデータベースの脆弱性を心配する必要もありません。

また、ビルド後は高速表示されるので、JAMstack サイトは、今⽇のモバイル ファーストの厳しい要件を満たすのに⾮常に適していますし、Google の SEO にも有利です。JAMstack サイトが Google Lighthouse のような速度テストで最⾼のスコアを達成するのは、驚くべきことではありません。

さらに、API を利用して他のサービスと連携できるので、自由度が高くなります。WordPress の問題点を克服しつつ、新たな可能性を提供する Jamstack は、これからの Web 制作に適したアプローチというわけです。

※1 モノリシックとは？

WordPress などのようなモノリシックWebアーキテクチャは、フロントエンドとバックエンドコードが1つの大きなコードベースに編成されているWebアーキテクチャです。これは、1つの大きなコードベースを維持および管理する必要があるため、開発と保守が困難になる可能性があります。また、アプリケーションの1つの部分に問題があると、アプリケーション全体がダウンする可能性があります。

一方、JAMstackは、JavaScript、API、Markdown、および静的Webサイトジェネレーターを使用してWebサイトを構築する手法です。このアーキテクチャは、コードとコンテンツを分離することで、モノリシックアーキテクチャの多くの問題を解決します。これにより、開発と保守が容易になり、Webサイトのパフォーマンスが向上します。

JAMstackは、モノリシックアーキテクチャよりもスケーラブルで信頼性の高いWebサイトを構築するために使用できます。また、開発と保守も容易です。

なぜ、移行しづらいのか？

WordPress から Jamstack へ、なかなか移行できないサイトも多いですが、これはなぜでしょうか？

理由の一つに、Jamstack の開発がWordPress より 開発工数も学習コストもかかってしまうというのがあると思います。

WordPress は、プラグインで機能を追加できるのでプログラミングの知識がなくても簡単に扱えますが、Jamstack は、場合によっては次のような学習が必要なために、敷居が高くなっています。そして、そられのライブラリなどを使いこなすには公式ドキュメントを理解する必要があるので、英文ドキュメントだった場合は英文読解力も必要です。

• TypeScript
• React
• API
• Node.js
• ライブラリの知識（Next.js, Gatsby, Nuxt.js など）
• CSS-in-JS（styled-components, emotion, Tailwind CSS など）
• UIコンポーネントの開発
• クライアントライブラリの知識
• データベースプラットフォームの知識
• ORM の扱い方
• SaaS の使い方
• 認証サービスの組み込み方
• EコマースAPI
• テスト
• Git
• GitHub Actions（自動テストとデプロイ実行）
• ヘッドレス CMS（Contentful, microCMS, Strapi など）
• ホスティングサービス（Netlify, Vercel, AWS Amplify, Firebase など）

そもそも、WordPress で簡単に実装可能だった機能を、Jamstack では SaaS もしくは、自分で実装する必要があるため、知識がないと開発に時間がかかります。例えばブログであれば次のような機能です。

• 関連記事の自動表示
• ページネーション自動分割（一覧、詳細、アーカイブ）
• 検索機能
• 問い合わせフォーム

加えて、WordPress で表示している記事を Jamstack に移行するには、データの移行が必要です。WordPress は、データベースにデータを保存しているのに対し、Jamstack は、データを JSON ファイルとして保存するため、記事数が数百ページもある場合、マークダウンやデータの変換作業やコンテンツのチェックなどが非常に大変です。

とても素人の方では大変なのではないでしょうか。「Jamstack はとても素晴らしい仕組みなのに開発がややこしい」と感じて、重い腰が持ち上がらないという方が多いのではないかと考えられます。

しかし、Jamstack 専門の会社などに開発を依頼すれば、そのあたりの問題は解決できるわけです。

それでは、Jamstack のメリットについて掘り下げて見ていきましょう。

Jamstack のメリット

Jamstack の利点は、安全性、スケーラビリティ、パフォーマンスの向上、および開発プロセスの改善などが挙げられます。ただし、Jamstack にはいくつかのデメリットもあります。

簡単にまとめると、メリットの恩恵が多く、デメリットは「開発の敷居が少し高い」くらいなので、例えば 脆弱性の問題が多い WordPress などの CMS から Jamstack に移行することは、非常に有益なことです。

次は Next.js を用いたソースコードです。非常に簡潔な記述でページを高速表示できますが、複雑な機能を実装するには、まだまだネットや書籍に情報が少ないのもあって学習コストがかかります。

export default function Home() {
  return <h1>ページが表示されます</h1>
}

3 大フレームワーク

それでは、Jamstack を扱うためのツール選定のポイントを見ていきましょう。とりあえず、抑えておいて問題ないフレームワークを比較しました。どれも TypeScript は扱えます。

WordPress と同等の機能を実装するなら、プラグインが充実している Gatsby.js が最も簡単です。認証機能など動的な処理や複雑な機能を実装するなら、Next.js が最も適しています。パフォーマンス重視かつコーポレートサイトやポートフォリオなど、シンプルなサイトを作るなら、Astro が最も適しています。

ヘッドレス CMS

Jamstack で作られたサイトは、コンテンツ管理システム経由で制御することができます。これらは通常、ヘッドレス CMS と言われています。例えば次のサービスがあります。

Netlify CMS は、静的サイトジェネレーターとの統合に重点を置いたシンプルで使いやすい CMS です。使いやすいインターフェースと、カスタムフィールドとカスタムタイプを作成できる柔軟なデータモデルが特徴です。

Contentful は、充実した API、柔軟なデータモデル、データの再利用と共有を特徴とする、より高度な CMS です。オープンソースでカスタマイズ可能で、マルチテナントにも対応しています。

Strapi は、オープンソースでカスタマイズ可能、マルチテナントである、開発者に人気の CMS です。柔軟なデータモデルと、さまざまなプログラミング言語との統合を特徴としています。

それぞれの CMS には長所と短所があるため、ニーズに合った CMS を選択することが重要です。静的サイトジェネレーターとの統合に重点を置いたシンプルで使いやすい CMS をお探しの場合は、Netlify CMS が適しています。

充実した API、柔軟なデータモデル、データの再利用と共有を特徴とする、より高度な CMS をお探しの場合は、Contentful が適しています。

オープンソースでカスタマイズ可能、マルチテナントである、開発者に人気の CMS をお探しの場合は、Strapi が適しています。

例えばヘッドレス CMS の contentful と組み合わせると、コンテンツの管理も簡単にできます。従来の CMS では、テンプレートエンジンやプラグインを使ってデザインや機能を追加・変更していましたが、ヘッドレス CMS では API を通じてデータを取得・送信することで、フロントエンドとバックエンドを自由に組み合わせることができます。これにより、ウェブサイト、モバイルアプリ、IoT デバイスなど、様々なプラットフォームへの対応が容易になります。

次のコードは、contentful からデータを取得して表示する例です。

import { GetStaticProps } from 'next'
import { fetchEntries } from '../lib/ContentfulClient'

type Post = {
  title: string
  content: string
}

type Props = {
  posts: Post[]
}

export const getStaticProps: GetStaticProps<Props> = async () => {
  const posts = await fetchEntries<Post>('post')

  return {
    props: {
      posts,
    },
  }
}

const IndexPage = ({ posts }: Props) => {
  return (
    <div>
      {posts.map((post) => (
        <div key={post.title}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  )
}

export default IndexPage

TypeScript

Jamstack では、TypeScript で構築していくのがフロントエンドの主流になっています。 TypeScript には次のようなメリットがあります。

型の安全性の向上

TypeScript は型をサポートするため、開発者がコードのバグを見つけるのを手助けします。静的型付けは、エラーを見つけるのに役立ち、開発者が迅速に修正することができます。

開発者の生産性の向上

TypeScript は、開発者がコードをより簡単に読み書きするのを手助けします。型推論を活用することで、コードを迅速に記述できます。また、統合開発環境（IDE）での自動補完とエラーチェックの機能を活用することで、開発プロセスがスムーズに進みます。

スケーラビリティの向上

TypeScript は大規模なプロジェクトでの開発に適しており、コードの保守性を向上します。コードベースの大きさが増えても、開発者はエラーを見つけて修正するのが容易になります。

エコシステムの豊富さ

TypeScript は人気の高い言語であるため、多くのライブラリやフレームワークが存在します。これらのツールを利用することで、開発プロセスが加速されます。

未来の JavaScript 機能を先取り

TypeScript は JavaScript のスーパーセットであるため、JavaScript が将来的に導入される機能を先取りすることができます。これにより、開発者は最新の JavaScript 機能を利用できます。

つまり、安全性が高まり生産性も高まるので、開発コストが下がります。また、スケーラビリティが高まるので、大規模なプロジェクトにも対応できます。これらのメリットにより、TypeScript は現在広く使用されている言語の 1 つとなっています。

引き続き Jamstack のメリットを見てみましょう。

高速なパフォーマンス

Jamstack は、コンテンツをサーバー側でレンダリングするのではなく、クライアント側でレンダリングするため、高速な読み込み時間を実現できます。また、CDN を使用するため、コンテンツの配信速度も向上します。

安全性

Jamstack は、サーバーレスアーキテクチャを採用しており、サーバーサイドの脆弱性がないため、セキュリティリスクが低いです。

スケーラビリティ

Jamstack は、静的ファイルを使用するため、複数のユーザーに対応するために必要なコンピューティングリソースが少なく、スケーラビリティに優れています。

開発プロセスの改善

Jamstack は、サーバーレスアーキテクチャを採用しているため、開発者はサーバーの管理に時間を費やす必要がなく、コードの書きやすさやデプロイの容易さが向上します。

さて、次に Jamstack のデメリットを見てみましょう。

Jamstack のデメリット

サーバーレスアーキテクチャの知識が必要

Jamstack は、サーバーレスアーキテクチャを採用しているため、開発者はサーバーレスアアーキテクチャに関する知識が必要です。これは、従来のウェブ開発に比べると、開発の敷居が高くなる可能性があることを示唆しています。

大規模なアプリケーションの複雑さ

Jamstack は、小規模から中規模のアプリケーションに適していますが、大規模なアプリケーションになると、複雑さが増してしまう場合があります。

以上が、Jamstack のデメリットとメリットについての比較です。Jamstack の利点は、高速なパフォーマンス、安全性、スケーラビリティ、および開発プロセスの改善などがあります。一方、動的なコンテンツの処理が制限される、CMS の制限、サーバーレスアーキテクチャの知識が必要、JavaScript に依存する、大規模なアプリケーションの複雑さなど、いくつかのデメリットもあります。開発者は、プロジェクトの要件に合わせて、Jamstack を使用するかどうかを慎重に検討する必要があります。

Jamstack 化を丸投げしたい

「WordPress から Jamstack に乗り換えたいけど、面倒なのでお願いしたい！」という方は、次のボタンからお問い合わせをお願いします。どんなに記事数が多くても、問題ありません。