# Jest ドキュメントサイト 画面遷移図

## 概要

Jestはテスティングフレームワークであり、UIを持つWebアプリケーションではありません。
本画面遷移図は、JestプロジェクトのドキュメントサイトWebサイト（Docusaurus製）の画面遷移を表しています。

## 全体画面遷移図

```mermaid
flowchart TB
    subgraph トップ
        HOME[ホームページ<br/>index.js]
    end

    subgraph ナビゲーション
        DOCS_DROPDOWN[Docsドロップダウン]
        API_LINK[APIリンク]
        HELP_LINK[Helpリンク]
        BLOG_LINK[Blogリンク]
        VERSION_DROPDOWN[バージョンドロップダウン]
    end

    subgraph サポート
        HELP[ヘルプページ<br/>help.js]
        VERSIONS[バージョン一覧<br/>versions.js]
    end

    subgraph ドキュメント["ドキュメント（Introduction）"]
        GETTING_STARTED[Getting Started]
        USING_MATCHERS[Using Matchers]
        ASYNC[Asynchronous]
        SETUP_TEARDOWN[Setup and Teardown]
        MOCK_FUNCTIONS[Mock Functions]
        JEST_PLATFORM[Jest Platform]
        JEST_COMMUNITY[Jest Community]
        MORE_RESOURCES[More Resources]
    end

    subgraph ガイド["ガイド（Guides）"]
        SNAPSHOT[Snapshot Testing]
        TIMER_MOCKS[Timer Mocks]
        MANUAL_MOCKS[Manual Mocks]
        ES6_CLASS[ES6 Class Mocks]
        WEBPACK[Webpack]
        TROUBLESHOOTING[Troubleshooting]
    end

    subgraph API["API Reference"]
        API_REF[API Reference]
        EXPECT[Expect API]
        MOCK_API[Mock Function API]
        JEST_OBJECT[Jest Object]
        CONFIG[Configuration]
        CLI[CLI]
    end

    subgraph ブログ
        BLOG_LIST[ブログ一覧]
        BLOG_DETAIL[ブログ記事詳細]
    end

    HOME --> DOCS_DROPDOWN
    HOME --> API_LINK
    HOME --> HELP_LINK
    HOME --> BLOG_LINK
    HOME --> VERSION_DROPDOWN

    DOCS_DROPDOWN --> GETTING_STARTED
    API_LINK --> API_REF
    HELP_LINK --> HELP
    BLOG_LINK --> BLOG_LIST
    VERSION_DROPDOWN --> VERSIONS

    GETTING_STARTED --> USING_MATCHERS
    USING_MATCHERS --> ASYNC
    ASYNC --> SETUP_TEARDOWN
    SETUP_TEARDOWN --> MOCK_FUNCTIONS
    MOCK_FUNCTIONS --> JEST_PLATFORM
    JEST_PLATFORM --> JEST_COMMUNITY
    JEST_COMMUNITY --> MORE_RESOURCES

    MORE_RESOURCES --> SNAPSHOT
    SNAPSHOT --> TIMER_MOCKS
    TIMER_MOCKS --> MANUAL_MOCKS
    MANUAL_MOCKS --> ES6_CLASS
    ES6_CLASS --> WEBPACK
    WEBPACK --> TROUBLESHOOTING

    API_REF --> EXPECT
    EXPECT --> MOCK_API
    MOCK_API --> JEST_OBJECT
    JEST_OBJECT --> CONFIG
    CONFIG --> CLI

    BLOG_LIST --> BLOG_DETAIL
```

## ヘッダーナビゲーション構成

```mermaid
flowchart LR
    subgraph Header["ヘッダーナビゲーション"]
        LOGO[Jest Logo]
        VERSION[バージョン選択]
        DOCS[Docs]
        API[API]
        HELP[Help]
        BLOG[Blog]
        LOCALE[言語選択]
        GITHUB[GitHub]
    end

    LOGO --> HOME[ホームページ]
    VERSION --> VERSIONS_PAGE[バージョン一覧]
    DOCS --> GETTING_STARTED[Getting Started]
    API --> API_REF[API Reference]
    HELP --> HELP_PAGE[ヘルプページ]
    BLOG --> BLOG_LIST[ブログ一覧]
    GITHUB --> EXTERNAL[外部リンク: GitHub]
```

