SwiftUIはじめの一歩：左寄せ・List・TextField・TabViewの基本まとめ

はじめに

SwiftUIを使ってiOSアプリ開発を始める際、多くの人がまず触れる基本的なUI要素があります。本記事では、「要素の左寄せ」「リスト表示（ListとForEach）」「テキスト入力（TextField）」「タブ表示（TabView）」の使い方を、シンプルかつ分かりやすくまとめます。

---

1. UI要素を左寄せする方法

テキストを左寄せにする

Text("左寄せのテキストです")
    .frame(maxWidth: .infinity, alignment: .leading)
    .padding()

ポイントはmaxWidth: .infinityで横幅を広げ、alignmentで.leadingを指定することです。

VStack内の要素を左寄せする

VStack(alignment: .leading, spacing: 10) {
    Text("アイテム1")
    Text("アイテム2")
    Text("アイテム3")
}
.padding()

---

2. リスト表示（ListとForEach）

動的データを一覧表示する場合に使います。

基本的な繰り返し（ForEach）

let fruits = ["りんご", "バナナ", "オレンジ"]

VStack(alignment: .leading) {
    ForEach(0..<fruits.count, id: \.self) { index in
        Text("\(index + 1). \(fruits[index])")
    }
}
.padding()

EnumとList、Sectionの組み合わせ

enum TimeOfDay: String, CaseIterable, Identifiable {
    case morning = "朝", afternoon = "昼", evening = "夕方", night = "夜"

    var id: String { self.rawValue }
}

struct TaskView: View {
    let tasksByTime: [TimeOfDay: [String]] = [
        .morning: ["散歩"],
        .afternoon: ["会議"],
        .evening: ["夕食準備"],
        .night: []
    ]

    var body: some View {
        List {
            ForEach(TimeOfDay.allCases) { slot in
                Section(header: Text(slot.rawValue)) {
                    if let tasks = tasksByTime[slot], !tasks.isEmpty {
                        ForEach(tasks, id: \.self) { task in
                            Text(task)
                        }
                    } else {
                        Text("タスクはありません").foregroundColor(.gray)
                    }
                }
            }
        }
    }
}

---

3. テキスト入力（TextField）

@State private var username = ""

VStack {
    TextField("ユーザー名を入力", text: $username)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        .padding()

    Text("入力: \(username)")
}
.padding()

• $username で双方向のデータバインディングが可能になります。

---

4. タブ表示（TabView）

複数の画面を切り替えるにはTabViewが便利です。

struct MainTabView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem { Label("ホーム", systemImage: "house.fill") }

            SettingsView()
                .tabItem { Label("設定", systemImage: "gearshape.fill") }

            ProfileView()
                .tabItem { Label("プロフィール", systemImage: "person.fill") }
        }
    }
}

struct HomeView: View { var body: some View { Text("ホーム画面") } }
struct SettingsView: View { var body: some View { Text("設定画面") } }
struct ProfileView: View { var body: some View { Text("プロフィール画面") } }

• systemImageでSF Symbolsを指定できます。

---

おわりに

この記事で紹介した基本UIを組み合わせれば、多様なSwiftUIアプリのUI構築が可能です。実際にコードを書きながら、直感的で宣言的なSwiftUIの良さを体験してください！