JAMstack
JavaScript・APIs・Markupの頭文字をとったWebアーキテクチャ。ビルド時に静的HTMLを生成し、動的機能はAPIで補完することで高速・安全・スケーラブルなWebサイトを実現する。
JAMstackとは？
JAMstackは、JavaScript・APIs・Markupの頭文字をとったWebアーキテクチャのコンセプトです。Netlifyの共同創業者Matt Biilmann氏が2016年に提唱しました。
JAMstackの3要素
| 要素 | 説明 |
|---|---|
| JavaScript | クライアントサイドの動的機能（React・Vue等） |
| APIs | サーバー処理をAPIに委譲（REST・GraphQL等） |
| Markup | ビルド時に事前生成した静的HTML |
従来のWebアーキテクチャとの違い
| 項目 | 従来型（WordPress等） | JAMstack |
|---|---|---|
| HTML生成 | リクエストごとにサーバーで生成 | ビルド時に事前生成 |
| ホスティング | Webサーバー（Apache/NGINX） | CDN（Cloudflare/Vercel等） |
| データベース | 直接接続（脆弱性リスク） | API経由（間接的） |
| スケーリング | サーバーを増強 | CDNが自動対応 |
JAMstackのエコシステム
- ホスティング: Cloudflare Pages・Vercel・Netlify
- SSGフレームワーク: Astro・Next.js・Hugo
- Headless CMS: Contentful・Sanity・microCMS
まとめ
JAMstackはSEO・パフォーマンス・セキュリティを同時に実現する現代的なWebアーキテクチャです。このサイトもAstro＋Cloudflare PagesのJAMstack構成で運用しています。
関連する用語 (プログラミング)
全33件を見るESLint
JavaScriptとTypeScriptのコードを静的解析し、潜在的なバグや規約違反を検出するリンター。プロジェクト全体で一貫したコードスタイルを強制し、コードレビューの負担を軽減する。
IT用語: 依存性の注入（DI）とは｜テストしやすいコードを書く設計原則
クラスが依存するオブジェクトを外部から渡す「依存性の注入（Dependency Injection）」の概念とテスタビリティへの効果を解説。
SSG（静的サイトジェネレーター）
ビルド時にすべてのページをHTMLとして事前生成する手法。サーバーが不要なため高速・安全・低コストで、ブログ・ドキュメントサイト・ランディングページに最適。
ヘッドレスCMS
表示用フロントエンド（ヘッド）を持たず、コンテンツ管理とAPIによるデータ提供に特化したCMS。Next.js・Astro等の任意のフロントエンドと組み合わせてJAMstack構成を実現する。
TypeScript (TS)
JavaScriptの弱点（エラーの起きやすさ）を克服するためにMicrosoftが開発した、「型（ルール）」を持つ進化版言語。
WebAssembly（Wasm）
ブラウザ上でネイティブに近い速度で実行できるバイナリ命令形式。C・C++・Rustなどのコードをブラウザで動かすことができ、ゲーム・動画編集・CADなど計算負荷の高いWebアプリに使われる。