SwiftUI UIコンポーネントカタログ

iOS 16以降で利用可能なSwiftUIコンポーネントを機能別に整理したリファレンス。

ディレクトリ構成

code

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を実装する際

•実装したい機能に対応するリファレンスファイルを参照
•バージョン対応表でプロジェクトのデプロイメントターゲットとの互換性を確認
•コード例を参考に実装

利用可能なコンポーネントを探す際

•バージョン対応表でデプロイメントターゲット以下のコンポーネントを確認
•該当するリファレンスファイルで詳細を確認