[SwiftUI]StackにおけるViewが10個までしか置けないのを回避する Extra arguments at positions 

# 概要

**VStack**で**View**を11個以上集めた場合にエラーが生じたためその原因と解決した方法をまとめてみました。

# **環境**

Xcode : 14.3

Swift : 5.8

# 目次

- **前提**
- **Group を使った方法**
    - **GroupのTips**
- **ForEach を使った方法**
    - **ForEachのTips**
- **ViewBuilderを拡張する**
- **まとめ**

# 前提

SwiftUIにおいて、**VStack,HStack, ZStack**などの**Stack**ビューは通常、最大で10個までしか設置できません。

**11個以上**設置しようとすると以下のようなエラーが発生します。

```swift
Extra arguments at positions #11, #12 in call
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3352230/a64bc4c3-460e-213b-cdc0-52a15ae9aa55.png)


これは**VStack**が格納できる**View**数の最大値が10個と決まっているからです。

しかし、この制限を回避する方法があります。この記事では、**Group、ForEach**、およびListを使用して**Stack**ビュー内に複数のビューを配置する方法について説明します。

# Group を使った方法

**Group**を使えば複数のViewを一つの**View**としてまとめることができます。

また、**HStack,VStack**などに影響を与えることはありません。

```swift
struct ContentView: View {
    var body: some View {
        VStack {
            // Groupを使用してビューをグループ化、一つのViewとして扱う
            Group {
                Text("View 1")
                Text("View 2")
                Text("View 3")
                Text("View 4")
                Text("View 5")
                Text("View 6")
                Text("View 7")
                Text("View 8")
                Text("View 9")
                Text("View 10")
            }
            Text("View 11") // 11番目のビュー
            Text("View 12") // 12番目のビュー
            
        }
    }
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3352230/98c2f083-e824-7a4d-c9bb-d6c7193387b2.png)

## GroupのTips

また**Group**は括ったものはまとめ**Font**などを適応することができます。

```swift
Group {
  Text("View 1")
  Text("View 2")
  Text("View 3")
  Text("View 4")
  Text("View 5")
  Text("View 6")
  Text("View 7")
  Text("View 8")
  Text("View 9")
  Text("View 10")
}.bold()
```

# ForEach を使った方法
**ForEach**でも**Group**同様に一つの**View**として扱うことができます。

```swift
struct ContentView: View {
    var body: some View {
        VStack {
            
            
            ForEach(0..<13, id: \.self) { index in
                 Text("View \(index)")
             }
        }
    }

}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3352230/6a408bf5-2143-8030-68c4-c828678b0871.png)


## ForEachのTips

さきほどの**Group**同様まとめて適応が可能です。

```swift
ForEach(0..<13, id: \.self) { index in
	Text("View \(index)")
             }.bold()
```

# ViewBuilderを拡張する

複数のビューを組み合わせて1つのビューを構築するための便利な方法です。ViewBuilderプロトコルは、ビルダーパターンを使用して複数のビューを組み合わせるための特別な機能を提供します。

```swift
@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
extension ViewBuilder {

    public static func buildBlock<C0, C1>(_ c0: C0, _ c1: C1) -> TupleView<(C0, C1)> where C0 : View, C1 : View
}
```

上記ではj2つのビュー（**`c0`**と**`c1`**）を受け取り、それらを組み合わせてタプル型のビューを作成します。タプル型のビューは、複数のビューをまとめて1つのビューとして扱うためのものです

これが10個までの場合しか設定されていないので、11個の場合も作成することでViewが11個の場合でもコンパイルエラーを回避することができます。

```swift
extension ViewBuilder {
    static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, C10> (_ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9, _ c10: C10) -> TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, C10)> where C0: View, C1: View, C2: View, C3: View, C4: View, C5: View, C6: View, C7: View, C8: View, C9: View, C10: View {
        TupleView((c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, c10))
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Text("View 1")
            Text("View 2")
            Text("View 3")
            Text("View 4")
            Text("View 5")
            Text("View 6")
            Text("View 7")
            Text("View 8")
            Text("View 9")
            Text("View 10")
            Text("View 11")
            
        }
    }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3352230/f67037e7-b024-091f-539e-3479e3d685e6.png)


# まとめ

今回は、**Stack**における**View**が10個までしか置けないのを回避する方法についてまとめました。あまりに多くのViewを感じする場合にはLinkなどを適応するのもいいと思われます。

何かご指摘やアドバイス等あればお待ちしております。

いいね、ブックマーク、フォローしていただけると勉強の励みになりますので是非お願いします。😉

- - 追伸　--

Twitterで日々の学習風景を投稿してます。

[@Ren_yello](https://twitter.com/Ren_yello)

## 参考にさせていただいたサイト様

[https://raulferrer.dev/blog/swiftui_ch2/](https://raulferrer.dev/blog/swiftui_ch2/)

[https://developer.apple.com/documentation/swiftui/group](https://developer.apple.com/documentation/swiftui/group)

[https://qiita.com/k-motoyan/items/625ed773c70e0a1c6027](https://qiita.com/k-motoyan/items/625ed773c70e0a1c6027)