iOS UI Builder

SwiftUIを使ったiOSアプリのUI実装を支援するスキル。

ワークフロー

1. 要件の明確化

ユーザーの説明から以下を把握する:

画面/コンポーネントの目的
必要なUI要素（ボタン、リスト、入力フィールド等）
ユーザーインタラクション（タップ、スワイプ等）
表示するデータの種類

不明点があれば質問して明確にする。

2. 既存コンポーネントの確認（重要）

実装前に必ず既存コードを確認する。

プロジェクト内で以下を検索:

共通コンポーネント（Components/, Views/Common/, Shared/等）
類似の画面・コンポーネント
デザインシステム関連ファイル（Theme, Style, Color等）

既存コンポーネントを見つけた場合:

可能な限り再利用する
拡張が必要なら既存を拡張
新規作成が必要な場合のみ新しく作成

3. デザイン設計

実装前にデザインの概要をユーザーに説明:

レイアウト構造（VStack/HStack/ZStack等）
使用するコンポーネント
色やスペーシングの方針

4. View + #Preview実装

基本構造

import SwiftUI

struct [ViewName]View: View {
    // MARK: - Properties

    // MARK: - Body
    var body: some View {
        // 実装
    }
}

// MARK: - Preview
#Preview {
    [ViewName]View()
}

Previewの充実（重要）

#Preview macroで複数のプレビューバリエーションを提供:

#Preview("Default") {
    [ViewName]View()
}

#Preview("With Data") {
    [ViewName]View(items: sampleItems)
}

#Preview("Empty State") {
    [ViewName]View(items: [])
}

#Preview("Dark Mode") {
    [ViewName]View()
        .preferredColorScheme(.dark)
}

状況に応じて以下も追加:

異なるデバイスサイズ
Dynamic Type対応確認
ローディング状態
エラー状態

5. コンポーネント化の判断

以下の場合はコンポーネントとして分離:

他の画面でも使えそうな汎用的なUI
複雑で独立したロジックを持つ部分
繰り返し使われるパターン

コンポーネント化する場合:

適切なディレクトリに配置（Components/等）
汎用的なAPIを設計
単体での#Previewを提供

SwiftUIベストプラクティス

レイアウト

VStack, HStack, ZStackを適切に使い分ける
Spacer()でフレキシブルなスペーシング
padding()で一貫したマージン
frame()は必要最小限に

再利用性

ViewModifierで共通スタイルを定義
Extensionで便利なメソッドを追加
@ViewBuilderで柔軟なコンポーネント

パフォーマンス

大きなViewは小さなサブViewに分割
必要に応じて@State, @Bindingを使用
リストはLazyVStack/LazyHStackを検討

チェックリスト

実装完了時に確認:

[ ] 既存コンポーネントを確認したか
[ ] #Previewが複数パターン用意されているか
[ ] ダークモード対応を確認したか
[ ] 再利用可能な部分をコンポーネント化したか