IOS UI Builder

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が複数パターン用意されているか
• ダークモード対応を確認したか
• 再利用可能な部分をコンポーネント化したか

Converted and distributed by TomeVault — claim your Tome and manage your conversions.