# 機能設計書 47-@babel/plugin-transform-react-display-name

## 概要

本ドキュメントは、BabelプラグインであるReactコンポーネントへのdisplayName自動追加機能について記述する。

### 本機能の処理概要

**業務上の目的・背景**：
React DevToolsやエラースタックトレースでコンポーネントを識別する際、displayNameプロパティが使用される。本来、React.createClass()やcreateReactClass()で作成されたコンポーネントには手動でdisplayNameを設定する必要があるが、本プラグインはこれを自動的に追加することで、デバッグ体験を向上させる。

**機能の利用シーン**：
- React.createClass()を使用したレガシーコードベース
- createReactClassライブラリを使用したプロジェクト
- @babel/preset-reactを通じた利用
- React DevToolsでのコンポーネント識別

**主要な処理内容**：
1. React.createClass()呼び出しの検出
2. createReactClass()呼び出しの検出
3. 変数名、プロパティ名、ファイル名からdisplayNameを推論
4. displayNameプロパティが未設定の場合のみ追加
5. export defaultの場合はファイル名を使用

**関連システム・外部連携**：
node:pathモジュールでファイル名からdisplayNameを生成。

**権限による制御**：
特になし。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 本機能はCLI/APIから利用されるプラグインのため、直接の画面関連なし |

## 機能種別

コード拡張（AST変換）

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| （なし） | - | - | 本プラグインにはオプションなし | - |

### 入力データソース

React.createClass()またはcreateReactClass()呼び出しを含むJavaScriptソースコード（AST形式）

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| transformedAST | t.Program | displayNameが追加されたAST |
| displayNameProperty | t.ObjectProperty | 追加されたdisplayNameプロパティ |

### 出力先

変換されたAST（@babel/coreに返却）

## 処理フロー

### 処理シーケンス

```
1. ExportDefaultDeclarationビジター
   └─ isCreateClass()で対象判定
   └─ ファイル名からdisplayName取得
   └─ index.jsの場合はディレクトリ名を使用
2. CallExpressionビジター
   └─ isCreateClass()で対象判定
   └─ 親を辿ってdisplayName候補を取得
      └─ AssignmentExpression: 左辺の識別子
      └─ ObjectProperty: キー
      └─ VariableDeclarator: id
   └─ displayNameが未設定の場合のみ追加
```

### フローチャート

```mermaid
flowchart TD
    A[開始] --> B{ExportDefault?}
    B -->|Yes| C{isCreateClass?}
    C -->|Yes| D[ファイル名からdisplayName取得]
    D --> E{index.js?}
    E -->|Yes| F[ディレクトリ名を使用]
    E -->|No| G[ファイル名を使用]
    F --> H[addDisplayName呼び出し]
    G --> H
    C -->|No| I[終了]
    B -->|No| J{CallExpression?}
    J -->|Yes| K{isCreateClass?}
    K -->|Yes| L[親を辿ってid取得]
    L --> M{id見つかった?}
    M -->|Yes| N{Identifier?}
    N -->|Yes| O[addDisplayName呼び出し]
    N -->|No| I
    M -->|No| I
    K -->|No| I
    J -->|No| I
    H --> I
    O --> I
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-47-01 | createClass検出 | React.createClassまたはcreateReactClass呼び出しを検出 | CallExpression検出時 |
| BR-47-02 | displayName未設定チェック | 既存のdisplayNameがある場合は追加しない | propsにdisplayNameなし時 |
| BR-47-03 | 変数名推論 | const Foo = createClass({})からFooをdisplayNameに | VariableDeclarator検出時 |
| BR-47-04 | プロパティ名推論 | {bar: createClass({})}からbarをdisplayNameに | ObjectProperty検出時 |
| BR-47-05 | 代入先推論 | Foo.bar = createClass({})からbarをdisplayNameに | AssignmentExpression検出時 |
| BR-47-06 | ファイル名推論 | export default createClass({})からファイル名を使用 | ExportDefaultDeclaration時 |
| BR-47-07 | index.js特別処理 | index.jsの場合はディレクトリ名を使用 | ファイル名がindex時 |

### 計算ロジック

displayName推論ロジック:
```javascript
// 1. 変数宣言
const MyComponent = createReactClass({});
// → displayName: "MyComponent"

