# 画面設計書 4-Getting Startedページ

## 概要

本ドキュメントは、JestドキュメントサイトのGetting Startedページについて、画面構成、機能、データフロー、コードリーディングガイドを記述した画面設計書です。

### 本画面の処理概要

Getting StartedページはJestの初期設定・導入方法を説明するドキュメントページです。インストール方法、最初のテストの書き方、コマンドライン実行、追加設定（Babel、TypeScript、Webpack、ESLint）について詳細に解説します。

**業務上の目的・背景**：Jest導入を検討している開発者が、最短でJestを使い始められるようにすることを目的としています。パッケージマネージャーでのインストールから、実際にテストを書いて実行するまでの一連の流れを体験することで、Jestの基本的な使い方を習得できます。

**画面へのアクセス方法**：
- ホームページの「Get Started」ボタンをクリック
- ホームページの「Docs」ボタンをクリック
- ヘッダーナビゲーションの「Docs」リンクをクリック
- バージョン一覧ページからドキュメントリンクをクリック
- 直接URL `/docs/getting-started` にアクセス

**主要な操作・処理内容**：
1. Jestのインストール手順の確認（npm/yarn/pnpm切り替え可能）
2. 最初のテストコードのサンプル確認
3. package.jsonへのスクリプト追加方法の確認
4. コマンドライン実行オプションの確認
5. 各種設定（Babel、TypeScript、Webpack、Vite、Parcel、ESLint）の確認
6. サイドバーナビゲーションで他のドキュメントページへ遷移

**画面遷移**：
- 遷移先：Using Matchersページ、CLI Optionsページ、Webpackページ、各設定関連ページ、外部サイト（npm、Babel、TypeScript公式等）
- 遷移元：ホームページ、バージョン一覧ページ、他のドキュメントページ

**権限による表示制御**：なし（全ユーザーに同一コンテンツを表示）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | jest | 主機能 | Jestのインストールと初期設定方法の説明 |
| 2 | jest-cli | 補助機能 | CLIからのテスト実行方法の説明 |
| 5 | jest-config | 補助機能 | 設定ファイルの作成方法の説明 |
| 19 | babel-jest | 補助機能 | Babel連携の設定方法の説明 |
| 29 | @jest/globals | 補助機能 | TypeScript向けグローバル型定義の使用方法 |
| 10 | expect | 補助機能 | expectとtoBeマッチャーの基本的な使用例 |

## 画面種別

ドキュメントページ

## URL/ルーティング

- URL: `/docs/getting-started`
- ルーティング: `docs/GettingStarted.md`（Docusaurusによる自動変換）

## 入出力項目

該当なし（Markdownコンテンツの静的表示）

## 表示項目

| セクション | 表示内容 | データソース |
|------------|----------|--------------|
| タイトル | "Getting Started" | Markdown Front Matter |
| インストール | npm install --save-dev jest | 静的コンテンツ |
| 最初のテスト | sum.js / sum.test.js のサンプルコード | 静的コンテンツ |
| package.json設定 | testスクリプトの追加方法 | 静的コンテンツ |
| 実行結果 | PASSメッセージの表示例 | 静的コンテンツ |
| Running from command line | CLIオプションの説明 | 静的コンテンツ |
| Additional Configuration | 設定ファイル生成方法 | 静的コンテンツ |
| Using Babel | Babel設定方法 | 静的コンテンツ |
| Using with bundlers | Webpack/Vite/Parcel設定 | 静的コンテンツ |
| Using TypeScript | TypeScript設定方法（Babel/ts-jest） | 静的コンテンツ |
| Using ESLint | ESLint設定方法 | 静的コンテンツ |
| サイドバー | ドキュメントナビゲーション | sidebars.json |

## イベント仕様

### 1-npm2yarnタブ切り替え

コードブロック内でnpm/yarn/pnpmのコマンドを切り替えて表示します。

- 処理：remark-plugin-npm2yarnによりタブUIが自動生成
- 対象：`npm install` コマンドを含むコードブロック

### 2-詳細セクションの展開

`<details>` タグで囲まれた追加情報を展開・折りたたみできます。

- 対象：「Making your Babel config jest-aware」セクション

### 3-サイドバーナビゲーション

サイドバーのリンクをクリックすると、対応するドキュメントページへ遷移します。

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

各外部リンクをクリックすると、新規タブで外部サイトが開きます。

