SwiftUI UIコンポーネントカタログ
iOS 16以降で利用可能なSwiftUIコンポーネントを機能別に整理したリファレンス。
ディレクトリ構成
swiftui-components/ ├── SKILL.md (このファイル) └── references/ ├── navigation.md # ナビゲーション ├── charts.md # チャート・グラフ ├── scroll.md # スクロール ├── media.md # メディア・共有 ├── animation.md # アニメーション ├── layout.md # レイアウト ├── tips.md # TipKit ├── preview.md # プレビュー ├── container.md # コンテナ値 ├── theming.md # テーマ・デザイン └── webview.md # WebView
リファレンスファイル
references/navigation.md
ナビゲーション関連コンポーネント：
-
NavigationStack (iOS 16+): NavigationViewの後継、プログラマティックナビゲーション
-
NavigationSplitView (iOS 16+): 2列/3列レイアウト対応
-
NavigationPath (iOS 16+): 複数の型をサポートするナビゲーションパス
-
TabView刷新 (iOS 26+): 新デザイン・アニメーション
references/charts.md
チャート・グラフ関連コンポーネント：
-
Swift Charts (iOS 16+): LineMark, BarMark, AreaMark, PointMark等
-
Chart3D (iOS 26+): 3Dチャートのネイティブサポート
references/scroll.md
スクロール関連コンポーネント：
-
scrollPosition (iOS 17+): スクロール位置の取得・設定
-
scrollTargetBehavior (iOS 17+): スナップスクロール
-
containerRelativeFrame (iOS 17+): 親コンテナに対する相対サイズ指定
references/media.md
メディア・共有関連コンポーネント：
-
PhotosPicker (iOS 16+): 写真ライブラリアクセス不要の写真選択
-
ShareLink (iOS 16+): 標準シェア機能のSwiftUI対応
-
Transferable (iOS 16+): データ転送プロトコル
references/animation.md
アニメーション関連コンポーネント：
-
symbolEffect (iOS 17+): SF Symbolsアニメーション
-
contentTransition (iOS 17+): テキスト・コンテンツ変更アニメーション
-
phaseAnimator (iOS 17+): 複数フェーズのアニメーション
-
keyframeAnimator (iOS 17+): キーフレームベースのアニメーション
-
@Animatable (iOS 26+): アニメーション対応マクロ
references/layout.md
レイアウト関連コンポーネント：
-
Grid (iOS 16+): 柔軟なグリッドレイアウト
-
ViewThatFits (iOS 16+): スペースに応じた自動ビュー選択
-
AnyLayout (iOS 16+): 動的レイアウト切り替え
-
Gauge (iOS 16+): 進捗・レベル表示
-
Table (iOS 16+): 表形式のデータ表示（macOS/iPadOS）
-
ToolbarSpacer (iOS 26+): ツールバースペース制御
-
labelIconToTitleSpacing (iOS 26+): Labelスペース調整
references/tips.md
TipKitフレームワーク：
- TipKit (iOS 17+): 機能発見ヒント表示
references/preview.md
プレビュー関連：
-
#Preview (iOS 17+): プレビューマクロの簡略化
-
@Previewable (iOS 18+ / Xcode 16+): プレビュー内で直接@State使用
references/container.md
コンテナ値・トランザクション：
-
ContainerValues (iOS 18+): 子→親への値伝達
-
Transaction (iOS 18+): アニメーション制御
references/theming.md
テーマ・デザイン：
-
Liquid Glass (iOS 26+): iOS 7以来最大のUI刷新
-
.liquidGlass() (iOS 26+): Liquid Glassエフェクト
-
.depthLayer() (iOS 26+): 深度レイヤー設定
references/webview.md
WebView関連：
-
WebView (iOS 26+): SwiftUIネイティブWebView
-
Scene Bridging (iOS 26+): UIKit/AppKitとSwiftUIシーンの統合
バージョン対応表（概要）
コンポーネント iOS 備考
NavigationStack 16+ NavigationViewの後継
Swift Charts 16+ 宣言的チャート
PhotosPicker 16+ 権限不要の写真選択
Grid 16+ 柔軟なグリッド
TipKit 17+ 機能発見ヒント
scrollPosition 17+ スクロール位置制御
symbolEffect 17+ SFシンボルアニメ
#Preview 17+ 簡易プレビュー
ContainerValues 18+ 子→親値伝達
@Previewable 18+ プレビュー内@State
Liquid Glass 26+ 新デザイン言語
WebView 26+ ネイティブWebView
@Animatable 26+ アニメーションマクロ
Chart3D 26+ 3Dチャート
使用方法
新しいUIを実装する際
-
実装したい機能に対応するリファレンスファイルを参照
-
バージョン対応表でプロジェクトのデプロイメントターゲットとの互換性を確認
-
コード例を参考に実装
利用可能なコンポーネントを探す際
-
バージョン対応表でデプロイメントターゲット以下のコンポーネントを確認
-
該当するリファレンスファイルで詳細を確認
関連スキル
-
swift-ios-migration: 移行ガイド（@Observable、Swift 6等）
-
swiftui-coding-guidelines: コーディングガイドライン
-
swiftui-ssot: 状態管理の設計