// 2. オブジェクトプロパティ
{
  MyComponent: createReactClass({})
}
// → displayName: "MyComponent"

// 3. 代入式
module.exports = createReactClass({});
// → displayName: "exports"

// 4. デフォルトエクスポート (src/components/Button.js)
export default createReactClass({});
// → displayName: "Button"

// 5. デフォルトエクスポート (src/components/Button/index.js)
export default createReactClass({});
// → displayName: "Button"
```

## データベース操作仕様

該当なし（ファイルシステム操作のみ）

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| （なし） | - | 本プラグインはエラーを送出しない | - |

### リトライ仕様

該当なし

## トランザクション仕様

該当なし

## パフォーマンス要件

特定のパフォーマンス要件なし（変換処理は同期的に実行）

## セキュリティ考慮事項

- displayNameは開発時のデバッグ目的のみ
- 本番ビルドでは不要な場合、別途削除可能

## 備考

- React.createClassはReact 15.5で非推奨、16で削除
- 現在はcreateReactClassパッケージまたはクラスコンポーネント/関数コンポーネントを使用
- 関数コンポーネントの場合、関数名がそのままdisplayNameとして使用される

---

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

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

### 推奨読解順序

#### Step 1: 型定義を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.ts | `packages/babel-plugin-transform-react-display-name/src/index.ts` | ReactCreateClassCall型（5-7行目） |

**読解のコツ**: 127行のコンパクトな実装。createClass呼び出しの検出ロジックが中心。

#### Step 2: addDisplayName関数を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.ts | `packages/babel-plugin-transform-react-display-name/src/index.ts` | addDisplayName関数（12-33行目） |

**主要処理フロー**:
- **13行目**: createClass呼び出しの第一引数（オブジェクト）のプロパティを取得
- **16-25行目**: 既存のdisplayNameをチェック
- **28-32行目**: displayNameプロパティを先頭に追加

#### Step 3: isCreateClass関数を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.ts | `packages/babel-plugin-transform-react-display-name/src/index.ts` | isCreateClass関数（40-60行目） |

**主要処理フロー**:
- **35-38行目**: isCreateClassCallExpression（React.createClassのマッチャー）
- **37-38行目**: isCreateClassAddon（createReactClassのマッチャー）
- **40-60行目**: isCreateClass（両方をチェック、引数がオブジェクトか確認）

#### Step 4: ビジターを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | index.ts | `packages/babel-plugin-transform-react-display-name/src/index.ts` | ExportDefaultDeclaration/CallExpressionビジター（62-126行目） |

**主要処理フロー**:
- **66-78行目**: ExportDefaultDeclaration処理（ファイル名からdisplayName）
- **73-75行目**: index.jsの場合、ディレクトリ名を使用
- **80-123行目**: CallExpression処理（親を辿ってid取得）

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

```
@babel/plugin-transform-react-display-name/src/index.ts
    │
    ├─ @babel/helper-plugin-utils
    │      └─ declare()
    │
    ├─ node:path
    │      ├─ basename()
    │      ├─ extname()
    │      └─ dirname()
    │
    └─ @babel/core/types
           ├─ buildMatchMemberExpression()
           ├─ toComputedKey()
           ├─ isStringLiteral()
           └─ objectProperty()
```

### データフロー図

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

JSソースコード  ──▶  Parser (AST生成)
                              │
                              ▼
                     createClass検出
                              │
                     ┌────────┼────────┐
                     ▼        ▼        ▼
              変数名取得 ファイル名取得 プロパティ名取得
                     │        │        │
                     └────────┼────────┘
                              │
                              ▼
                     displayName追加
                              │
                              ▼
                       変換済みAST ──▶ Generator ──▶ JSコード
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.ts | `packages/babel-plugin-transform-react-display-name/src/index.ts` | ソース | メインプラグイン実装（127行） |
| package.json | `packages/babel-plugin-transform-react-display-name/package.json` | 設定 | 依存関係・メタデータ |
