---
title: Jamstackについて
description: Jamstackとは、静的なHTMLをベースとして、必要に応じて動的にコンテンツを取得し、Webサイトを書き換えるWebアプリ・Webサイトのアーキテクチャのことを言います。Jamstackに則ることでWebサイトをより速く、より安全に、そして簡単に拡張できるよう設計できます。
---

Jamstackとは、静的なHTMLをベースとして必要に応じて動的にコンテンツを取得し、Webサイトを書き換えるWebアプリ・Webサイトのアーキテクチャのことを言います。Jamstackに則ることでWebサイトをより速く、より安全に、そして簡単に拡張できるよう設計できます。

## Jamstackの意味

Jamstackは**J**avaScript、**A**PIそしてプリレンダリングされた**M**arkupを組み合わせた技術スタック（**Stack**）を組み合わせた造語です。Jamstackを提唱しているNetlify創業者のMatt Biilmann氏は、特にWebサーバーに依存しない点も特徴として挙げています。

## Jamstackの特徴

Jamstackで大事なキーワードになるのが **プリレンダリング** と **デカップリング（分離）** です。

### プリレンダリング

Jamstackを利用する多くのフレームワークでは、専用の記法やテンプレートを用います。そしてWebサイトとして配置する際にはテンプレートから静的なHTMLに変換します。従来のWebサイトのようにユーザーのリクエストに応じて都度HTMLを生成する仕組みではありません。あらかじめHTMLやCSS、JavaScript、画像などのアセットを生成することからプリレンダリングと呼ばれます。

こうした静的コンテンツはCDNを利用することで、高速な配信が可能となります。

### デカップリング（分離）

ただのHTMLだけで作られたWebサイトとの違いは、JavaScriptを活用してバックエンドサーバーと通信し、動的なコンテンツ提供することです。認証やコメント機能、決済、ユーザーに応じたパーソナライズなど、一般的に動的な仕組みが必要な部分についてはJavaScriptを活用して実現されます。

APIエコノミーの発展によって、複雑なサーバーサイドを開発することなく機能を実装できるようになっています。Jamstackサイトでは、こうしたAPI群を活用することで、技術的複雑性やリスクを分離します。APIによる分離はJamstackサイトの柔軟性や移植性を高められます。

## 他のコンテンツ

### [Jamstackと一般的なWebサイトの違い](/ja/docs/about/jamstack-website/)

Jamstackと一般的なWebサイトの相違点について解説しています。

### [Jamstackの利点と欠点](/ja/docs/about/why-jamstack/)

Jamstackで構築する利点と欠点について解説しています。

### [Jamstackを学ぶためのリソース](/ja/docs/about/jamstack-resources/)

Jamstackをより深く学ぶのに役立つリソースを紹介しています。

### [Jamstackのアーキテクチャパターン](/ja/docs/about/jamstack-architecture/)

Jamstackのアーキテクチャパターンと、それぞれの違いについて解説しています。