Swiftのブログのネタが浮かばなかったので、すべてChatGPTに丸投げしてブログを書いてもらった

中安佑一

2023.03.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！SwiftUIでTodoアプリを作る方法を紹介します。

まずは、プロジェクトを作成しましょう。Xcodeを開き、「Create a new Xcode project」をクリックします。次に、Single View Appを選択し、適切な名前を入力し、SwiftUIを使用するように選択します。

次に、データモデルを作成します。新しいSwiftファイルを作成し、TodoItemという名前の構造体を作成します。

struct TodoItem: Identifiable {
    let id = UUID()
    var task: String
    var isCompleted = false
}

この構造体は、Todoアイテムのプロパティを表しています。Identifiableプロトコルを適用しているので、Todoアイテムを一意に識別できます。

次に、Todoアイテムの配列を作成します。ContentView.swiftファイルを開き、以下のように更新します。

import SwiftUI

struct ContentView: View {
    @State private var items = [
        TodoItem(task: "Buy milk"),
        TodoItem(task: "Finish homework"),
        TodoItem(task: "Go to the gym"),
    ]
    
    var body: some View {
        NavigationView {
            List {
                ForEach(items) { item in
                    Text(item.task)
                }
            }
            .navigationTitle("Todo List")
        }
    }
}

このコードでは、@Stateプロパティラッパーを使用して、Todoアイテムの配列を初期化します。その後、NavigationViewとListを使用して、Todoアイテムの配列を表示します。

次に、新しいTodoアイテムを追加できるようにしましょう。ContentView.swiftファイルを開き、以下のように更新します。

import SwiftUI

struct ContentView: View {
    @State private var items = [
        TodoItem(task: "Buy milk"),
        TodoItem(task: "Finish homework"),
        TodoItem(task: "Go to the gym"),
    ]
    @State private var newTask = ""
    
    var body: some View {
        NavigationView {
            List {
                ForEach(items) { item in
                    Text(item.task)
                }
                .onDelete(perform: deleteItems)
            }
            .navigationTitle("Todo List")
            .navigationBarItems(trailing: addButton)
        }
    }
    
    private var addButton: some View {
        Button(action: {
            let item = TodoItem(task: newTask)
            items.append(item)
            newTask = ""
        }, label: {
            Image(systemName: "plus")
        })
    }
    
    private func deleteItems(at offsets: IndexSet) {
        items.remove(atOffsets: offsets)
    }
}

このコードでは、@Stateプロパティラッパーを使用して、新しいTodoアイテムのタスクを格納する文字列を初期化します。その後、navigationBarItemsを使用して、新しいTodoアイテムを追加するボタンを表示します。ボタンがタップされたときに、新しいTodoアイテムを作成して、配列に追加します。そして、newTaskを空にします。

また、onDeleteを使用して、削除ボタンを表示し、タスクを削除する関数を呼び出します。

次に、Todoアイテムの完了状態をトグルする機能を追加します。ContentView.swiftファイルを開き、以下のように更新します。

import SwiftUI

struct ContentView: View {
    @State private var items = [
        TodoItem(task: "Buy milk"),
        TodoItem(task: "Finish homework"),
        TodoItem(task: "Go to the gym"),
    ]
    @State private var newTask = ""
    
    var body: some View {
        NavigationView {
            List {
                ForEach(items) { item in
                    Button(action: {
                        toggleCompleted(for: item)
                    }, label: {
                        HStack {
                            Image(systemName: item.isCompleted ? "checkmark.circle.fill" : "circle")
                            Text(item.task)
                                .strikethrough(item.isCompleted)
                        }
                    })
                }
                .onDelete(perform: deleteItems)
            }
            .navigationTitle("Todo List")
            .navigationBarItems(trailing: addButton)
        }
    }
    
    private var addButton: some View {
        Button(action: {
            let item = TodoItem(task: newTask)
            items.append(item)
            newTask = ""
        }, label: {
            Image(systemName: "plus")
        })
    }
    
    private func deleteItems(at offsets: IndexSet) {
        items.remove(atOffsets: offsets)
    }
    
    private func toggleCompleted(for item: TodoItem) {
        if let index = items.firstIndex(where: { $0.id == item.id }) {
            items[index].isCompleted.toggle()
        }
    }
}

このコードでは、Buttonを使用して、Todoアイテムの完了状態をトグルするための機能を追加しました。HStackを使用して、アイコンとタスクを表示し、strikethroughを使用して、完了したタスクを打ち消し線で表示します。

toggleCompleted関数を使用して、Todoアイテムの完了状態をトグルします。idを使用して、配列内のアイテムを識別し、isCompletedプロパティをトグルします。

これで、SwiftUIでTodoアプリを作成する方法がわかりました。お疲れ様でした！