🔥

SwiftUIでautomaticスタイルのViewModifierを作る方法

に公開
iOS
Swift
SwiftUI
tech

SwiftUIでOSバージョンに応じて自動的にスタイルが切り替わる.automaticモディファイアを作る方法を紹介します。

automaticスタイルとは

SwiftUIの公式APIでは、多くのコンポーネントで.automaticスタイルが提供されています。例えば、ButtonStyle.automatic、ToggleStyle.automatic、PickerStyle.automaticなど、システムが現在の環境に応じて最適なスタイルを自動選択する仕組みです。

この仕組みにより、開発者は細かなOSバージョンの差異を気にすることなく、常に最新かつ適切なデザインを適用できます。しかし、カスタムスタイルでは同様の仕組みを自分で実装する必要があります。

実装方法

1. 基本構造

ClockViewのスタイルを例に、プロトコルベースでスタイルを定義します。

protocol ClockStyle: ViewModifier {}

2. 個別スタイルの定義

// iOS 26以前向け - シンプルなテキスト表示
struct ClassicClockStyle: ClockStyle {
    func body(content: Content) -> some View {
        content
            .background()
    }
}

// iOS 26+向け - グラスエフェクト
@available(iOS 26.0, *)
struct ModernClockStyle: ClockStyle {
    func body(content: Content) -> some View {
        content
            .glassEffect()
    }
}

3. Automaticスタイルの実装

SwiftUIにはViewModifierを分岐するクラス（Viewで言うConditionalContent）は無いので、bodyの中で分岐するのがおすすめです。

struct AutomaticClockStyle: ClockStyle {
    func body(content: Content) -> some View {
        if #available(iOS 26.0, *) {
            content.clockStyle(.modern)
        } else {
            content.clockStyle(.classic)
        }
    }
}

コンパイル時とランタイムでOSバージョンをチェックし、最適なスタイルを選択します。

4. 使いやすいAPIの提供

このままでは、clockStyle(ModernClockStyle())という使い方しかできないのでAPIデザインを意識して省略記法を可能にします。
SwiftUI公式のスタイルシステムと完全に同じインターフェースを提供することで、学習コストを最小化できます。

extension ClockStyle where Self == AutomaticClockStyle {
    static var automatic: Self { .init() }
}

extension ClockStyle where Self == ClassicClockStyle {
    static var classic: Self { .init() }
}

@available(iOS 15.0, *)
extension ClockStyle where Self == ModernClockStyle {
    static var modern: Self { .init() }
}

extension View {
    func clockStyle(_ style: some ClockStyle) -> some View {
        modifier(style)
    }
}

// 使用例
ClockView()
    .clockStyle(.automatic)

メリットと利便性

開発効率の向上

従来、OSバージョンごとに個別にスタイル分岐を書く必要がありましたが、.automaticパターンを使うことで一度の実装で済みます。これにより、コードの重複を避け、開発時間を大幅に短縮できます。

// 従来の手動切り替え（各所で重複）
if #available(iOS 15.0, *) {
    ClockView()
        .glassEffect()
} else {
    ClockView()
        .background()
}

// automaticパターン（一箇所で管理）
ClockView()
    .clockStyle(.automatic)

まとめ

OSバージョンに応じて自動的にスタイルが切り替わるautomaticモディファイアは、将来性・保守性・一貫性を兼ね備えた強力な仕組みです。長期メンテナンスが必要なアプリケーションでは特に価値を発揮します。

Discussion