# 画面設計書 3-ユーザー一覧

## 概要

本ドキュメントはPrettierウェブサイトのユーザー一覧ページの画面設計書です。Prettierを利用している企業・プロジェクトのロゴ一覧を表示するコミュニティページとして機能します。

### 本画面の処理概要

本画面はPrettierを採用している企業やプロジェクトのロゴを一覧表示し、Prettierの普及度と信頼性を示すショーケースページです。

**業務上の目的・背景**：Prettierの導入を検討している企業や開発者に対して、既に多くの著名な企業やプロジェクトがPrettierを採用していることを示し、導入の安心感と信頼性を提供します。また、State of JSの調査結果を引用することで、開発者コミュニティ全体での採用率の高さを客観的に示しています。

**画面へのアクセス方法**：
- ホームページの「See others」ボタンをクリック
- ブラウザで直接 `https://prettier.io/users` にアクセス
- フッターの「User Showcase」リンクをクリック

**主要な操作・処理内容**：
1. 企業・プロジェクトロゴの一覧表示
2. ロゴクリックで各企業・プロジェクトの詳細ページ（外部サイト）へ遷移
3. State of JS調査結果へのリンク表示
4. npm依存パッケージ一覧へのリンク表示

**画面遷移**：
- 遷移元：ホームページ、フッターリンク
- 遷移先：各企業の詳細ページ（外部）、State of JS調査ページ（外部）、npm依存パッケージ一覧（外部）

**権限による表示制御**：本画面は公開ページのため、権限による表示制御はありません。全ての訪問者が同一のコンテンツを閲覧できます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 本画面には直接関連する機能はありません |

## 画面種別

一覧 / ショーケース

## URL/ルーティング

- URL: `/users`
- ファイルパス: `website/src/pages/users/index.jsx`

## 入出力項目

本画面はユーザー入力を受け付けない表示専用ページです。

| 項目名 | 入出力 | 型 | 必須 | 説明 |
|--------|--------|-----|------|------|
| - | - | - | - | 入力項目なし |

## 表示項目

| セクション | 項目名 | 表示形式 | データソース |
|------------|--------|----------|--------------|
| ヘッダー | ページタイトル | H1テキスト | 静的テキスト「Who's Using This?」 |
| 統計情報 | State of JS 2021 | Admonitionリスト | 静的テキスト |
| 統計情報 | State of JS 2020 | Admonitionリスト | 静的テキスト |
| ロゴグリッド | 企業ロゴ | 画像グリッド | website/data/users.yml |
| フッター | 追加プロジェクトリンク | テキストリンク | npm依存パッケージページへのリンク |

## イベント仕様

### 1-企業ロゴクリック

企業ロゴをクリックすると、その企業・プロジェクトの詳細ページ（外部サイト）へ遷移します。

**処理フロー**：
1. ロゴ画像（Linkコンポーネント）クリックイベント発火
2. `user.infoLink`で指定されたURLへ遷移
3. 新しいタブまたは同一タブで外部サイトが開く

### 2-State of JS リンククリック

State of JSの調査結果ページへ遷移します。

**処理フロー**：
1. リンククリックイベント発火
2. State of JS 2021または2020の該当ページへ遷移

### 3-npm依存パッケージリンククリック

npmの依存パッケージ一覧ページへ遷移します。

**処理フロー**：
1. 「many more projects」リンククリックイベント発火
2. `https://www.npmjs.com/browse/depended/prettier`へ遷移

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

本画面はデータベースを使用しません。全てのデータは設定ファイル（YAML）から読み込まれます。

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | データベース操作なし |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|----------------|----------|
| MSG-01 | 情報 | Prettier is regularly used by: | 常時表示（Admonitionタイトル） |

## 例外処理

| 例外ケース | 処理内容 | ユーザーへの表示 |
|-----------|----------|-----------------|
| users.yml読み込み失敗 | ビルド時エラー | 本番環境では発生しない（ビルド時に検出） |
| 画像読み込み失敗 | 代替テキスト表示 | title属性の値またはalt属性 |

## 備考

- 本画面はDocusaurusフレームワークをベースに構築されています
- ロゴデータは`website/data/users.yml`で管理
- CSSモジュールによるスタイリング（`index.module.css`）
- レスポンシブグリッドレイアウト採用（flexbox）
- Admonitionコンポーネントで統計情報を目立たせて表示

---

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

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

### 推奨読解順序

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

まず、ユーザー（企業）データの構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | users.yml | `website/data/users.yml` | ユーザーデータの構造（caption, image, infoLink, greyImage, pinned） |
| 1-2 | docusaurus.config.js | `website/docusaurus.config.js` | customFields.usersでのデータ注入 |

**読解のコツ**: users.ymlの各フィールドの役割を理解し、pinnedフラグがホームページ表示用であることを確認してください。

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

コンポーネントの構造を把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.jsx | `website/src/pages/users/index.jsx` | Usersコンポーネントの全体構造 |

**主要処理フロー**:
1. **9-11行目**: useDocusaurusContextからユーザーデータ取得
2. **13-19行目**: ユーザーデータをロゴ要素にマップ
3. **21-62行目**: レイアウトとUI構成

#### Step 3: スタイリングを理解する

CSSモジュールによるレイアウトを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.module.css | `website/src/pages/users/index.module.css` | グリッドレイアウトとロゴスタイル |

**主要スタイル**:
- **6-11行目**: logoGridのflexboxレイアウト
- **17-26行目**: logoItemのセンタリングとパディング
- **28-31行目**: ロゴ画像のサイズ制約

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

```
Users (index.jsx:9)
    │
    ├─ Layout (@theme/Layout)
    │      └─ Docusaurusテーマレイアウト
    │
    ├─ useDocusaurusContext()
    │      └─ siteConfig.customFields.users
    │
    ├─ Heading (@theme/Heading)
    │
    ├─ Admonition (@theme/Admonition)
    │      └─ 統計情報リスト
    │
    └─ section.logoGrid
           └─ div.logoItem × N
                  └─ Link → img
```

### データフロー図

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

website/data/users.yml  ───▶ docusaurus.config.js    ───▶ customFields.users
         │                           │
         ▼                           ▼
ビルド時読み込み        ───▶ useDocusaurusContext()  ───▶ siteConfig.customFields.users
         │                           │
         ▼                           ▼
users配列              ───▶ .map()                  ───▶ showcase (React要素配列)
         │                           │
         ▼                           ▼
React要素              ───▶ レンダリング            ───▶ ロゴグリッド表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.jsx | `website/src/pages/users/index.jsx` | ソース | ユーザー一覧ページコンポーネント |
| index.module.css | `website/src/pages/users/index.module.css` | スタイル | CSSモジュールによるスタイル定義 |
| users.yml | `website/data/users.yml` | データ | 企業・プロジェクト情報 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurus設定とcustomFields |
| @theme/Layout | Docusaurusテーマ | ライブラリ | ページレイアウト |
| @theme/Admonition | Docusaurusテーマ | ライブラリ | 情報ボックスコンポーネント |
| @theme/Heading | Docusaurusテーマ | ライブラリ | 見出しコンポーネント |
| @docusaurus/Link | Docusaurus | ライブラリ | リンクコンポーネント |
