こんにちは！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アプリを作成する方法がわかりました。お疲れ様でした！
ここからがこのブログの本文
CX事業本部の中安です。まいどです。
さて、ここまで長文にお付き合いいただき、ありがとうございました。
SwiftUIでTodoアプリを作成する方法についての技術ブログでしたが、 実はここまですべてChatGPTが書いた内容でした。
ChatGPTを使ったネタとして、どこまでブログ執筆の手抜きができるかを試してみた結果になります。
このブログが出来上がるまでの過程はこんな感じです。
とりあえず数多あるブログネタからChatGPTに一つ考えて選んでもらったのでした。
「具体的には...」のところに沢山列挙されてしまったので、ここからも1つ選んで欲しいなと思いました。
どうやらChatGPTさんはSwiftUIネタを推しているようです。
しかし、またも複数の候補を列挙されてしまったので、1つに絞ってもらいましょう。
「SwiftUIでTodoアプリを作る」というネタがChatGPTさんの出した答えのようです。
もはやブログの本文すらも考えるのが面倒くさくなったので、究極の問いかけをしてみました。
ブログネタ探しはおろか、ブログの本文内容まですべて任せた結果が、冒頭のソースコード例も含めた長い文章になります。
もはやブログ執筆者が必要ないではないか・・・。
まあ、しかしながらそこに書かれたソースコードで果たしてToDoアプリとして動作するのかだけはやってみました。
Xcodeでプロジェクトを作り、ChatGPTのおっしゃる通りにファイルを作成して、実装しました。(インポート文は追記しないといけませんでした)
実際に動かしてみます。
ToDoへのチェックと削除はちゃんと動いてるものができあがりました。
しかし、ToDoの追加についてはきちんと実装されていないので、レコードが追加できるところまでに止まっています。
このあたりは、ベースのソースコードからさらに拡張させてやる必要があるのではないかなと思います。
最後に
ということで、ChatGPTに任せきりにして、かなり手抜きなブログを書いてみました。
・・・書いてみました?
果たしてこのブログ、本当に中安が書いた文章なのでしょうか?
この文章もまたChatGPTが書いたものなのかもしれません。
ではまたー。
4
