[SwiftUI]自作modifierをextensionで管理して使用する方法

自作のModifier

SwiftUIではあらゆるコンポーネントはmodifierを追加していくことで修飾していきます。
ですのでどうしてもView ClassのCodeが冗長になりがちです。
そこで自作のmodifierを使用することで何度も使用するmodifierの組み合わせをまとめることができます。
作り方は以下の通りです。
(TextFieldに対して、自動での変換無効やキーボードタイプをしてしたい時に使用するmodifierの例です。)

struct CustomTextFieldModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .disableAutocorrection(true)
            .autocapitalization(.none)
            .keyboardType(.URL)
    }
}

CustomTextFieldModifierの部分はmodifier名になりますので任意です。
後はcontentに対して繰り返し使用したいmodifierを設定すれば完了です。

使用方法

使用方法は修飾したいコンポーネントに対して下記のようにしてあげれば使用できます。

TextField("Input URL", text: $text)
                .modifier(CustomTextFieldModifier())

このままでも良いですが、もっとシンプルに、他のmodifierと同じような扱いができれば良いかなと思い、今回はextensionで更に管理し、よりシンプルに使用できるようにしていきます。

作り方

拡張するプロトコルはViewです。

extension View {
    //customTextFieldModifier
    func customTextFieldModifier() -> some View {
        modifier(CustomTextFieldModifier())
    }
}

これで先ほど作成したmodifierをextentionで管理できます。
使用方法もシンプルになり

TextField("Input URL", text: $text)
                .customTextFieldModifier()

で使用できます。

感想と考察

今回は自作したmodifierをよりシンプルに書き、extensionで管理する方法をご紹介させていただきましたが、使用してみた感想としては
・他のmodifierと同様な使い方ができる
・シンプルに書きやすい
・Viewのextention内で複数管理できるのでみやすい
です。
考察としては、modifier(CustomTextFieldModifier())のような書き方であれば一目で独自のmodifierを使用していることが分かるが、extention経由だと独自のmodifierか分かりずらいと思うのでこの辺りはチーム開発などではしっかり話し合って決めて行ったほうがよいかもしれませんね。

以上自作modifierをextensionで管理して使用する方法です。