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件を見るSSR(サーバーサイドレンダリング)
Webページをサーバー側でHTMLとして生成してからクライアントに送信する手法。SPAのSEO問題を解決し、初期表示を高速化できる。Next.js・Nuxt.jsで実装されることが多い。
Ruby (ルビー)
「プログラミングを楽しむ」ことを目的に日本のまつもとゆきひろ氏が開発した、美しく書きやすい言語。
IT用語: クロージャ(Closure)とは|関数が変数を「覚える」仕組み
関数が定義された時点のスコープの変数を参照し続けるクロージャの仕組みとカウンターなどの実用例を解説。
ESLint
JavaScriptとTypeScriptのコードを静的解析し、潜在的なバグや規約違反を検出するリンター。プロジェクト全体で一貫したコードスタイルを強制し、コードレビューの負担を軽減する。
C# (シーシャープ)
Microsoft社が開発した、エンタープライズ(企業向け)システムからゲーム開発(Unity)まで広く使われる万能言語。
TypeScript (TS)
JavaScriptの弱点(エラーの起きやすさ)を克服するためにMicrosoftが開発した、「型(ルール)」を持つ進化版言語。