---

name: view-implementation description: Implements UIToolkit Views with BEM naming. MUST use proactively when implementing any UI, Page, Section, Modal, or screen-related features. Also triggers on "View", "UI", "画面", "UXML". allowed-tools: Read, Grep, Glob, Edit, Write

View Implementation

Execution Mode

2フェーズ実行: 調査と実装を分離し、メインコンテキストを節約。

Phase 1: 調査（Exploreサブエージェント）

複数ファイルの探索が必要な場合、サブエージェントで実行:

CopyrunSubagent(
  description: "View実装パターン調査",
  prompt: """
以下の調査を実行し、結果をサマリーで返してください：

1. 既存View実装パターン確認:
   - Features/*/Presentation/View/ および Shared/Presentation/View/ 配下の構造を把握
   - 同様のコンポーネントがあればその実装を参照

2. BEM命名規則確認:
   - docs/Spec/bem-naming-conventions.md を読んでルール把握

3. 対象画面の要件:
   - 画面名: [対象画面]
   - 必要なSection・モーダルの有無

## 返却フォーマット
- 推奨実装パターン（参考ファイルパス付き）
- Orchestrator使用要否
- BEMクラス名提案
"""
)

Phase 2: 実装（メイン）

調査結果に基づき、メインコンテキストで実装。

References

View実装の詳細は以下のドキュメントを参照：

• Viewアーキテクチャ: docs/Spec/view-architecture.md
• BEM命名規則: docs/Spec/bem-naming-conventions.md
• Presentation層仕様: docs/Spec/presentation-layer.md

既存実装の参考：Features/*/Presentation/View/, Shared/Presentation/View/

Decision Flow

Orchestrator使用判断:

• ✅ 必要: 複数Section、Section間通信、複雑な初期化順序
• ❌ 不要: シンプルなページ、Section不使用

Key Patterns

Copy// BEM規約に基づく検索（推奨）
var button = UIElementUtils.QueryByBEM<Button>(
    root, block: "page-name", element: "button", modifier: "primary", context: this);

// 状態切り替え
UIElementUtils.UpdateTabSelection(tabs, selectedIndex, selectedClass: "tab--selected");

Checklist

• PageはObservableを公開、Presenterへの逆参照なし
• SectionはPageSectionBase継承、EnsureElements()パターン使用
• 購読はCompositeDisposableで管理
• OnEnable時にrootVisualElement再取得

新Feature追加時のView構成

新しいFeature（例: Features/Shop/）を追加する場合:

1. フォルダ構成

CopyFeatures/{FeatureName}/
└── Presentation/
    ├── Presenter/
    │   ├── {FeatureName}Presenter.cs
    │   └── {FeatureName}EventHandler.cs
    └── View/
        └── {FeatureName}SystemPage/
            ├── {FeatureName}SystemPage.cs
            ├── {FeatureName}SystemPage.uxml
            ├── {FeatureName}SystemPage.uss
            └── Sections/
                ├── {FeatureName}ReactiveContext.cs
                └── {Section}Section.cs

2. asmdef作成

Feature用のasmdefを作成:

• Features.{FeatureName}.asmdef
• Dependencies: Shared.Core, Shared.Infrastructure, Shared.Presentation

3. 既存Feature参照

構成パターンを確認: Features/Avatar/, Features/Room/