ios-swiftui

ios-swiftui

目的

このスキルは、iOS アプリで宣言型 UI を構築するための SwiftUI の専門知識を提供します。ビュー、状態管理、アニメーション、ナビゲーションに重点を置き、開発を効率化します。

使用するタイミング

動的なコンテンツ、ユーザー操作、複雑なナビゲーションを備えたアプリなど、レスポンシブなインターフェースが必要な iOS プロジェクトで使用します。新規 iOS アプリ（iOS 13 以降）の開発、プロトタイピング、UIKit からの移行に適しています。

主な機能

• View プロトコルに準拠する構造体を使用して、ビューを作成および変更します。
• ローカルな変更には @State、親子間の通信には @Binding、外部モデルには @ObservedObject、アプリ全体のデータには @EnvironmentObject を使用して状態を管理します。
• withAnimation{} や .animation(.easeIn) などのモディファイアを使ってアニメーションを実装します。
• NavigationStack を使ってナビゲーションを処理し、複数画面のフローにスタック、リスト、シートを組み込みます。

使用パターン

SwiftUI ビューを構築するには、View に準拠する構造体を定義し、body 内でモディファイアを使用します。状態を管理するには、変数を @State でラップし、関数を使って更新します。パターン：アプリのルートビューで .environmentObject() を介して共有データを注入し、@EnvironmentObject を使用します。リストには、動的なコンテンツを表示するために List{} に ForEach{} を適用します。迅速に反復できるよう、必ず #Preview{} でビューをプレビューします。シートを扱うには、View に .sheet(isPresented: $isShowing) {} を使用します。

一般的なコマンド／API

ローカル状態には @State を使用します：@State private var count: Int = 0 とし、Button("Tap") { count += 1 } でインクリメントします。 .padding() や .foregroundColor(.blue) などのモディファイアをビューに直接適用します。例：Text("Hello").padding().background(.yellow)。 アニメーションを使うには、ビューに .animation(.default) を指定し、変更を withAnimation { self.isAnimating.toggle() } で囲みます。 ナビゲーションの例：NavigationStack { List(items, id: \.id) { item in NavigationLink { DetailView(item: item) } } }。 設定形式：Xcode のプロジェクト設定で SwiftUI が選択されていることを確認し、ファイルで SwiftUI をインポートします。

統合に関する注意

既存の iOS プロジェクトに SwiftUI を統合するには、UIHostingController を介して UIKit アプリに SwiftUI ビューを追加します。let hostingController = UIHostingController(rootView: MySwiftUIView()) のようにコードで設定します。アプリ全体で使うオブジェクトは、@main App 構造体内で .environmentObject() を介して渡します。例：@main struct App: App { var body: some Scene { WindowGroup { ContentView().environmentObject(MyModel()) } } }。API キーが必要な場合（ネットワーク通信など）は、let apiKey = ProcessInfo.processInfo.environment["MY_API_KEY"] のように環境変数から読み込み、監視対象オブジェクトで処理します。Xcode のプロジェクト設定で、iOS のデプロイメントターゲットが 13.0 以降になっていることを確認します。

エラー処理

状態に関連するエラーを防ぐには、@State の更新がメインスレッド上で行われるようにします。非同期更新には DispatchQueue.main.async を使用します。例：DispatchQueue.main.async { self.data = newData }。ナビゲーションに問題がある場合は、NavigationStack のパスを確認し、.onAppear{} を使って状態を検証します。例：onAppear { if path.isEmpty { path.append("home") } }。よくあるエラー：「Cannot use instance member」— 変数を @State にすることで修正します。デバッグには print() または os_log でエラーを記録します。バインディングが機能しない場合は、子ビューにラップされた値が正しく渡されていることを確認します。

具体的な使用例

例 1：シンプルなカウンタービュー — @State を使ってビューを作成します：struct CounterView: View { @State var count: Int = 0 var body: some View { VStack { Text("Count: \(count)") Button("Increment") { count += 1 } } } }。アプリでは次のように使用します：ContentView().environment(\.colorScheme, .dark)。 例 2：リストを使ったナビゲーション — リストビューを構築します：struct ItemList: View { @State var items = [1,2,3] var body: some View { NavigationStack { List(items, id: \.self) { item in Text("Item \(item)") } .navigationTitle("Items") } } }。次のように表示して統合します：ItemList().sheet(isPresented: $showSheet) { DetailView() }。

グラフの関連性

• 関連するクラスター：mobile（例：android-kotlin スキルと依存関係を共有します）。
• リンク先：swift（言語のコア機能向け）、ios-core（iOS の基盤 API 向け）。
• 依存関係：ビルドには xcode-tools が必要です。バックエンドサービスには firebase-ios を統合します。