初心者のためのSwift ToDo アプリ開発ガイド

はじめに

このガイドでは、Swift と SwiftUI を使って、初めての iOS アプリとなる基本的な ToDo リストアプリを開発する方法を解説します。タスクの追加、完了のマーク付け、削除ができる機能を実装していきます。初心者の方でも理解しやすいよう、各ステップを詳しく説明していきます。

1 Xcode でプロジェクトを作成する

まずは新しいプロジェクトを作成して、アプリ開発の土台を準備しましょう。

手順:

Mac で Xcode を起動します
「Create a new Xcode project」をクリックします
「App」テンプレートを選択し、「Next」をクリックします
以下の項目を入力します:
- Product Name: ToDoApp
- Interface: SwiftUI
- Language: Swift
「Next」をクリックし、プロジェクトの保存場所を選んで「Create」をクリックします

初心者向けポイント

新しいプロジェクトを作成すると、Xcode は自動的に必要なファイルを作成します。最初に表示されるのは ContentView.swift で、これがアプリの主要な画面となります。左側のナビゲーターには他のファイルも表示されています。

2 ToDo アイテムのデータモデルを作成する

アプリでタスクを管理するためのデータモデルを作成します。これがアプリの「データ」部分となります。

手順:

プロジェクトナビゲーター（左側のパネル）で右クリックし、「New File…」を選択します
「Swift File」を選択し、「Next」をクリックします
ファイル名を「TodoItem.swift」と入力し、「Create」をクリックします
新しく作成されたファイルに以下のコードを入力します:

import Foundation

struct TodoItem: Identifiable, Equatable {
    var id = UUID()
    var title: String
    var isCompleted: Bool = false
    
    static func ==(lhs: TodoItem, rhs: TodoItem) -> Bool {
        return lhs.id == rhs.id
    }
}

コードの説明

struct TodoItem: タスクを表現する構造体です

Identifiable: SwiftUI のリストで各アイテムを識別するためのプロトコル

Equatable: 2つのアイテムを比較するためのプロトコル

id: 各タスクの一意の識別子

title: タスクの名前

isCompleted: タスクが完了したかどうかのフラグ

3 メインUIを構築する

次に、アプリのユーザーインターフェイスを構築します。これはユーザーがタスクを見たり操作したりする画面です。

手順:

プロジェクトナビゲーターから「ContentView.swift」ファイルを開きます
既存のコードを全て削除し、以下のコードに置き換えます:

import SwiftUI

struct ContentView: View {
    @State private var todoItems = [TodoItem]()
    @State private var newItemTitle = “”
    
    var body: some View {
        NavigationStack {
            VStack {
                // 新しいタスク入力フィールド
                HStack {
                    TextField(“新しいタスク”, text: $newItemTitle)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                    
                    Button(action: addItem) {
                        Image(systemName: “plus.circle.fill”)
                            .foregroundColor(.blue)
                            .font(.title)
                    }
                }
                .padding()
                
                // タスクリスト
                List {
                    ForEach(todoItems) { item in
                        HStack {
                            Image(systemName: item.isCompleted ? “checkmark.circle.fill” : “circle”)
                                .foregroundColor(item.isCompleted ? .green : .gray)
                                .onTapGesture {
                                    toggleItemCompletion(item)
                                }
                            
                            Text(item.title)
                                .strikethrough(item.isCompleted)
                                .foregroundColor(item.isCompleted ? .gray : .primary)
                        }
                    }
                    .onDelete(perform: deleteItems)
                }
            }
            .navigationTitle(“ToDo リスト”)
        }
    }
}

コードの説明

@State: 値が変更されたときにビューを更新するプロパティラッパー

NavigationStack: 画面上部にタイトルを表示するためのコンテナ

VStack: 要素を縦に並べるコンテナ

HStack: 要素を横に並べるコンテナ

TextField: ユーザーがテキストを入力するフィールド

Button: タップできるボタン

List: スクロール可能なリスト

ForEach: コレクションの各要素に対してビューを生成

4 タスク管理機能を実装する

ここでは、タスクの追加、完了のマーク付け、削除の機能を実装します。

手順:

ContentView.swift ファイルに、以下のメソッドを追加します（既存のコードの } の前に追加します）:

    // タスクを追加
    private func addItem() {
        guard !newItemTitle.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty else {
            return
        }
        
        let newItem = TodoItem(title: newItemTitle)
        todoItems.append(newItem)
        newItemTitle = “”
    }
    
    // タスクの完了状態を切り替え
    private func toggleItemCompletion(_ item: TodoItem) {
        if let index = todoItems.firstIndex(of: item) {
            todoItems[index].isCompleted.toggle()
        }
    }
    
    // タスクを削除
    private func deleteItems(at offsets: IndexSet) {
        todoItems.remove(atOffsets: offsets)
    }

コードの説明

addItem(): テキストフィールドの内容を使って新しいタスクを作成します

toggleItemCompletion(): タスクの完了状態を切り替えます

