# 画面設計書 21-Configuration - Sharing Configurations

## 概要

本ドキュメントは、Prettier公式サイトの「Sharing Configurations」ドキュメントページの画面設計書である。このページは、Prettierの設定を複数プロジェクト間で共有する方法を解説するドキュメントページとして機能する。

### 本画面の処理概要

この画面では、Prettierの設定を複数のプロジェクトで共有するための「共有設定（Shareable Config）」の作成、公開、利用方法を包括的に解説している。

**業務上の目的・背景**：複数のプロジェクトを持つ開発チームや組織において、各プロジェクトに同じPrettier設定をコピー&ペーストするのは非効率であり、設定の一貫性を保つことが困難である。この画面は、npmパッケージとして設定を公開・共有することで、設定の一元管理と再利用を可能にする方法を提供する。

**画面へのアクセス方法**：ホームページのナビゲーションバーから「Docs」をクリックし、サイドバーの「Configuring Prettier」セクション内の「Sharing Configurations」リンクをクリックしてアクセスする。URLは `/docs/sharing-configurations` である。

**主要な操作・処理内容**：
1. 共有設定パッケージの作成手順の閲覧（package.json、index.jsの設定例）
2. npmへのパッケージ公開方法の確認
3. 共有設定の利用方法（package.jsonでの参照、.prettierrcでの参照）の学習
4. 共有設定の拡張・オーバーライド方法の理解
5. プラグインを含む共有設定の作成方法の確認

**画面遷移**：
- 遷移元：Configuration（設定ファイル）ページ、Optionsページ、ホームページ
- 遷移先：Configuration（設定ファイル）ページ、Pluginsページ（リンク参照）

**権限による表示制御**：なし（公開ドキュメントページ）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 画面機能マッピングに該当なし（ドキュメントページのため直接的なAPI連携はなし） |

## 画面種別

ドキュメント表示（静的コンテンツ）

## URL/ルーティング

- URL: `/docs/sharing-configurations`
- ルーティング: Docusaurus docs機能による自動生成

## 入出力項目

本画面は静的なドキュメント表示ページのため、ユーザー入力項目はない。

| 項目名 | 入出力 | 型 | 説明 |
|--------|--------|-----|------|
| - | - | - | 該当なし |

## 表示項目

| 項目名 | 説明 | 備考 |
|--------|------|------|
| ページタイトル | "Sharing configurations" | H1見出し |
| 共有設定の概要説明 | 複数プロジェクトでの設定共有の利点 | 導入テキスト |
| Creating a Shareable Config | 共有設定パッケージの作成方法 | セクション |
| パッケージ構成例 | package.jsonとindex.jsのコード例 | コードブロック |
| Publishing a Shareable Config | npmへの公開手順 | セクション |
| Using a Shareable Config | 共有設定の利用方法 | セクション |
| パッケージマネージャータブ | npm/yarn/pnpm/bunのインストールコマンド | Docusaurus Tabs |
| Extending a Sharable Config | 設定の拡張・オーバーライド方法 | セクション |
| Include Plugins | プラグイン込みの共有設定 | セクション |
| 外部リンク | GitHub上の参考リポジトリへのリンク | アンカーリンク |

## イベント仕様

### 1-ページ読み込み

Docusaurusによる静的サイトジェネレーションにより、ビルド時にMarkdownファイルからHTMLページが生成される。ユーザーがページにアクセスすると、生成済みのHTMLコンテンツが表示される。

### 2-タブ切り替え

パッケージマネージャーのインストールコマンドセクションでは、Docusaurusの`Tabs`コンポーネントにより、npm/yarn/pnpm/bunのタブを切り替えることができる。タブ状態はローカルストレージに保存され、他のページでも選択が維持される。

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

サイドバーのリンクをクリックすると、該当するドキュメントページに遷移する。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | 静的サイトのため該当なし |

## メッセージ仕様

| メッセージID | 種別 | 表示条件 | メッセージ内容 |
|-------------|------|---------|---------------|
| - | - | - | 静的ドキュメントページのため該当なし |

## 例外処理

| 例外 | 処理内容 |
|------|---------|
| 404 Not Found | ドキュメントが存在しない場合、Docusaurusの404ページを表示 |
| ビルドエラー | Markdown構文エラー時はビルド時にエラーを出力 |

## 備考

- 本ページはDocusaurusのdocs機能を使用して生成される
- Markdownファイルのフロントマターで`id: sharing-configurations`と`title: Sharing configurations`を定義
- `@theme/Tabs`と`@theme/TabItem`コンポーネントをインポートしてパッケージマネージャータブを実装
- 外部リンクとして、azz/prettier-config、kachkaev/routine-npm-packagesのGitHubリポジトリを参照

---

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

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

### 推奨読解順序

#### Step 1: ドキュメントコンテンツを理解する

まず、実際のMarkdownドキュメントの内容と構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | sharing-configurations.md | `docs/sharing-configurations.md` | ページのコンテンツ、フロントマター、Tabsコンポーネントの使用方法 |

**読解のコツ**: Docusaurusでは、Markdownファイル冒頭のフロントマター（`---`で囲まれた部分）でページIDとタイトルを定義する。React/JSXコンポーネント（Tabs、TabItem）をMarkdown内で直接使用できる。

#### Step 2: サイドバー構成を理解する

ドキュメントのナビゲーション構造を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | sidebars.json | `website/sidebars.json` | "Configuring Prettier"カテゴリ内での位置づけ |

**主要処理フロー**:
1. **行22-25**: "Configuring Prettier"カテゴリに"sharing-configurations"が含まれている

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

サイト全体の設定とドキュメント機能の設定を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | docusaurus.config.js | `website/docusaurus.config.js` | docs設定（パス、サイドバー、バージョニング） |

**主要処理フロー**:
- **行73-91**: docs プリセットの設定（sidebarPath、editUrl、path、versions）

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

```
Docusaurus Build Process
    |
    +-- docs/sharing-configurations.md (Source)
    |      |
    |      +-- @theme/Tabs (Component Import)
    |      +-- @theme/TabItem (Component Import)
    |
    +-- website/sidebars.json (Navigation)
    |      |
    |      +-- "Configuring Prettier" Category
    |             +-- sharing-configurations
    |
    +-- website/docusaurus.config.js (Configuration)
           |
           +-- docs preset configuration
           +-- theme configuration
```

### データフロー図

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

Markdown File     ------> Docusaurus MDX Compiler -----> HTML Page
(docs/sharing-           (React Component Rendering)    (/docs/sharing-
configurations.md)                                       configurations)
       |
       +-- Frontmatter (id, title)
       +-- Content (Markdown + JSX)
       +-- Tabs/TabItem Components
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| sharing-configurations.md | `docs/sharing-configurations.md` | ソース | ドキュメントコンテンツ（Markdown） |
| sidebars.json | `website/sidebars.json` | 設定 | サイドバーナビゲーション構成 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurusサイト全体の設定 |
| Tabs | `@theme/Tabs` | コンポーネント | タブUI（Docusaurus組み込み） |
| TabItem | `@theme/TabItem` | コンポーネント | タブ項目（Docusaurus組み込み） |
