[SwiftUI] Colorをextensionで拡張してタイポを減らす方法

こんにちは、CX事業本部Delivery部の嶋村星哉です。

SwiftUIを使っていると色のタイポで表示されなくなることがあったので、extensionを使いColorを拡張してこの問題を解決しました。

そもそも色の指定でタイポしちゃう問題がなぜ起こるのかって話をします。

色の指定でタイポしちゃう問題

SwiftUIで色の指定するときには文字列で色のアセット名を入力して使います。 文字列で指定するので、MainColorがMeinColorになっていてもコンパイルで怒られることもなく、表示されなくなってしまいます。

ContentView

struct ContentView: View {
  var body: some View {
    Text("Hello World!")
      .foregroundColor(Color("MainColor"))
  }
}

解決方法

Colorをextensionで拡張して解決していきます。まずは、ColorExtension.swiftのファイルを作ります。 その中に下記のように、customMainColorという名前でプロパティを登録していきます。

Extensions/ColorExtension

import Foundation
import SwiftUI

extension Color {
  static let customMainColor = Color("MainColor")
}

これで、プロパティとして書けるようになります。 実際に書いてみたら、こんな感じになります。

ContentView

struct ContentView: View {
  var body: some View {
    Text("Hello World!")
      .foregroundColor(.customMainColor)
  }
}

プロパティになったので、コンパイル時にチェックしてくれるようになります。 さらに、IntelliSense機能（保管機能）が使えるようになるためコーディングもとても楽になります！

たった１ファイルを追加し、数行の記述だけでタイポとおさらばできるので、おすすめです！