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