# 画面設計書 25-ブログ記事詳細ページ

## 概要

本ドキュメントは、Jestドキュメントサイトにおける「ブログ記事詳細ページ」の画面設計書です。個別のブログ記事の全文を表示し、読者がJestの最新情報や技術的な内容を詳しく読むことができます。

### 本画面の処理概要

**業務上の目的・背景**：ブログ記事詳細ページは、Jest開発チームからの公式情報を詳細に伝える場です。メジャーバージョンリリースの際には、破壊的変更、新機能、パフォーマンス改善、移行ガイドなどの詳細情報が提供されます。また、Jestの開発背景、設計思想、コミュニティの活動などについても発信されます。開発者はこれらの情報を通じて、Jestの正しい使い方を学び、アップグレードを円滑に行うことができます。

**画面へのアクセス方法**：ユーザーはブログ一覧ページから記事カードをクリックするか、直接URLでアクセスします。URL形式は `/blog/YYYY/MM/DD/記事スラッグ` です。

**主要な操作・処理内容**：
1. 記事本文の閲覧
2. 目次（Table of Contents）を使用したページ内ナビゲーション
3. コードブロックのコピー
4. 著者情報の確認
5. 関連リンク（GitHub、ドキュメント等）への遷移
6. 前後の記事への遷移
7. ソーシャルシェア

**画面遷移**：ブログ一覧ページから遷移、前後の記事へ遷移可能、本文内リンクから各ドキュメントページへ遷移可能。

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

## 関連機能

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

## 画面種別

詳細

## URL/ルーティング

- URL: `/blog/YYYY/MM/DD/記事スラッグ`
- 例: `/blog/2025/06/04/jest-30`
- ファイルパス: `website/blog/YYYY-MM-DD-slug.md`
- Docusaurusによるブログ機能で自動生成

## 入出力項目

| 項目名 | 種別 | 説明 |
|--------|------|------|
| 検索クエリ | 入力（オプション） | サイト内検索機能で使用 |
| 記事コンテンツ | 出力 | Markdownからレンダリングされた記事本文 |
| 目次 | 出力 | 見出しから自動生成されたナビゲーション |

## 表示項目

| 項目 | 表示内容 | 備考 |
|------|----------|------|
| ヘッダー | Jestロゴ、ナビゲーションメニュー | 共通ヘッダー |
| 記事タイトル | ブログ記事のタイトル | H1タグ |
| 公開日 | 記事の公開日時 | Front Matterから取得 |
| 著者情報 | 著者名、アバター画像、プロフィールリンク | authorsから取得 |
| 読了時間 | 推定読了時間 | Docusaurus自動計算 |
| 本文 | 記事のメインコンテンツ | Markdownからレンダリング |
| コードブロック | シンタックスハイライト付きコード | コピー機能付き |
| 目次（TOC） | 見出しベースのナビゲーション | サイドバーに表示 |
| 前後記事リンク | 前の記事/次の記事へのリンク | ページ下部 |
| タグ | 記事に付与されたタグ | クリックでフィルタリング |
| フッター | サイト情報、リンク集 | 共通フッター |

### 記事本文の構成要素