## フッターリンク構成

```mermaid
flowchart TB
    subgraph Footer["フッターナビゲーション"]
        subgraph Docs["Docs"]
            F_GETTING_STARTED[Getting Started]
            F_GUIDES[Guides]
            F_API[API Reference]
        end

        subgraph Community["Community"]
            STACKOVERFLOW[Stack Overflow]
            REACTIFLUX[Reactiflux]
            TWITTER[Twitter]
        end

        subgraph More["More"]
            F_BLOG[Blog]
            F_GITHUB[GitHub]
            F_TWITTER[Twitter]
        end

        subgraph Legal["Legal"]
            PRIVACY[Privacy]
            TERMS[Terms]
        end
    end
```

## ホームページ内部構成

```mermaid
flowchart TB
    subgraph HomePage["ホームページ構成"]
        HERO[ヒーローセクション<br/>インタラクティブアニメーション]
        BUTTONS[ボタン群]
        INTRO[イントロダクション]
        FEATURES[機能紹介<br/>4カラム]
        FAST_SAFE[Fast and Safe セクション]
        COVERAGE[Code Coverage セクション]
        MOCKING[Easy Mocking セクション]
        EXCEPTIONS[Great Exceptions セクション]
        PHILOSOPHY[Philosophy セクション]
        VIDEO[Docs and Talks セクション]
        SPONSORS[Open Collective セクション]
        USERS[Who uses Jest セクション]
    end

    HERO --> BUTTONS
    BUTTONS --> |Get Started| GETTING_STARTED[Getting Started]
    BUTTONS --> |Docs| DOCS[Docs]
    BUTTONS --> |Config| CONFIG[Configuration]
    BUTTONS --> |Get help| HELP[Help]

    HERO --> INTRO
    INTRO --> FEATURES
    FEATURES --> FAST_SAFE
    FAST_SAFE --> COVERAGE
    COVERAGE --> MOCKING
    MOCKING --> EXCEPTIONS
    EXCEPTIONS --> PHILOSOPHY
    PHILOSOPHY --> VIDEO
    VIDEO --> SPONSORS
    SPONSORS --> USERS
```

## ドキュメントサイドバー構成

```mermaid
flowchart TB
    subgraph Sidebar["ドキュメントサイドバー"]
        subgraph Introduction["Introduction"]
            S_GETTING_STARTED[getting-started]
            S_USING_MATCHERS[using-matchers]
            S_ASYNC[asynchronous]
            S_SETUP[setup-teardown]
            S_MOCK[mock-functions]
            S_PLATFORM[jest-platform]
            S_COMMUNITY[jest-community]
            S_MORE[more-resources]
        end

        subgraph Guides["Guides"]
            S_SNAPSHOT[snapshot-testing]
            S_ASYNC_TUTORIAL[tutorial-async]
            S_TIMER[timer-mocks]
            S_MANUAL[manual-mocks]
            S_ES6[es6-class-mocks]
            S_BYPASS[bypassing-module-mocks]
            S_ESM[ecmascript-modules]
            S_WEBPACK[webpack]
            S_PUPPETEER[puppeteer]
            S_MONGODB[mongodb]
            S_DYNAMODB[dynamodb]
            S_JQUERY[tutorial-jquery]
            S_WATCH[watch-plugins]
            S_MIGRATION[migration-guide]
            S_TROUBLE[troubleshooting]
            S_ARCH[architecture]
        end

        subgraph Framework["Framework Guides"]
            S_RN[tutorial-react-native]
            S_FRAMEWORKS[testing-frameworks]
        end

        subgraph Upgrade["Upgrade Guides"]
            S_JEST29[upgrading-to-jest29]
            S_JEST30[upgrading-to-jest30]
        end
    end
```

## 備考

- すべてのページはDocusaurusフレームワークで構築されている
- ドキュメントページはMarkdownファイルから自動生成される
- 多言語対応（i18n）に対応している
- PWA（Progressive Web App）として動作可能
