# 画面設計書 24-ブログ一覧ページ

## 概要

本ドキュメントは、Jestドキュメントサイトにおける「ブログ一覧ページ」の画面設計書です。Jest関連のブログ記事一覧を時系列で表示し、リリースノート、機能紹介、コミュニティニュースなどの情報を提供します。

### 本画面の処理概要

**業務上の目的・背景**：ブログ一覧ページは、Jestプロジェクトの最新情報を時系列で提供する重要なコミュニケーションチャネルです。メジャーバージョンリリースのアナウンス、新機能の紹介、パフォーマンス改善の報告、コミュニティイベントの告知など、Jest開発チームからの公式な情報発信の場として機能します。開発者はこのページを通じて、Jestの最新動向を把握し、アップグレード計画の立案や新機能の活用方法を学ぶことができます。

**画面へのアクセス方法**：ユーザーはヘッダーナビゲーションの「Blog」リンクからアクセスします。URLは `/blog` です。

**主要な操作・処理内容**：
1. ブログ記事一覧の閲覧（タイトル、著者、日付、抜粋）
2. 記事のフィルタリング（タグ、著者）
3. ページネーション操作
4. 個別記事への遷移
5. RSS/Atomフィードの購読

**画面遷移**：ホームページから「Blog」リンクで遷移、各ブログ記事詳細ページへ遷移可能。

**権限による表示制御**：特になし。すべてのユーザーが全コンテンツにアクセス可能。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | jest | 主機能 | Jest関連ブログ記事の一覧表示 |

## 画面種別

一覧

## URL/ルーティング

- URL: `/blog`
- ファイルパス: `website/blog/*.md`
- Docusaurusによるブログ機能で自動生成

## 入出力項目

| 項目名 | 種別 | 説明 |
|--------|------|------|
| 検索クエリ | 入力（オプション） | サイト内検索機能で使用 |
| ページ番号 | 入力（オプション） | ページネーション |
| タグフィルター | 入力（オプション） | 記事のタグでフィルタリング |
| 記事カード | 出力 | 各記事のプレビュー表示 |

## 表示項目

| 項目 | 表示内容 | 備考 |
|------|----------|------|
| ヘッダー | Jestロゴ、ナビゲーションメニュー | 共通ヘッダー |
| ブログタイトル | 「Blog」 | ページヘッダー |
| 記事カード | タイトル、著者、日付、抜粋テキスト | 各記事ごと |
| 記事サムネイル | 記事のサムネイル画像（存在する場合） | オプション |
| 著者情報 | 著者名、アバター画像 | 各記事ごと |
| 読了時間 | 推定読了時間 | Docusaurus自動計算 |
| タグ | 記事に付与されたタグ | クリックでフィルタリング |
| ページネーション | 前へ/次へボタン、ページ番号 | 10記事ごと（デフォルト） |
| サイドバー | 最新記事、アーカイブリンク | オプション |
| フッター | サイト情報、リンク集 | 共通フッター |

### ブログ記事一覧（22件）

| No | 日付 | タイトル | 著者 |
|----|------|---------|------|
| 1 | 2025-06-04 | Jest 30: Faster, Leaner, Better | MillerSvt, cpojer |
| 2 | 2022-08-25 | Jest 29: Snapshot format changes | simenb |
| 3 | 2022-05-11 | Jest joins OpenJS Foundation | simenb |
| 4 | 2022-04-25 | Jest 28: Shard tests, Improved Inline Snapshots | simenb |
| 5 | 2021-05-25 | Jest 27: New Defaults for Jest | simenb |
| 6 | 2021-03-09 | New Jest Website | simenb |
| 7 | 2020-05-05 | Jest 26: Tick Tock | simenb |
| 8 | 2020-01-21 | Jest 25: New Expect Matchers | simenb |
| 9 | 2019-01-25 | Jest 24: Refreshing & Polished | simenb |
| 10 | 2018-06-27 | Supporting Jest Open Source | simenb |
| 11 | 2018-05-29 | Jest 23: Blazing Fast Delightful Testing | simenb |
| 12 | 2017-12-18 | Jest 22: Immersive Watch Mode | simenb |
| 13 | 2017-05-06 | Jest 20: Delightful Testing & Multi-Project Runner | simenb |
| 14 | 2017-02-21 | Jest 19: Immersive Watch Mode & Test Platform Improvements | simenb |
| 15 | 2017-01-30 | A Great Developer Experience | simenb |
| 16 | 2016-12-15 | 2016 in Jest | simenb |
| 17 | 2016-10-03 | Jest 16 | simenb |
| 18 | 2016-09-01 | Jest 15 | simenb |
| 19 | 2016-07-27 | Jest 14 | simenb |
| 20 | 2016-06-22 | Jest 13 | simenb |
| 21 | 2016-04-12 | Jest 11 | simenb |
| 22 | 2016-03-11 | JavaScript Unit Testing Performance | simenb |

