ここ数年で使用頻度が増えてきているJAMstackについて少し振り返ってみる。

JAMstackって何？

JAMstackはフロントエンド開発に対するアプローチ方法の一つ。

用語であるJAMとは、

• JavaScript
• API
• Markup

を略したものであり、これらの全ての技術を組み合わせて使用される。

要するにJAMstackは特定の技術やフレームワークではなく、
アプリケーションやWEBサイトを構築するためのアーキテクチャといったところか。

静的なWEBサイトのHTML/CSSをMarkupが担い、APIはHeadless CMSなどサードパーティ製のAPIサービスによって提供され、
必要な動的機能をJavaScriptによって構築し、ビルド時に静的ジェネレータとして静的リリースしていく感じだ。

なぜJAMstackが良いの？

JAMstackでは通常、Next.jsやNuxt、Astroのようなフレームワークを用いて、
一つ一つのページを事前に生成することができる。
pre-renderingっていう近年よく聞くアレだ。

これによりCMSのような更新性を残しつつ、
高パフォーマンスかつセキュリティリスクの少ない静的サイトの構築が可能となる。

また、従来のWordPressなどのCMSとは異なり、
データやロジック部分とUI部分を切り離すことが可能なのでフロントエンドの開発体験が実に良い。

もし独自のバックエンドシステムが必要になった際も、
作業分担などもしやすいから、保守性や制作効率の良い開発が行える。

そしてJAMstackはその静的な特性からSEOに有利なアーキテクチャでもある。

静的なファイルは検索エンジンにとっても、容易にインデックス化されやすい傾向があるので、
検索結果で上位に表示される可能性も高くなるといってもいいだろう。

また、基本的にデータベースやその他のシステムを考えなくてもいいので、
デプロイのプロセスも簡単に構築ができる。

Vercelなどを利用すればゼロコンフィグでGitHubのリポジトリ連携のみでデプロイ環境の構築が可能。
PRだったりGitHub Actionsを駆使すれば品質などもより担保出来る。

実に良い時代だ。FTPとは何だったのか。。

どんな時にJAMstackは良いの？

前述のとおりJAMstackは基本全て静的ページでリリースするので、
従来のCMSとは異なりデータベースやバックエンドサーバーを必要としない。

自分もいくつかJAMstackに触れてサイト構築してきたが、
未だ見ぬ真価を発揮する場面はきっと沢山ある。
運命の相手はまだ見つかっていないのだ。知らんけど。

ちなみに自分が触れて来た感じとしては、以下のようなケースでメリットを感じる。

• 企業のホームページやドキュメントサイトのような静的なコンテンツが多いサイト
• ブログ、メディア、ECサイトなど更新性があるサイト
• マーケティングを視野に入れたランディングページ

まぁこちらはほんの一例ではあるのだけど、比較的採用されてるケースも見かける。

そういえば某デジタルな庁ではNext.jsから別のCMSに置き換えたんだっけ。
技術の選定にも色々と事情はあるものだ。

一方、JAMstackにもデメリットがある。
静的なページであるため、リアルタイム性の高いアプリケーションや、
強整合性が求められるサービスの場合には適さないだろう。

また、ページ数が数千〜1万を超える規模のサイトでは、ビルドに大きく時間がかかってしまう。
待ち合わせに何時間も待てるタイプなら問題ないかもだが、
開発体験やコンテンツ戦略などによっては不向きと捉えるケースがありそうだ。

JAMstackはインザフューチャーなの？

現状、まだまだ技術的な側面に偏ってるのは否めないし、
技術者は一定の技術スキルを持ち合わせてなければ敷居は高く感じる。

コンテンツ編集者にとっても慣れ親しんだWordPressではなく新しいツールを覚えるのは難儀でもある気もする。
というかWordPress REST APIでフロントエンドにコンテンツプレビュー環境作ってみたことあるが正直結構しんどかった。。

WordPressも未だシェア率が物語っているように、決して悪手ではないなと思ってる。
そもそもJAMstackとWordPressは比較すべきではないように感じたりも。
メリットを分かりやすくするために引き合いに出すのは理解できるけど。

まぁどちらも選択肢の一つとして懐にそっと忍ばせておけばいいと思ってる。

まとめ的な

まだJAMstackには課題もそこそこあるように感じるが、自分は開発体験自体は好きなので、今後も推しとして選定の候補には入れておきたい。
次に取り入れるとしたらどんな技術スタックで組んでみようかな。

そういえば以前Next.jsのApp Routerを学ぶがてらに作ったJAMstack構成のサンプルブログがあるのでそっと置いておく。
https://github.com/hiroic-works/nextjs-app-router-blog