SwiftUIのForm：概要、フォームの作成と設定方法

SwiftUIのFormとは？

Formは、入力フォームや設定画面を作成するために設計された特別なSwiftUIコンテナです。Listの動作を継承しつつ、プラットフォーム固有のスタイルを追加します：iOSでは、Formは角丸のセクションを持つグループ化テーブルとして表示されます。macOSでは、チェックボックスとコントロールを備えた標準のシステムリストとして表示されます。

VStackやHStackを使った手動レイアウトとは異なり、Formは自動的に要素間のスペーシングを調整し、セパレーターを追加し、システムテーマ（ライトまたはダーク）に応じて外観を適応させます。開発者は論理構造のみを記述します：グループ化のためのSectionと内部のコントロール。フォーム自体が、特定のプラットフォームでPicker、Toggle、Stepperをどのように視覚的に配置するかを決定します。

Formはすべての標準SwiftUI入力要素をサポートしています：テキスト用のTextField、パスワード用のSecureField、リスト選択用のPicker、オン/オフ用のToggle、範囲用のSlider、段階的値用のStepper、日付用のDatePicker。各要素は自動的にターゲットプラットフォームのAppleのHIG（Human Interface Guidelines）に準拠したスタイルを取得します。

Form vs List：コンテナ比較

見た目の類似性にもかかわらず、FormとListは異なるタスクを解決します。Listは、スワイプ操作と行編集機能を備えたスクロール可能なデータリストを表示するための汎用コンテナです。Formはデータ入力と設定のための専門的なコンテナで、システムコントロールスタイルに最適化されています。

Listは動的データの表示に適しています：ニュースフィード、チャット、商品カタログ。Formは予測可能なフィールドセットを持つ静的な画面に適しています：ユーザープロフィール、アプリ設定、登録フォーム。主な違い：Formの要素はインタラクティブなコントロールにできるのに対し、Listの行は主にデータを表示し、タップにナビゲーションやアクションで応答します。

Apple Human Interface Guidelines（2025）によると、Formは1画面に3〜20個のコントロールがあり、セクションに分割することでユーザビリティが向上する設定画面や入力画面に使用する必要があります。

Form内のSection

SectionはFormの主要な構成要素であり、論理的に関連する要素をグループ化できます。各Sectionにはヘッダー、フッター、および内部に任意の数のコントロールを含めることができます。システムは自動的にセクション間にスペーシングを追加し、各セクションを角丸の視覚ブロックでラップします。

Sectionの使用はフォームの読みやすさにとって重要です：意味ごとにグループ化された要素はユーザーが処理しやすくなります。例えば、プロフィール設定画面では、「個人データ」「通知」「セキュリティ」を個別のセクションに分けることができます。各セクションには説明テキストを含むフッターを含めることができ、システムは要素グループの下に小さなフォントで表示します。

Form {
    Section(header: Text("プロフィール")) {
        TextField("名前", text: $name)
        TextField("Email", text: $email)
    }

    Section(header: Text("通知"),
            footer: Text("会議中は無効にする")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

この例では、最初のセクション「Profile」にはフッターなしの2つのテキストフィールドが含まれ、2番目のセクション「Notifications」にはグループの下に説明付きの2つのトグルが含まれています。フッターは自動的にスペーシングを追加し、captionフォントスタイルを使用します。Sectionはヘッダーなしでフッターを持つか、フッターなしでヘッダーを持つことができます。

Formのコントロール

Formはすべての標準SwiftUI入力要素をサポートしています。PickerはForm内で自動的に、iOSでは個別の選択画面へのナビゲーション行として表示されます。Toggleは右揃えのスイッチ付きの行として表示されます。TextFieldはプレースホルダー付きのシステム入力スタイルを取得します。

数値にはStepper（段階的変更）とSlider（範囲内のスムーズな変更）が使用されます。DatePickerは複数のモードをサポート：date、time、dateAndTime。色選択にはColorPickerが利用可能です。各要素は追加コードなしでプラットフォームに適応します — iOSではコントロールはネイティブのUIKitスタイルを使用し、macOSではAppKitを使用します。

Form内のカスタムコントロールには、任意のSwiftUI Viewを使用できます — 標準のセクション動作を継承します。ただし、HIG準拠を保証し、追加設定なしでアクセシビリティ（VoiceOver、Dynamic Type）をサポートするため、システム要素に従うことをお勧めします。

Formコード例

Formを使用して登録画面を作成しましょう。フォームには4つのセクションがあります：個人データ、役割選択、サブスクリプション設定、送信ボタン。グループ化にはSectionと標準のSwiftUIコントロールを使用します。

struct RegistrationForm: View {
    @State private var name = ""
    @State private var email = ""
    @State private var role = "Developer"
    @State private var agreedToTerms = false

    let roles = ["Developer", "Designer", "Manager"]

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("個人情報")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

                Section(header: Text("役割")) {
                    Picker("Select role", selection: $role) {
                        ForEach(roles, id: \.self) { role in
                            Text(role).tag(role)
                        }
                    }
                }

                Section {
                    Toggle("Agree to terms", isOn: $agreedToTerms)
                }

                Section {
                    Button("登録") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

フォームは4つのSectionに分割されています：2つのテキストフィールドを持つ個人データ、Pickerによる役割選択、Toggleによる利用規約への同意、登録ボタン。ボタンはユーザーが利用規約に同意するまで無効になっています — これはForm内でのバリデーションの例です。NavigationStackはタイトルを追加し、PickerがiOSで個別の選択画面を開くことを可能にします。

サブセクション付き設定フォーム

struct SettingsForm: View {
    @State private var volume: Double = 0.5
    @State private var isDarkMode = false
    @State private var reminderDate = Date()

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("外観")) {
                    Toggle("Dark mode", isOn: $isDarkMode)
                    Slider(value: $volume, in: 0...1) {
                        Text("音量")
                    }
                }

                Section(header: Text("リマインダー"),
                        footer: Text("選択した時間に通知が届きます")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

                Section {
                    NavigationLink("Advanced Settings",
                        destination: AdvancedSettingsView())
                }
            }
            .navigationTitle("Settings")
        }
    }
}

この例は、Form内でのSlider、DatePicker、NavigationLinkの組み合わせを示しています。DatePickerは時間のみを表示するためにhourAndMinuteモードを使用します。最後のセクションのNavigationLinkは詳細設定画面への遷移を作成します — Settings風インターフェースの一般的なパターンです。セクションのヘッダーとフッターによりフォームは自己文書化され、ユーザーは各コントロールがどのグループに属するかを即座に理解できます。