SwiftUIでシンプルなアプリを作成：初心者向けガイド

SwiftUIは、Appleが提供する宣言的なUIフレームワークで、iOSアプリ開発の基本となる技術です。この記事では、SwiftUIの基礎から簡単なToDoリストアプリの作成まで、初心者向けにわかりやすく解説します。

SwiftUI の基礎
1. 基本的なビューの使い方
2. @State を使ったデータの動的更新
  1. 例: カウンター
レイアウトの練習
1. VStack と HStack の組み合わせ
2. List を使ったデータの表示
  1. 例: 静的なリスト
  2. 例: 動的なリスト
簡単なプロジェクト: ToDoリストアプリ
まとめ

SwiftUI の基礎

基本的なビューの使い方

SwiftUIでは、UIコンポーネント（ビュー）を使ってアプリを構築します。以下が代表的なビューの使い方です：

Text: テキスト表示

Swift

Text("Hello, SwiftUI!")
    .font(.title)
    .foregroundColor(.blue)

Button: ボタンの作成

Swift

Button(action: {
    print("Button tapped!")
}) {
    Text("Tap me")
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(10)
}

VStack と HStack: 縦・横のレイアウト

VStack: 縦に要素を並べる
HStack: 横に要素を並べる

Swift

VStack {
    Text("Item 1")
    Text("Item 2")
}

HStack {
    Text("Left")
    Spacer()
    Text("Right")
}

@State を使ったデータの動的更新

SwiftUIでは、@Stateを使ってデータの変化に応じてUIを自動更新できます。

例: カウンター

Swift

struct CounterView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")
                .font(.largeTitle)
                .padding()

            Button("Increment") {
                count += 1
            }
            .padding()
            .background(Color.green)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
    }
}

レイアウトの練習

SwiftUIでは、複数のビューを組み合わせて複雑なレイアウトを作成できます。

VStack と HStack の組み合わせ

以下のコードで、縦横のレイアウトを組み合わせて使う練習ができます

Swift

struct LayoutPractice: View {
    var body: some View {
        VStack {
            Text("Title")
                .font(.title)
                .padding()

            HStack {
                Text("Left")
                Spacer()
                Text("Right")
            }
            .padding()

            Spacer()
        }
        .padding()
    }
}

List を使ったデータの表示

Listを使えば、簡単にリスト形式でデータを表示できます。

例: 静的なリスト

Swift

struct SimpleListView: View {
    var body: some View {
        List {
            Text("Item 1")
            Text("Item 2")
            Text("Item 3")
        }
    }
}

例: 動的なリスト

配列を使ってリストを動的に表示します。

Swift

struct DynamicListView: View {
    let items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
        }
    }
}

簡単なプロジェクト: ToDoリストアプリ

目標

タスクをリストで表示。
新しいタスクを追加。
タスクを削除。

完成したコード

タスクの追加
- TextFieldで新しいタスクを入力。
- 「Add」ボタンでリストに追加。
タスクの削除
- リストのスワイプでタスクを削除。
- onDeleteを使って削除を実装。
レイアウトとナビゲーション
- NavigationViewで画面にタイトルを追加。
- VStackでタスク入力とリストを縦に並べて配置。

Swift

import SwiftUI

struct ToDoListView: View {
    @State private var tasks: [String] = []
    @State private var newTask = ""

    var body: some View {å
        NavigationView {
            VStack {
                // 新しいタスクを入力するテキストフィールド
                HStack {
                    TextField("Enter new task", text: $newTask)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .padding()

                    Button(action: {
                        if !newTask.isEmpty {
                            tasks.append(newTask)
                            newTask = "" // 入力をクリア
                        }
                    }) {
                        Text("Add")
                            .padding()
                            .background(Color.blue)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                }

                // タスクを表示するリスト
                List {
                    ForEach(tasks, id: \.self) { task in
                        Text(task)
                    }
                    .onDelete(perform: deleteTask)
                }
            }
            .navigationTitle("ToDo List")
        }
    }

    // タスクを削除する関数
    private func deleteTask(at offsets: IndexSet) {
        tasks.remove(atOffsets: offsets)
    }
}