見出し画像

ChatGPTだけでメモアプリを作ってみた

CABO/休載中

どうも！CABOです。

今回はChatGPTとiPadだけでメモアプリを作ってみたので、ここにまとめてみました。ぜひ最後まで見ていってください！

ChatGPTでアプリを作ってみようと思った理由

なぜ私がアプリが豊富にあるこの世の中、自分自身でアプリを作ってみようと思った理由は何なのか。それは単純な興味です。私はもともとアプリ開発が好きで、今までにもいくつかアプリを開発してきました。そんな趣味であるアプリ開発と大好きなChatGPTを組み合わせたらめちゃくちゃ楽しいのではないか⁉︎と考えたからです。

使用するもの

ChatGPT-3.5
playgrounds (iPad)

作るアプリ

メモアプリ
・メモの追加
・メモの編集
・メモの削除
・メモの検索

メモアプリとして最低限の機能を実装します。

codeを書いてもらう

早速codeを書いてもらいましょう。前述した必要な機能と使用する言語（Swift）を伝えましょう。

CABO：Swiftで簡単なメモアプリを作ってください。主な機能としてはメモの追加、メモの編集、メモの削除です。

ChatGPT：メモアプリを作成するには、Swift言語を使用してiOSアプリを開発する必要があります。Xcodeを使用してプロジェクトを作成し、次に以下の基本的なコードを使用してメモの追加、削除、編集の機能を実装できます。

1.メモの追加:

var memos: [String] = []

func addMemo(_ memo: String) {
    memos.append(memo)
}

2.メモの削除:

func removeMemo(at index: Int) {
    if index >= 0 && index < memos.count {
        memos.remove(at: index)
    }
}

3.メモの編集:

func editMemo(at index: Int, with newText: String) {
    if index >= 0 && index < memos.count {
        memos[index] = newText
    }
}

これらの関数を適切なUI要素（たとえば、テキストフィールド、ボタン、テーブルビューなど）と組み合わせて使用して、ユーザーがメモを追加、削除、編集できる基本的なメモアプリを作成できます。関連するUIコードやイベント処理も追加してください。

CABO：全てのコードを見せてください。

ChatGPT：大きなコードを完全に提供するのは難しいですが、基本的な構造を示すコードを以下に示します。これはXcodeでiOSアプリを開発する場合の基本的な設計です。

import UIKit

class MemoViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet weak var memoTableView: UITableView!
    @IBOutlet weak var memoTextField: UITextField!
    
    var memos: [String] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        memoTableView.delegate = self
        memoTableView.dataSource = self
    }
    
    // メモの追加
    @IBAction func addMemo(_ sender: UIButton) {
        if let newMemo = memoTextField.text, !newMemo.isEmpty {
            memos.append(newMemo)
            memoTextField.text = ""
            memoTableView.reloadData()
        }
    }
    
    // メモの削除
    func removeMemo(at index: Int) {
        if index >= 0 && index < memos.count {
            memos.remove(at: index)
            memoTableView.reloadData()
        }
    }
    
    // メモの編集
    func editMemo(at index: Int, with newText: String) {
        if index >= 0 && index < memos.count {
            memos[index] = newText
            memoTableView.reloadData()
        }
    }
    
    // UITableViewDataSource methods
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return memos.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "MemoCell", for: indexPath)
        cell.textLabel?.text = memos[indexPath.row]
        return cell
    }
    
    // UITableViewDelegate method for handling cell deletion
    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == .delete {
            removeMemo(at: indexPath.row)
        }
    }
    
    // Add UITableViewDelegate methods for editing and updating rows as needed
    
    // Additional UI and event handling code as required
}

上記のコードは、基本的なメモアプリの設計を示しています。これにはXcodeのStoryboardで構築されたユーザーインターフェースが必要であり、UITableView、UITextField、UIButtonなどのUI要素が適切に接続されていることを前提としています。

ここまでをplaygroundsにコピペして実行してみると…。

“ContentViewが見つかりません”

おや、エラーが出てしまいました。このことをChatGPTに伝えて直してもらいましょう。

CABO：ここがエラーになります。

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

