Jetpack ComposeとSwiftUIの縦方向・横方向・重ね合わせのコンポーネントを比較

# 目次
- はじめに
- 縦方向のレイアウト
    - Column
    - VStack
- 横方向のレイアウト
    - Row
    - HStack
- 重ね合わせのレイアウト
    - Box
    - ZStack
- 簡単な比較
- 感想

# はじめに

モバイルアプリ開発において、UIを構築する際に欠かせないのが「レイアウト」です。AndroidではJetpack Compose、iOSではSwiftUIが登場し、宣言的なUI構築が可能になりました。これらのフレームワークには、縦方向・横方向のレイアウトや重ね合わせのレイアウトを簡単に構築できるコンポーネントが用意されています。

# 縦方向のレイアウト
子要素を縦方向に並べるためのコンポーネントです。

## Column (Jetpack Compose)

```kotlin
@Composable
fun ColumnExample() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Item 1")
        Text(text = "Item 2")
        Text(text = "Item 3")
    }
}
```

**主なプロパティ**

- `verticalArrangement`: 子要素の縦方向の配置を指定します。（例: `Arrangement.Top`, `Arrangement.Center`, `Arrangement.SpaceBetween`）
- `horizontalAlignment`: 子要素の横方向の配置を指定します。（例: `Alignment.Start`, `Alignment.CenterHorizontally`）

##  VStack (SwiftUI)

```swift
struct VStackExample: View {
    var body: some View {
        VStack(alignment: .center, spacing: 16) {
            Text("Item 1")
            Text("Item 2")
            Text("Item 3")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}
```

**主なプロパティ**

- `alignment`: 子要素の横方向の揃え方を指定します。（例: `.leading`, `.center`, `.trailing`）
- `spacing`: 子要素間の間隔を指定します。

# 横方向のレイアウト
子要素を横方向に並べるためのコンポーネントです。

##  Row (Jetpack Compose)

```kotlin
@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Text(text = "Item 1")
        Text(text = "Item 2")
        Text(text = "Item 3")
    }
}
```

**主なプロパティ**

- `verticalAlignment`: 子要素の縦方向の配置を指定します。（例: `Alignment.Top`, `Alignment.CenterVertically`）。
- `horizontalArrangement`: 子要素の横方向の配置を指定します。（例: `Arrangement.Start`, `Arrangement.SpaceEvenly`, `Arrangement.End`）

##  HStack (SwiftUI)

```swift
struct HStackExample: View {
    var body: some View {
        HStack(alignment: .center, spacing: 16) {
            Text("Item 1")
            Text("Item 2")
            Text("Item 3")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}
```

**主なプロパティ**

- `alignment`: 子要素の縦方向の揃え方を指定します。（例: `.top`, `.center`, `.bottom`）
- `spacing`: 子要素間の間隔を指定します。

# 重ね合わせのレイアウト
子要素を重ねて配置するためのコンポーネントです。

## Box (Jetpack Compose)

```kotlin
@Composable
fun BoxExample() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.background),
            contentDescription = null,
            modifier = Modifier.fillMaxSize()
        )
        Text(
            text = "Hello, Compose!",
            color = Color.White,
            fontSize = 24.sp
        )
    }
}
```

**主なプロパティ**

- `contentAlignment`: 子要素の配置を指定します。（例: `Alignment.Center`, `Alignment.TopStart`）

##  ZStack (SwiftUI)

```swift
struct ZStackExample: View {
    var body: some View {
        ZStack {
            Image(.background)
                .resizable()
                .scaledToFill()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            Text("Hello, SwiftUI!")
                .font(.largeTitle)
                .foregroundColor(.white)
        }
    }
}
```

## 簡単な比較

| 特徴 | Jetpack Compose | SwiftUI |
| --- | --- | --- |
| 縦方向のレイアウト | Column | VStack |
| 横方向のレイアウト | Row | HStack |
| 重ね合わせのレイアウト | Box | ZStack |


## 感想

Jetpack ComposeとSwiftUIについては基本的な概念は共通しているため、片方を習得すればもう片方もスムーズに理解できると思います。