swiftui-ui-patterns

SwiftUI UI パターン

クイックスタート

目的に応じてトラックを選択します。

既存のプロジェクト

• 機能または画面と、主なインタラクションモデル（リスト、詳細、エディター、設定、タブ）を特定します。
• rg "TabView\(" などを使ってリポジトリ内の近い例を探し、最も関連性の高い SwiftUI ビューを読みます。
• プロジェクト内の規約に従います。SwiftUI ネイティブの状態管理を優先し、可能な限り状態をローカルに保ち、共有依存関係には環境注入を使用します。
• references/components-index.md から関連するコンポーネントリファレンスを選び、そのガイダンスに従います。
• 小さく目的を絞ったサブビューを使ってビューを構築し、SwiftUI ネイティブのデータフローを使用します。

新しいプロジェクトの足場作り

• TabView + NavigationStack + シートを接続するには、references/app-scaffolding-wiring.md から始めます。
• 提供されたスケルトンをもとに、最小限の AppTab と RouterPath を追加します。
• 最初に必要な UI に応じて、次のコンポーネントリファレンス（TabView、NavigationStack、シート）を選択します。
• 画面を追加するたびに、ルートとシートの列挙型を拡張します。

守るべき一般ルール

• モダンな SwiftUI の状態管理（@State、@Binding、@Observable、@Environment）を使用し、不要なビューモデルは避けます。
• コンポジションを優先し、ビューは小さく目的を絞ったものにします。
• .task と明示的な読み込み状態／エラー状態を使って async/await を使用します。
• レガシーファイルを編集する場合に限り、既存のレガシーパターンを維持します。
• プロジェクトのフォーマッターとスタイルガイドに従います。
• シート：状態が選択されたモデルを表す場合は、.sheet(isPresented:) より .sheet(item:) を優先します。シートの本体内で if let を使用しないでください。シートは自身のアクションを管理し、onCancel／onConfirm クロージャーを渡すのではなく、内部で dismiss() を呼び出します。

新しい SwiftUI ビューのワークフロー

1. ビューの状態と、その所有場所を定義します。
2. @Environment を介して注入する依存関係を特定します。
3. ビュー階層の概要を作成し、繰り返し使う部分をサブビューに切り出します。
4. 必要に応じて、.task と明示的な状態の列挙型を使って非同期読み込みを実装します。
5. UI がインタラクティブな場合は、アクセシビリティラベルまたは識別子を追加します。
6. ビルドで検証し、必要に応じて使用箇所を更新します。

コンポーネントリファレンス

エントリーポイントとして references/components-index.md を使用します。各コンポーネントリファレンスには、以下を含めます。

• 用途と最適なシナリオ。
• プロジェクト内の規約に沿った最小限の使用パターン。
• 注意点とパフォーマンスに関する説明。
• 現在のリポジトリ内にある既存の例へのパス。

シートのパターン

アイテム駆動のシート（推奨）

@State private var selectedItem: Item?

.sheet(item: $selectedItem) { item in
    EditItemSheet(item: item)
}

シートが自身のアクションを管理する

struct EditItemSheet: View {
    @Environment(\.dismiss) private var dismiss
    @Environment(Store.self) private var store

    let item: Item
    @State private var isSaving = false

    var body: some View {
        VStack {
            Button(isSaving ? "Saving…" : "Save") {
                Task { await save() }
            }
        }
    }

    private func save() async {
        isSaving = true
        await store.save(item)
        dismiss()
    }
}

新しいコンポーネントリファレンスの追加

• references/<component>.md を作成します。
• 簡潔で実用的な内容にし、現在のリポジトリ内の具体的なファイルにリンクします。
• 新しいエントリーを references/components-index.md に追加します。

Apple 公式ドキュメント

SwiftUI API と統合パターンの最新情報については、以下を参照してください。

• references/SwiftUI-WebKit-Integration.md - SwiftUI に WebKit ビューを統合するための公式ガイド
• references/SwiftUI-Styled-Text-Editing.md - SwiftUI でのリッチテキスト編集とスタイリング
• references/SwiftUI-New-Toolbar-Features.md - 最新のツールバーのカスタマイズと機能
• references/SwiftUI-AlarmKit-Integration.md - AlarmKit の統合パターンと例

これらのドキュメントには、iOS 26 以降の機能に関する Apple 公式のパターンが記載されています。関連機能を実装する際に参照してください。