ChatGPT：SwiftUIの@main構造体は、Appプロトコルに適合する必要があります。提供されたコードの場合、ContentViewが定義されていないため、エラーが発生します。まず、ContentViewを定義し、その中にメモアプリのロジックを組み込みます。以下は、簡単なメモアプリの例です。

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    @State private var memos: [String] = []
    @State private var newMemo: String = ""

    var body: some View {
        VStack {
            TextField("Enter memo", text: $newMemo)
                .padding()
            Button("Add Memo") {
                if !newMemo.isEmpty {
                    memos.append(newMemo)
                    newMemo = ""
                }
            }
            List {
                ForEach(memos, id: \.self) { memo in
                    Text(memo)
                }
                .onDelete(perform: deleteMemo)
            }
        }
        .padding()
    }

    func deleteMemo(at offsets: IndexSet) {
        memos.remove(atOffsets: offsets)
    }
}

このコードでは、ContentViewがTextField、Button、Listなどを使用して基本的なメモアプリのUIを定義しています。MyAppはこのContentViewを起動画面として使用します。必要に応じて、これを拡張し、メモの編集などの機能を追加できます。提供されたコードを置き換えるのではなく、このコードを新しいプロジェクトに追加してください。

これでどうかな…？

メモの追加
メモの削除

できたはできたけど、編集機能がない！ということで追加。

CABO：メモの編集機能を追加してください。

ChatGPT：編集機能を追加するには、メモの一覧から選択されたメモを編集できるようにする必要があります。以下は、メモの編集機能を追加したコードの例です。

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    @State private var memos: [String] = []
    @State private var newMemo: String = ""
    @State private var selectedMemo: String? = nil
    @State private var isEditing: Bool = false

    var body: some View {
        VStack {
            TextField("Enter memo", text: $newMemo)
                .padding()

            Button("Add Memo") {
                if !newMemo.isEmpty {
                    memos.append(newMemo)
                    newMemo = ""
                }
            }

            List {
                ForEach(memos, id: \.self) { memo in
                    Text(memo)
                        .onTapGesture {
                            selectedMemo = memo
                            isEditing = true
                        }
                }
                .onDelete(perform: deleteMemo)
            }
        }
        .padding()
        .sheet(isPresented: $isEditing) {
            EditMemoView(memo: $selectedMemo, isEditing: $isEditing, updateMemo: updateMemo)
        }
    }

    func deleteMemo(at offsets: IndexSet) {
        memos.remove(atOffsets: offsets)
    }

    func updateMemo(updatedMemo: String) {
        if let index = memos.firstIndex(of: selectedMemo ?? "") {
            memos[index] = updatedMemo
        }
    }
}

struct EditMemoView: View {
    @Binding var memo: String?
    @Binding var isEditing: Bool
    @State private var updatedMemo: String = ""

    var updateMemo: (String) -> Void

    var body: some View {
        NavigationView {
            VStack {
                Text("Edit Memo")
                    .font(.title)
                    .padding()

                TextField("Edit memo", text: $updatedMemo)
                    .padding()

                Button("Save Changes") {
                    if let editedMemo = memo, !updatedMemo.isEmpty {
                        updateMemo(updatedMemo)
                        isEditing = false
                    }
                }
                .padding()
            }
            .navigationTitle("Edit Memo")
            .navigationBarItems(trailing: Button("Cancel") {
                isEditing = false
            })
        }
    }
}

このコードでは、EditMemoViewがメモの編集画面を表示し、updateMemo関数を使用して編集されたメモを更新します。ContentViewでは、各メモに対してonTapGestureを使用して選択されたメモを取得し、それを編集画面に渡します。

追加できたかな？

メモの編集

できてるー！でも英語表記だな。日本語に直そう。

CABO：日本語にしてください。

ChatGPT：一部のテキストを変更しました。

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    @State private var memos: [String] = []
    @State private var newMemo: String = ""
    @State private var selectedMemo: String? = nil
    @State private var isEditing: Bool = false

    var body: some View {
        VStack {
            TextField("メモを入力", text: $newMemo)
                .padding()

            Button("メモを追加") {
                if !newMemo.isEmpty {
                    memos.append(newMemo)
                    newMemo = ""
                }
            }

            List {
                ForEach(memos, id: \.self) { memo in
                    Text(memo)
                        .onTapGesture {
                            selectedMemo = memo
                            isEditing = true
                        }
                }
                .onDelete(perform: deleteMemo)
            }
        }
        .padding()
        .sheet(isPresented: $isEditing) {
            EditMemoView(memo: $selectedMemo, isEditing: $isEditing, updateMemo: updateMemo)
        }
    }

    func deleteMemo(at offsets: IndexSet) {
        memos.remove(atOffsets: offsets)
    }

    func updateMemo(updatedMemo: String) {
        if let index = memos.firstIndex(of: selectedMemo ?? "") {
            memos[index] = updatedMemo
        }
    }
}

