Jamstack の紹介
Jamstack は、JavaScript、API、そして Markup の頭文字を組み合わせた用語です。従来のサーバーサイドレンダリングとは異なり、Jamstack のアーキテクチャは静的ファイル配信に重点を置いています。これにより、開発者はユーザー体験の向上、高速なパフォーマンス、そしてセキュリティの強化といった利点を享受できます。
静的ジェネレーターとは？
そもそも静的ジェネレーターというのは、ソースコードから静的ファイルを生成するツールです。これらのファイルは、HTML、CSS、JavaScript などのウェブページで使用されます。静的ジェネレーターは、Jamstack の重要な部分であり、サーバーの負荷を軽減しながら、ページの読み込み速度を向上させます。
人気のある静的ジェネレーターの比較表 25 選（GitHub Stars 順）
Static Site Generators - Top Open Source SSGs | Jamstack より、GitHub Stars 順に静的ジェネレーターを比較した表を抜粋しました。ジェネレーター名のところをクリックすると各サイトへ飛びます。
| ジェネレーター | 特徴 | 使用言語 | ライセンス |
|---|---|---|---|
| Next.js | App Router、SC、CC、SSR、SSG | JavaScript (React) | MIT |
| Hugo | 高速なビルド時間、多言語対応 | Go | Apache 2.0 |
| Gatsby | 2000 以上のプラグイン、GraphQL、簡単 | JavaScript (React) | MIT |
| Jekyll | Ruby 製、GitHub Pages との統合 | Ruby | MIT |
| Nuxt.js | SSR、SSG、Vue.js ベース | JavaScript (Vue.js) | MIT |
| Docusaurus | ドキュメンテーションに最適化 | JavaScript (React) | MIT |
| Hexo | ブログに最適化 | JavaScript | MIT |
| Slate | API ドキュメンテーションに特化 | JavaScript (React) | Apache 2.0 |
| GitBook | コラボレーティブなドキュメンテーション | クラウドサービス | N/A |
| Astro | ゼロ JS フロントエンド、超高速、HTML 寄り | JavaScript | MIT |
| Docsify | Markdown 中心、動的に生成 | JavaScript | MIT |
| VuePress | Vue.js ベース、ドキュメンテーションに最適化 | JavaScript (Vue.js) | MIT |
| MkDocs | ドキュメンテーションに特化 | Python | BSD |
| UmiJS | プラグインアーキテクチャ、dva フレームワーク | JavaScript (React) | MIT |
| Eleventy | 高速、データ駆動 | JavaScript | MIT |
| SvelteKit | SSR、SSG、Svelte ベース | JavaScript (Svelte) | MIT |
| mdBook | ドキュメンテーションに特化 | Rust | MPL-2.0 |
| Pelican | 静的ブログ生成、Markdown、reST、AsciiDoc 対応 | Python | AGPL |
| React Static | 高速、安全、React ベース | JavaScript (React) | MIT |
| Zola | 単一バイナリ、テーマシステム | Rust | MIT |
| Fresh | SSR、React ベース | JavaScript (React) | MIT |
| Gridea | ブログに最適化、Markdown 対応 | JavaScript (Electron) | MIT |
| Gridsome | データ駆動、Vue.js ベース | JavaScript (Vue.js) | MIT |
| Metalsmith | プラグインシステム、フルカスタマイズ可能 | JavaScript | MIT |
| Sapper.js | SSR、SSG、Svelte ベース | JavaScript (Svelte) | MIT |
Astro
Astro は、2021 年にリリースされたコンテンツ重視の新しい静的サイトジェネレーターです。MPA フレームワークの 1 つですが、他の MPA と違うところは、サーバー言語とランタイムに JavaScript を使用している点です。
Astro の最大の特徴は、 ゼロ JS フロントエンド アーキテクチャ。JavaScript を可能な限りサーバー・サイドで処理して、クライアントに静的な HTML だけを送信します。これにより、ページのパフォーマンスが大幅に向上します。React、Preact、Svelte、Vue、Solid、Lit などをサポートしています。
---
// Astroのコンポーネントは、HTMLと同じように書くことができます
---
<h1>Hello Astro!</h1>
公式ドキュメントよりサンプルを引用。
---
import type { MarkdownLayoutProps } from 'astro';
type Props = MarkdownLayoutProps<{
// フロントマターのpropsをここで定義します
title: string;
author: string;
date: string;
}>;
// `frontmatter`や`url`などのMarkdownのレイアウトプロパティに
// 型安全にアクセスできます
const { frontmatter, url } = Astro.props;
---
<html>
<head>
<link rel="canonical" href={new URL(url, Astro.site).pathname}>
<title>{frontmatter.title}</title>
</head>
<body>
<h1>{frontmatter.title} {frontmatter.author}著</h1>
<slot />
<p>投稿日: {frontmatter.date}</p>
</body>
</html>
利点
- ゼロ JS フロントエンド:必要な時にのみ JavaScript をロードする
- HTML をサーバーでレンダリングすることで、Web サイトの動作が速くなる
- React、Vue、Svelte など複数のフレームワークのコンポーネントをサポート
- 高速なビルド時間
- 100 以上の Astro インテグレーションがある
- 日本語ドキュメントが充実している
- HTML と同じように書けるので学習コストが低い
短所
- コミュニティとエコシステムがまだ成熟していない
Gatsby
Gatsby は、React を基盤とした静的サイトジェネレーターです。データソースとして Markdown ファイル、API、データベースなどからデータを引き出すことができます。
type PageProps = {
data: {
site: {
siteMetadata: {
title: string
}
}
}
}
const MyPage = ({ data }: PageProps) => {
return <div>{data.site.siteMetadata.title}</div>
}
利点
- データソースが多様で、GraphQL を使ってデータを簡単に取り扱える
- パフォーマンスが高い
- プラグインの数が 2000 以上もあり、WordPress の機能を実現しやすい
- 機能は大体プラグインで対応できるので学習コストが低い
短所
- プラグインで対応していない機能を自前で実装するのは難しい
- ビルド時間が長くなることがある
Hugo
Hugo は Go 言語で書かれた静的サイトジェネレーターで、その速度の速さでよく知られています。
// HugoではTOML, YAML, JSONをフロントマターとしてサポートしています。
---
title: "My First Post"
date: 2023-05-13
---
Hello, world!
利点
- 非常に高速なビルド時間
- シンプルで直感的な設定
- 多言語サイトのサポート
短所
- データソースが限定的
- プラグインのエコシステムがそれほど豊富ではない
Next.js
Next.js は React のフレームワークで、静的サイト生成(SSG)とサーバーサイドレンダリング(SSR)の両方をサポートしています。
type PostProps = {
title: string
}
const Post = ({ title }: PostProps) => {
return <div>{title}</div>
}
利点
- 柔軟なデータフェッチング
- SSG と SSR の両方をサポート
- 高速なホットリロードとモジュール置換
- app ディレクトリは pages ディレクトリと同じように動作する
- Turbopack (ベータ) コンパイルが早い
- 組み込み SEO サポートを使用して、ページごとにメタデータを設定できる
- Server Components により async/await が使える
短所
- 複雑なプロジェクトでの最適化が必要
- App Router でのエラー対応が面倒
- 他のフレームワークもそうだけど、TypeScript や React の知識がないと詰む
Nuxt.js
Nuxt.js は Vue.js のフレームワークで、静的サイト生成(SSG)とサーバーサイドレンダリング(SSR)の両方をサポートしています。
<template>
<div>{{ title }}</div>
</template>
<script>
export default {
data() {
return {
title: 'Hello Nuxt.js!'
}
}
}
</script>
利点
- Vue.js の利便性と強力さを活用
- 非常に柔軟なデータフェッチングの方法
- SSG と SSR の両方をサポート
短所
- 複雑なプロジェクトでは設定が難しくなる可能性
- ビルド時間が長くなる可能性
VuePress
VuePress は、Vue.js をベースとした静的サイトジェネレーターで、特にドキュメンテーションの生成に強いです。
---
home: true
heroImage: /hero.png
actionText: Get Started →
actionLink: /guide/
---
利点
- マークダウン中心のコンテンツ作成
- シンプルで直感的な設定
- ドキュメンテーション作成に強い
短所
- 一部のカスタマイズには制限がある
- データソースが限定的
これらの静的ジェネレーターはそれぞれ異なる特性と利点、短所を持っています。プロジェクトの要件に基づいて、最適なツールを選択してください。