deleteItems(): 選択されたタスクを削除します

firstIndex(of:): 配列内の特定のアイテムの位置を探します

toggle(): 真偽値を反転させます（true → false、false → true）

5 アプリを実行してテストする

ここまでの実装でアプリを実行し、基本機能をテストしましょう。

手順:

Xcode ツールバーのデバイスセレクタから「iPhone 15」などのシミュレーターを選択します
再生ボタン（▶）をクリックするか、⌘+R キーを押してアプリを実行します
アプリが起動したら、以下の操作をテストします:
- テキストフィールドにタスク名を入力し、+ ボタンをタップしてタスクを追加
- タスクの左側の丸をタップして完了状態に切り替え
- タスクを左にスワイプして削除

注意点

この時点では、アプリを閉じると追加したタスクは全て消えてしまいます。これは、データをまだ永続的に保存していないためです。次のステップでデータの保存機能を実装します。

6 データを永続化する（オプション）

アプリを閉じても、タスクが保存されるように機能を追加します。

手順:

プロジェクトナビゲーターで右クリックし、「New File…」を選択します
「Swift File」を選択し、「Next」をクリックします
ファイル名を「DataManager.swift」と入力し、「Create」をクリックします
新しく作成されたファイルに以下のコードを入力します:

import Foundation

class DataManager {
    static let shared = DataManager()
    
    private let todoItemsKey = “todoItems”
    
    func saveTodoItems(_ items: [TodoItem]) {
        let data = items.map { [“id”: $0.id.uuidString, “title”: $0.title, “isCompleted”: $0.isCompleted] }
        UserDefaults.standard.set(data, forKey: todoItemsKey)
    }
    
    func loadTodoItems() -> [TodoItem] {
        guard let data = UserDefaults.standard.array(forKey: todoItemsKey) as? [[String: Any]] else {
            return []
        }
        
        return data.compactMap { dict in
            guard let idString = dict[“id”] as? String,
                  let id = UUID(uuidString: idString),
                  let title = dict[“title”] as? String,
                  let isCompleted = dict[“isCompleted”] as? Bool else {
                return nil
            }
            
            return TodoItem(id: id, title: title, isCompleted: isCompleted)
        }
    }
}

次に、ContentView.swift ファイルを編集して、DataManager を使用するように変更します:

todoItems の宣言を次のように変更します:

@State private var todoItems = DataManager.shared.loadTodoItems()

各メソッドの最後に以下のコードを追加して、データを保存するようにします:

// addItem() メソッドの最後に追加
DataManager.shared.saveTodoItems(todoItems)

// toggleItemCompletion() メソッドの最後に追加
DataManager.shared.saveTodoItems(todoItems)

// deleteItems() メソッドの最後に追加
DataManager.shared.saveTodoItems(todoItems)

コードの説明

DataManager: データの保存と読み込みを担当するクラス

static let shared: シングルトンパターンを実装（アプリ全体で1つのインスタンスを共有）

UserDefaults: 小さなデータを永続的に保存するための iOS の仕組み

map: 配列の各要素を変換する関数

compactMap: 配列の各要素を変換し、nil の結果を除外する関数

各ファイルの関係性

TodoItem.swift

ToDoアイテムのデータモデルを定義するファイルです。

主な役割:

タスク情報の構造体定義
Identifiable に準拠 (リスト表示用)
Equatable に準拠 (比較操作用)

ContentView.swift

アプリのメインUIと操作ロジックを担当するビューファイルです。

主な役割:

UIレイアウトの定義
ユーザー操作の処理
TodoItemの操作 (追加/完了/削除)
DataManagerとの連携

DataManager.swift

データの保存と読み込みを担当するファイルです。

主な役割:

TodoItemの永続化
UserDefaultsを使用したデータ保存
保存データの読み込み

ToDoApp.swift

アプリのエントリーポイントを定義するファイルです。

主な役割:

アプリケーションの起動処理
最初に表示するビューの指定

Post Views: 47

初心者のためのSwift ToDo アプリ開発ガイド

はじめに

手順:

手順:

手順:

手順:

手順:

手順:

各ファイルの関係性

Other Posts

Swiftのクロージャを初心者向けにやさしく解説！

ChatGPTでカスタムGPTsを作成する方法：初心者向け完全ガイド<

Claudeの無料版と有料版（Pro）の違い：プロジェクト機能も含めて徹底解説

SwiftUI初心者向け：ファイル分割のベストプラクティス

Comments

コメントを残すコメントをキャンセル

初心者のためのSwift ToDo アプリ開発ガイド

はじめに

手順:

手順:

手順:

手順:

手順:

手順:

各ファイルの関係性

Other Posts

Swiftのクロージャを初心者向けにやさしく解説！

ChatGPTでカスタムGPTsを作成する方法：初心者向け完全ガイド<

Claudeの無料版と有料版（Pro）の違い：プロジェクト機能も含めて徹底解説

SwiftUI初心者向け：ファイル分割のベストプラクティス

Comments

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル