SwiftUIでFormatStyleを使って色々なデータをTextで表示

# 概要

SwiftUIで文字を表示する`Text`では文字列を表示できますが、色々なデータも変換を通して表示できます。
以前からFormatterを使った表示がサポートされていましたが、iOS 15から、`FormatStyle`というものが加わり、Formatterを作らずとも色々なデータをそのままTextで表示できるようになりました。

# 表示方法

## 日付 (Date)
inputに`Date`、formatに`Date.FormatStyle`を指定します。

```swift
struct SwiftUIView: View {
    let date: Date = Date()
    var body: some View {
        Text(date, format: Date.FormatStyle.dateTime)
            .font(.largeTitle)
    }
}
```

![スクリーンショット 2021-12-24 13.22.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687960/429fb5a8-7037-7250-f513-833c0c11d8d4.png)

### 対応するFormat
- Date.ComponentsFormatStyle
- Date.FormatStyle
- Date.ISO8601FormatStyle
- Date.IntervalFormatStyle
- Date.RelativeFormatStyle
- Date.VerbatimFormatStyle

## バイトカウント
inputに`Int64`、formatに`ByteCountFormatStyle `を指定します。

```swift
struct SwiftUIView: View {
    let value: Int64 = 100000000
    var body: some View {
        Text(value, format: ByteCountFormatStyle.byteCount(style: .binary))
            .font(.largeTitle)
    }
}
```

![スクリーンショット 2021-12-24 13.29.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687960/27fe8adc-a82d-ec71-c96b-e9d5c310bcdb.png)

### 対応するFormat
- ByteCountFormatStyle
- ByteCountFormatStyle.Attributed

## 数値(Decimal)
inputに`Decimal `、formatに`Decimal.FormatStyle`を指定します。

```swift
struct SwiftUIView: View {
    let value: Decimal = 100000000
    var body: some View {
        Text(value, format: Decimal.FormatStyle.Currency.currency(code: "JPY"))
            .font(.largeTitle)
    }
}
```

![スクリーンショット 2021-12-24 13.31.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687960/c8c608d9-dcd7-42e3-1997-255f55911a2f.png)

### 対応するFormat
- Decimal.FormatStyle
- Decimal.FormatStyle.Attributed
- Decimal.FormatStyle.Currency
- Decimal.FormatStyle.Percent

## FloatingPointFormatStyle
inputに`Float`などのBinaryFloatingPoint、formatに`FloatingPointFormatStyle `を指定します。


```swift
struct SwiftUIView: View {
    let value: Float = 0.01
    var body: some View {
        Text(value, format: FloatingPointFormatStyle.Currency.currency(code: "USD"))
            .font(.largeTitle)
    }
}
```

![スクリーンショット 2021-12-24 13.38.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687960/339d3d90-3cc4-ddd6-a63b-7768766cef70.png)


### 対応するformat
- FloatingPointFormatStyle
- FloatingPointFormatStyle.Attributed
- FloatingPointFormatStyle.Currency
- FloatingPointFormatStyle.Percent

## Measurement
inputに`Measurement<UnitTemperature>`、formatに`Measurement.FormatStyle `を指定します。
現状は温度にしか対応していません。
コードは摂氏を華氏で表示しています。

```swift
struct SwiftUIView: View {
    let value: Measurement<UnitTemperature> = .init(value: 36.5, unit: .celsius)
    var body: some View {
        Text(value, format: Measurement.FormatStyle.measurement(width: .abbreviated))
            .font(.largeTitle)
    }
}
```

![スクリーンショット 2021-12-24 13.45.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687960/dbf94e4e-b17f-4f33-8ba2-f0f0e46bd57a.png)


### 対応するformat
- Measurement.FormatStyle

## IntegerFormatStyle
inputに`Int`、formatに`IntegerFormatStyle`を指定します。

```swift
struct SwiftUIView: View {
    let value: Int = 10000
    var body: some View {
        Text(value, format: IntegerFormatStyle.Currency.currency(code: "JPY"))
            .font(.largeTitle)
    }
}
```

![スクリーンショット 2021-12-24 14.51.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687960/efa9d030-5ec0-3808-6eaa-b7fdcdcc420a.png)


### 対応するformat
- IntegerFormatStyle
- IntegerFormatStyle.Attributed
- IntegerFormatStyle.Currency
- IntegerFormatStyle.Percent

## ListFormatStyle
inputに`String`の配列、formatに`ListFormatStyle `を指定します。

```swift
struct SwiftUIView: View {
    let value = ["a","b","c"]
    var body: some View {
        Text(value, format: ListFormatStyle.list(type: .and))
            .font(.largeTitle)
    }
}

```

![スクリーンショット 2021-12-24 13.52.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687960/9c9286f1-9327-668a-9547-088963d48e6a.png)


### 対応するformat
- ListFormatStyle

## PersonNameComponents.FormatStyle
inputに`PersonNameComponents `の配列、formatに`PersonNameComponents.FormatStyle `を指定します。

```swift
struct SwiftUIView: View {
    let value: PersonNameComponents = PersonNameComponents(namePrefix: "Esq.", givenName: "Thomas", middleName: "Louis", familyName: "Clark", nameSuffix: "Esq.", nickname: "Tom")
    var body: some View {
        Text(value, format: PersonNameComponents.FormatStyle.name(style: .abbreviated))
            .font(.largeTitle)
    }
}

```

![スクリーンショット 2021-12-24 13.57.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687960/0d368af9-b730-1149-791f-5e59de8db432.png)


### 対応するformat
- PersonNameComponents.AttributedStyle
- PersonNameComponents.FormatStyle