| リンク名 | 遷移先 |
|----------|--------|
| Babel | https://babeljs.io/ |
| TypeScript | https://www.typescriptlang.org/ |
| webpack | https://webpack.js.org/ |
| Vitest | https://vitest.dev/ |
| ts-jest | https://github.com/kulshekhar/ts-jest |
| @types/jest | https://npmjs.com/package/@types/jest |
| eslint-plugin-jest | https://github.com/jest-community/eslint-plugin-jest |

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

該当なし（静的サイトのため、データベース操作は発生しない）

## メッセージ仕様

該当なし（フォーム入力や処理結果のメッセージは存在しない）

## 例外処理

該当なし（静的Markdownコンテンツのため、例外処理は不要）

## 備考

- Docusaurusによりdocs/GettingStarted.mdから自動生成
- Front Matterのidが`getting-started`のため、URLは`/docs/getting-started`
- remark-plugin-npm2yarnによりパッケージマネージャー切り替えUIを提供
- docusaurus-remark-plugin-tab-blocksによるタブUIサポート
- 多言語対応（Crowdin経由）

---

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

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

### 推奨読解順序

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

Markdownドキュメントの構造とFront Matterを把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | GettingStarted.md | `docs/GettingStarted.md` | Front Matter（id: getting-started, title: Getting Started） |
| 1-2 | sidebars.json | `website/sidebars.json` | サイドバーでのドキュメント配置 |

**読解のコツ**: Front Matterの`id`がURLパスに使用されます。Markdownコンテンツ内の`npm2yarn`アノテーションがタブ切り替えのトリガーです。

#### Step 2: Docusaurus設定を理解する

ドキュメント処理の設定を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | docusaurus.config.js | `website/docusaurus.config.js` | docsプリセットの設定（49-67行目） |

**主要処理フロー**:
1. **61行目**: path: '../docs' でMarkdownファイルの場所を指定
2. **62行目**: sidebarPath でサイドバー設定ファイルを指定
3. **63-66行目**: remarkPlugins で npm2yarn と tab-blocks を設定

#### Step 3: コンテンツ構造を理解する

Markdownファイル内のセクション構造を把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | GettingStarted.md | `docs/GettingStarted.md` | 全258行のセクション構成 |

**主要セクション**:
- **1-4行目**: Front Matter
- **6-48行目**: インストールと最初のテスト
- **52-63行目**: Running from command line
- **64-121行目**: Additional Configuration / Using Babel
- **122-141行目**: Using with bundlers
- **142-216行目**: Using TypeScript
- **217-258行目**: Using ESLint

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

```
Docusaurus Build Process
    │
    ├─ docs/GettingStarted.md
    │      │
    │      ├─ Front Matter解析
    │      │      └─ id: getting-started → URL: /docs/getting-started
    │      │
    │      ├─ remarkPlugins処理
    │      │      ├─ remark-plugin-npm2yarn
    │      │      │      └─ npm2yarn アノテーション → タブUI生成
    │      │      │
    │      │      └─ docusaurus-remark-plugin-tab-blocks
    │      │             └─ タブブロック処理
    │      │
    │      └─ Markdown → HTML変換
    │
    ├─ sidebars.json
    │      └─ サイドバーナビゲーション生成
    │
    └─ @docusaurus/preset-classic
           └─ ドキュメントレイアウト適用
```

### データフロー図

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

GettingStarted.md ──────▶ Markdown Parser ────────▶ HTML コンテンツ
                                │
                                ├─ remarkPlugins
                                │      ├─ npm2yarn変換
                                │      └─ tab-blocks変換
                                │
                                └─ Front Matter解析
                                       └─ メタデータ抽出

sidebars.json ──────────▶ Sidebar Generator ──────▶ サイドバーUI

docusaurus.config.js ───▶ Theme/Layout ───────────▶ ページレイアウト
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| GettingStarted.md | `docs/GettingStarted.md` | ドキュメント | Getting Startedページのコンテンツ |
| sidebars.json | `website/sidebars.json` | 設定 | サイドバーナビゲーション定義 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurus全体設定 |
| UsingMatchers.md | `docs/UsingMatchers.md` | ドキュメント | 次のページ（遷移先） |
| CLI.md | `docs/CLI.md` | ドキュメント | CLI Optionsページ（参照先） |
| Webpack.md | `docs/Webpack.md` | ドキュメント | Webpackページ（参照先） |
| Configuration.md | `docs/Configuration.md` | ドキュメント | 設定ページ（参照先） |