struct EditMemoView: View {
    @Binding var memo: String?
    @Binding var isEditing: Bool
    @State private var updatedMemo: String = ""

    var updateMemo: (String) -> Void

    var body: some View {
        NavigationView {
            VStack {
                Text("メモを編集")
                    .font(.title)
                    .padding()

                TextField("メモを編集", text: $updatedMemo)
                    .padding()

                Button("変更を保存") {
                    if let editedMemo = memo, !updatedMemo.isEmpty {
                        updateMemo(updatedMemo)
                        isEditing = false
                    }
                }
                .padding()
            }
            .navigationTitle("メモを編集")
            .navigationBarItems(trailing: Button("キャンセル") {
                isEditing = false
            })
        }
    }
}

日本語になってるかなー？

表記が日本語に

しっかりなってますね。しかし、このままだと大量にメモがあるとき、探すのが大変なので検索機能をつけましょう。

CABO：メモの検索機能を追加してください。

ChatGPT：メモの検索機能を追加するには、TextField でユーザーが検索キーワードを入力できるようにし、それに基づいてメモを絞り込んで表示します。以下は、メモの検索機能を追加したコードの例です。

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    @State private var memos: [String] = []
    @State private var newMemo: String = ""
    @State private var selectedMemo: String? = nil
    @State private var isEditing: Bool = false
    @State private var searchText: String = ""

    var filteredMemos: [String] {
        if searchText.isEmpty {
            return memos
        } else {
            return memos.filter { $0.localizedCaseInsensitiveContains(searchText) }
        }
    }

    var body: some View {
        VStack {
            TextField("メモを入力", text: $newMemo)
                .padding()

            Button("メモを追加") {
                if !newMemo.isEmpty {
                    memos.append(newMemo)
                    newMemo = ""
                }
            }

            TextField("検索", text: $searchText)
                .padding()

            List {
                ForEach(filteredMemos, id: \.self) { memo in
                    Text(memo)
                        .onTapGesture {
                            selectedMemo = memo
                            isEditing = true
                        }
                }
                .onDelete(perform: deleteMemo)
            }
        }
        .padding()
        .sheet(isPresented: $isEditing) {
            EditMemoView(memo: $selectedMemo, isEditing: $isEditing, updateMemo: updateMemo)
        }
    }

    func deleteMemo(at offsets: IndexSet) {
        memos.remove(atOffsets: offsets)
    }

    func updateMemo(updatedMemo: String) {
        if let index = memos.firstIndex(of: selectedMemo ?? "") {
            memos[index] = updatedMemo
        }
    }
}

struct EditMemoView: View {
    @Binding var memo: String?
    @Binding var isEditing: Bool
    @State private var updatedMemo: String = ""

    var updateMemo: (String) -> Void

    var body: some View {
        NavigationView {
            VStack {
                Text("メモを編集")
                    .font(.title)
                    .padding()

                TextField("メモを編集", text: $updatedMemo)
                    .padding()

                Button("変更を保存") {
                    if let editedMemo = memo, !updatedMemo.isEmpty {
                        updateMemo(updatedMemo)
                        isEditing = false
                    }
                }
                .padding()
            }
            .navigationTitle("メモを編集")
            .navigationBarItems(trailing: Button("キャンセル") {
                isEditing = false
            })
        }
    }
}

このコードでは、searchText でフィルタリングされたメモを filteredMemos プロパティを介して表示しています。TextField を使って検索キーワードを入力できます。

実装できたかな？

メモの検索

これで完成！メモの追加、編集、削除、検索が可能なアプリができた！

最後に

今回はChatGPTでアプリ開発第二弾をやってみました。いかがでしたでしょうか？もし「面白い！」「興味深い！」と思ったらスキやフォロー、よろしくお願いいたします。それではまた今度お会いしましょう。

この記事が気に入ったらサポートをしてみませんか？