## イベント仕様

### 1-記事カードクリック

選択した記事の詳細ページへ遷移

### 2-タグクリック

選択したタグでフィルタリングされた記事一覧を表示

### 3-著者名クリック

選択した著者の記事一覧を表示

### 4-ページネーションクリック

指定ページの記事一覧を表示

### 5-RSSフィードリンククリック

RSS/Atomフィードを取得

### 6-ヘッダーナビゲーションクリック

他のセクション（Docs、API、Help等）へ遷移

## データベース更新仕様

### 操作別データベース影響一覧

本画面は静的サイトのため、データベース操作は発生しません。

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | 静的コンテンツのみ |

## メッセージ仕様

| メッセージID | メッセージ内容 | 表示条件 | 種別 |
|-------------|--------------|----------|------|
| - | - | - | 静的コンテンツのため該当なし |

## 例外処理

| 例外状況 | 対応内容 |
|----------|----------|
| ページが見つからない | Docusaurus標準の404ページを表示 |
| ネットワークエラー | ブラウザ標準のエラー表示 |

## 備考

- Docusaurusのブログ機能を使用して自動生成される
- 各記事はMarkdown形式で `website/blog/` ディレクトリに配置
- Front Matterでtitle、authors、tags等のメタデータを定義
- 読了時間はDocusaurusが自動計算（showReadingTime: true）
- RSS/Atomフィードが自動生成される
- `<!--truncate-->` コメントで抜粋の切り取り位置を指定可能

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

まず、ブログ記事のメタデータ構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | 2025-06-04-jest-30.md | `website/blog/2025-06-04-jest-30.md` | Front Matterの構造（title、authors）を確認（1-4行目） |
| 1-2 | 2022-08-25-jest-29.md | `website/blog/2022-08-25-jest-29.md` | 記事構造、`<!--truncate-->`の使用法を確認（8行目） |

**読解のコツ**: Front Matterの形式はDocusaurusのブログ仕様に準拠しています。

#### Step 2: エントリーポイントを理解する

Docusaurus設定でブログ機能がどのように構成されているかを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | docusaurus.config.js | `website/docusaurus.config.js` | blog設定（68-71行目） |

**主要処理フロー**:
1. **68-71行目**: ブログプリセット設定
   - `showReadingTime: true` - 読了時間表示
   - `editUrl` - GitHub編集リンク

#### Step 3: ブログ記事の配置を理解する

ブログ記事ファイルの命名規則と構造を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | blog/*.md | `website/blog/` | ファイル命名規則（YYYY-MM-DD-slug.md） |

**主要処理フロー**:
- ファイル名から日付とスラッグを抽出
- Front Matterからメタデータを取得
- Markdownコンテンツをパース

### プログラム呼び出し階層図

```
Docusaurus Build Process
    │
    ├─ @docusaurus/preset-classic
    │      └─ blog プラグイン
    │             ├─ website/blog/*.md 読み込み
    │             ├─ Front Matter パース
    │             └─ ブログページ生成
    │
    ├─ /blog (一覧ページ)
    │      ├─ 記事カード生成
    │      ├─ ページネーション
    │      └─ タグ/著者フィルタ
    │
    └─ /blog/YYYY/MM/DD/slug (記事詳細)
           └─ 個別記事レンダリング
```

### データフロー図

```
[入力]               [処理]                    [出力]

blog/*.md      ───▶ Docusaurus       ───▶ /blog (一覧ページ)
                     ├─ Front Matter
                     │   パース
                     ├─ Markdown
                     │   変換
                     └─ React
                         コンポーネント
                         生成
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurus設定（ブログ含む） |
| 2025-06-04-jest-30.md | `website/blog/2025-06-04-jest-30.md` | コンテンツ | Jest 30リリースブログ |
| 2022-08-25-jest-29.md | `website/blog/2022-08-25-jest-29.md` | コンテンツ | Jest 29リリースブログ |
| 2022-05-11-jest-joins-openjs.md | `website/blog/2022-05-11-jest-joins-openjs.md` | コンテンツ | OpenJS Foundation参加ブログ |
| 2022-04-25-jest-28.md | `website/blog/2022-04-25-jest-28.md` | コンテンツ | Jest 28リリースブログ |
| 2021-05-25-jest-27.md | `website/blog/2021-05-25-jest-27.md` | コンテンツ | Jest 27リリースブログ |
| authors.yml | `website/blog/authors.yml` | 設定 | 著者情報定義（存在する場合） |
| custom.css | `website/static/css/custom.css` | スタイル | カスタムCSS |
| jest.css | `website/static/css/jest.css` | スタイル | Jestテーマ用CSS |
