Rork Max の AI × SwiftUI：生成コードをプロ品質の UX に仕上げる 4 つの実装パターン

// Rork Max が生成する典型的なパターン
struct ArticleListView: View {
    @State private var articles: [Article] = []
    @State private var isLoading = true
 
    var body: some View {
        if isLoading {
            ProgressView() // ← これをスケルトンに置き換える
        } else {
            List(articles) { article in
                ArticleRow(article: article)
            }
        }
    }
}
 
// スケルトン UI 版
struct ArticleListView: View {
    @State private var articles: [Article] = []
    @State private var isLoading = true
 
    var body: some View {
        List {
            if isLoading {
                // コンテンツの形に合ったスケルトンを 4 行表示
                ForEach(0..<4, id: \.self) { _ in
                    ArticleSkeletonRow()
                }
            } else {
                ForEach(articles) { article in
                    ArticleRow(article: article)
                }
            }
        }
        .task { await fetchArticles() }
    }
}
 
// スケルトン行コンポーネント
struct ArticleSkeletonRow: View {
    @State private var isAnimating = false
 
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            // タイトル行のプレースホルダー
            RoundedRectangle(cornerRadius: 4)
                .fill(Color.gray.opacity(0.2))
                .frame(width: 200, height: 16)
            // 説明文のプレースホルダー
            RoundedRectangle(cornerRadius: 4)
                .fill(Color.gray.opacity(0.15))
                .frame(maxWidth: .infinity)
                .frame(height: 12)
        }
        .padding(.vertical, 8)
        .opacity(isAnimating ? 0.5 : 1.0)
        .animation(
            .easeInOut(duration: 0.9).repeatForever(autoreverses: true),
            value: isAnimating
        )
        .onAppear { isAnimating = true }
    }
}

// iOS 18+ のズームトランジション
struct ArticleListView: View {
    @Namespace private var namespace
 
    var body: some View {
        NavigationStack {
            List(articles) { article in
                NavigationLink(value: article) {
                    ArticleRow(article: article)
                }
                .matchedTransitionSource(id: article.id, in: namespace)
            }
            .navigationDestination(for: Article.self) { article in
                ArticleDetailView(article: article)
                    .navigationTransition(.zoom(sourceID: article.id, in: namespace))
            }
        }
    }
}
 
// モーダル操作（設定画面など）：下からスライドアップ
.sheet(isPresented: $showSettings) {
    SettingsView()
        .presentationDetents([.medium, .large])
        .presentationDragIndicator(.visible)
}

// エラー種別を意味別に定義
enum AppError: Error {
    case networkUnavailable
    case serverError(Int)
    case timeout
 
    var title: String {
        switch self {
        case .networkUnavailable: return "接続できませんでした"
        case .serverError:        return "サービスが一時的に利用できません"
        case .timeout:            return "時間がかかっています"
        }
    }
 
    var message: String {
        switch self {
        case .networkUnavailable:
            return "Wi-Fi またはモバイルデータ通信を確認してください"
        case .serverError(let code):
            return "しばらく経ってから再度お試しください（エラーコード: \(code)）"
        case .timeout:
            return "通信速度が低下している可能性があります"
        }
    }
 
    var sfSymbol: String {
        switch self {
        case .networkUnavailable: return "wifi.slash"
        case .serverError:        return "exclamationmark.triangle"
        case .timeout:            return "clock.badge.exclamationmark"
        }
    }
}
 
// 再利用可能なエラー表示コンポーネント
struct ErrorStateView: View {
    let error: AppError
    let retryAction: () -> Void
 
    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: error.sfSymbol)
                .font(.system(size: 48))
                .foregroundColor(.secondary)
 
            VStack(spacing: 8) {
                Text(error.title)
                    .font(.headline)
                Text(error.message)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                    .multilineTextAlignment(.center)
            }
 
            Button("もう一度試す", action: retryAction)
                .buttonStyle(.borderedProminent)
        }
        .padding(32)
    }
}

// アプリ全体で使いやすくするハプティクスラッパー
struct HapticManager {
    /// 軽い確認（チェックボックス ON/OFF など）
    static func light() {
        UIImpactFeedbackGenerator(style: .light).impactOccurred()
    }
 
    /// 中程度（通常のボタンタップ）
    static func medium() {
        UIImpactFeedbackGenerator(style: .medium).impactOccurred()
    }
 
    /// 成功通知（タスク完了、保存成功）
    static func success() {
        UINotificationFeedbackGenerator().notificationOccurred(.success)
    }
 
    /// エラー通知（削除確認、操作失敗）
    static func error() {
        UINotificationFeedbackGenerator().notificationOccurred(.error)
    }
}
 
// 使用例：タスク完了ボタン
Button("完了にする") {
    HapticManager.success() // 先にハプティクス → 処理
    viewModel.completeTask()
}
 
// 使用例：スワイプ削除
.swipeActions(edge: .trailing) {
    Button(role: .destructive) {
        HapticManager.error()
        viewModel.delete(item)
    } label: {
        Label("削除", systemImage: "trash")
    }
}
 
// 使用例：トグルスイッチ
Toggle("通知をオン", isOn: $notificationsEnabled)
    .onChange(of: notificationsEnabled) {
        HapticManager.light()
    }