| 要素 | 説明 | 例 |
|------|------|-----|
| 見出し | H2-H6の階層構造 | ## Breaking Changes |
| 段落 | 通常のテキスト | 説明文 |
| コードブロック | シンタックスハイライト付き | ```javascript |
| インラインコード | コード内埋め込み | `jest.fn()` |
| リスト | 順序付き/順序なしリスト | - 項目1 |
| テーブル | 比較表など | パフォーマンス比較 |
| リンク | 内部/外部リンク | [CHANGELOG](url) |
| 画像 | スクリーンショット等 | ![alt](image.png) |
| 注意書き | Info/Warning/Tip | :::info ... ::: |
| タブ | JavaScript/TypeScriptの切り替え | Tab blocks |

## イベント仕様

### 1-目次クリック

ページ内の該当見出しへスクロール移動

### 2-コードブロックコピー

コードをクリップボードにコピー

### 3-内部リンククリック

Jestドキュメント内の該当ページへ遷移

### 4-外部リンククリック

新しいタブでGitHub、npm等の外部サイトへ遷移

### 5-前後記事リンククリック

時系列で前後のブログ記事へ遷移

### 6-タグクリック

タグでフィルタリングされたブログ一覧へ遷移

### 7-著者リンククリック

著者の記事一覧またはプロフィールページへ遷移

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

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

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

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

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

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

## メッセージ仕様

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

## 例外処理

| 例外状況 | 対応内容 |
|----------|----------|
| ページが見つからない | Docusaurus標準の404ページを表示 |
| ネットワークエラー | ブラウザ標準のエラー表示 |
| 画像読み込み失敗 | altテキストを表示 |

## 備考

- Docusaurusのブログ機能を使用して自動生成される
- 目次（TOC）は見出し（H2-H6）から自動生成される
- コードブロックにはPrism.jsによるシンタックスハイライトが適用される
- タブブロック（JavaScript/TypeScript切り替え）は`docusaurus-remark-plugin-tab-blocks`で実現
- npm/yarn切り替えは`@docusaurus/remark-plugin-npm2yarn`で実現
- 記事内のリンクは相対パスと絶対パスの両方に対応
- PWA対応によりオフラインでも閲覧可能

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | 2025-06-04-jest-30.md | `website/blog/2025-06-04-jest-30.md` | 完全な記事構造（Front Matter、見出し、コード、テーブル等）を確認 |
| 1-2 | 2022-04-25-jest-28.md | `website/blog/2022-04-25-jest-28.md` | 別の記事構造パターンを確認 |

**読解のコツ**: Front Matterのauthors形式と本文のMarkdown構造に注目します。

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

Docusaurus設定でブログ記事のレンダリング設定を理解します。

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

**主要処理フロー**:
1. **63-66行目**: remarkPlugins設定
   - `@docusaurus/remark-plugin-npm2yarn` - npm/yarn切り替え
   - `docusaurus-remark-plugin-tab-blocks` - タブブロック
2. **68-71行目**: ブログ基本設定
   - `showReadingTime: true` - 読了時間表示
   - `editUrl` - GitHub編集リンク

#### Step 3: カスタムスタイルを理解する

ブログ記事に適用されるスタイルを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | docusaurus.config.js | `website/docusaurus.config.js` | customCss設定（72-80行目） |

**主要処理フロー**:
- `docusaurusTheme.css` - Docusaurusテーマカスタマイズ
- `custom.css` - カスタムスタイル
- `jest.css` - Jestテーマ固有スタイル

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

```
/blog/YYYY/MM/DD/slug (記事詳細ページ)
    │
    ├─ Docusaurus Blog Plugin
    │      ├─ Front Matter パース
    │      │      ├─ title
    │      │      ├─ authors
    │      │      └─ tags
    │      │
    │      ├─ Markdown 処理
    │      │      ├─ remark plugins
    │      │      │      ├─ npm2yarn (コード変換)
    │      │      │      └─ tab-blocks (タブ生成)
    │      │      │
    │      │      └─ rehype plugins
    │      │
    │      └─ React コンポーネント生成
    │
    ├─ コンテンツレンダリング
    │      ├─ 見出し → TOC生成
    │      ├─ コードブロック → Prism.js
    │      └─ リンク → Router連携
    │
    └─ ページナビゲーション
           ├─ 前の記事リンク
           └─ 次の記事リンク
```

### データフロー図

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

YYYY-MM-DD-slug.md ───▶ Docusaurus       ───▶ /blog/YYYY/MM/DD/slug
                        │
                        ├─ Front Matter
                        │   ├─ title → ページタイトル
                        │   ├─ authors → 著者情報
                        │   └─ tags → タグ表示
                        │
                        ├─ Markdown本文
                        │   ├─ 見出し → TOC
                        │   ├─ コード → シンタックスハイライト
                        │   └─ リンク → ルーティング
                        │
                        └─ メタデータ
                            ├─ 日付 → 公開日表示
                            └─ 読了時間
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| 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-04-25-jest-28.md | `website/blog/2022-04-25-jest-28.md` | コンテンツ | Jest 28リリースブログ |
| docusaurusTheme.css | `website/src/css/docusaurusTheme.css` | スタイル | Docusaurusテーマカスタマイズ |
| custom.css | `website/static/css/custom.css` | スタイル | カスタムCSS |
| jest.css | `website/static/css/jest.css` | スタイル | Jestテーマ用CSS |
| sidebars.json | `website/sidebars.json` | 設定 | サイドバー設定 |
