見出し画像

ChatGPTだけで貯金アプリを作ってみた

CABO/休載中

どうも！CABOです。

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

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

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

使用するもの

ChatGPT-3.5
playgrounds（iPad）

作るアプリの概要

貯金アプリ
・貯金額の追加
・貯金額の確認
・貯金額のリセット

コードを書いてもらう

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

CABO：Swiftで貯金アプリを作ってください。機能としては金額の追加、金額のリセット、合計金額の表示です。

ChatGPT：もちろんです。以下は、簡単な貯金アプリのコード例です。XcodeでSwiftを使用しています。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var amountLabel: UILabel!
    var totalAmount: Double = 0.0

    override func viewDidLoad() {
        super.viewDidLoad()
        updateAmountLabel()
    }

    @IBAction func addAmount(_ sender: UIButton) {
        let newAmount = 10.0 // 追加する金額をここで指定できます
        totalAmount += newAmount
        updateAmountLabel()
    }

    @IBAction func resetAmount(_ sender: UIButton) {
        totalAmount = 0.0
        updateAmountLabel()
    }

    func updateAmountLabel() {
        amountLabel.text = "合計金額: ¥\(totalAmount)"
    }
}

この例では、金額の追加（addAmountメソッド）、金額のリセット（resetAmountメソッド）、および合計金額の表示（updateAmountLabelメソッド）の機能があります。Storyboardでラベルとボタンを配置し、適切に接続してください。このコードは基本的な機能の例であり、実際のアプリにはさらなる機能やエラー処理が必要かもしれません。

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

“ContentViewが見つかりません”

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

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

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

ChatGPT：提供されたコードは、SwiftUIを使用してiOSアプリケーションを構築するための基本的な構造です。ContentViewはアプリケーションのメインビューを表しています。もし、先ほど提供した貯金アプリのSwiftコードと組み合わせる場合、次のようになります。

import SwiftUI

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

struct ContentView: View {
    @StateObject private var viewModel = SavingsViewModel()

    var body: some View {
        VStack {
            Text("合計金額: ¥\(viewModel.totalAmount)")
                .padding()

            Button("金額を追加") {
                viewModel.addAmount()
            }
            .padding()

            Button("金額をリセット") {
                viewModel.resetAmount()
            }
            .padding()
        }
    }
}

class SavingsViewModel: ObservableObject {
    @Published var totalAmount: Double = 0.0

    func addAmount() {
        let newAmount = 10.0
        totalAmount += newAmount
    }

    func resetAmount() {
        totalAmount = 0.0
    }
}

このコードでは、ContentViewがSwiftUIのビューを定義しSavingsViewModelがアプリのロジックを管理しています。ボタンがタップされると、対応するメソッドが呼び出され、@Publishedプロパティに変更が反映され、UIが更新されます。

これでどうかな？

「金額を追加」を押すと合計金額が10増える。

できたはできたけど、貯金アプリとして欠陥がありすぎる！ということで追加の指示。

CABO：硬貨、紙幣ごとに金額を追加できるようにしたいです。

ChatGPT：理解しました。硬貨と紙幣ごとに金額を追加できるように、それぞれの追加ボタンを作成し、それに対応する金額をトラッキングするように変更します。以下がその例です。

import SwiftUI

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

struct ContentView: View {
    @StateObject private var viewModel = SavingsViewModel()

    var body: some View {
        VStack {
            Text("合計金額: ¥\(viewModel.totalAmount)")
                .padding()

            HStack {
                MoneyButton(value: 10, viewModel: viewModel, moneyType: .coin)
                MoneyButton(value: 50, viewModel: viewModel, moneyType: .coin)
                MoneyButton(value: 100, viewModel: viewModel, moneyType: .coin)
            }
            .padding()

            HStack {
                MoneyButton(value: 1000, viewModel: viewModel, moneyType: .bill)
                MoneyButton(value: 5000, viewModel: viewModel, moneyType: .bill)
                MoneyButton(value: 10000, viewModel: viewModel, moneyType: .bill)
            }
            .padding()

            Button("金額をリセット") {
                viewModel.resetAmount()
            }
            .padding()
        }
    }
}

enum MoneyType {
    case coin
    case bill
}

struct MoneyButton: View {
    let value: Double
    @StateObject var viewModel: SavingsViewModel
    let moneyType: MoneyType

    var body: some View {
        Button("\(moneyType == .coin ? "硬貨" : "紙幣") ¥\(value)") {
            viewModel.addAmount(value, for: moneyType)
        }
        .padding()
    }
}

class SavingsViewModel: ObservableObject {
    @Published var coinAmount: Double = 0.0
    @Published var billAmount: Double = 0.0

    var totalAmount: Double {
        coinAmount + billAmount
    }

    func addAmount(_ amount: Double, for moneyType: MoneyType) {
        switch moneyType {
        case .coin:
            coinAmount += amount
        case .bill:
            billAmount += amount
        }
    }

    func resetAmount() {
        coinAmount = 0.0
        billAmount = 0.0
    }
}

このコードでは、硬貨と紙幣それぞれに対するボタンを追加し、それに応じて金額を更新するようにしています。SavingsViewModelでは、硬貨と紙幣の金額を別々にトラッキングし、addAmountメソッドでそれぞれの金額を更新しています。

追加できたかな？

各ボタンから金額の追加ができる

できてる、できてるけどボタンの種類が足りない…。ということで追加。

CABO：1円、5円、500円のボタンも追加してください。

ChatGPT：もちろんです。1円、5円、500円のボタンも追加した以下の例をご確認ください。

import SwiftUI

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

struct ContentView: View {
    @StateObject private var viewModel = SavingsViewModel()

    var body: some View {
        VStack {
            Text("合計金額: ¥\(viewModel.totalAmount)")
                .padding()

            HStack {
                MoneyButton(value: 1, viewModel: viewModel, moneyType: .coin)
                MoneyButton(value: 5, viewModel: viewModel, moneyType: .coin)
                MoneyButton(value: 10, viewModel: viewModel, moneyType: .coin)
                MoneyButton(value: 50, viewModel: viewModel, moneyType: .coin)
                MoneyButton(value: 500, viewModel: viewModel, moneyType: .coin)
            }
            .padding()

            HStack {
                MoneyButton(value: 1000, viewModel: viewModel, moneyType: .bill)
                MoneyButton(value: 5000, viewModel: viewModel, moneyType: .bill)
                MoneyButton(value: 10000, viewModel: viewModel, moneyType: .bill)
            }
            .padding()

            Button("金額をリセット") {
                viewModel.resetAmount()
            }
            .padding()
        }
    }
}

enum MoneyType {
    case coin
    case bill
}

struct MoneyButton: View {
    let value: Double
    @StateObject var viewModel: SavingsViewModel
    let moneyType: MoneyType

    var body: some View {
        Button("\(moneyType == .coin ? "硬貨" : "紙幣") ¥\(value)") {
            viewModel.addAmount(value, for: moneyType)
        }
        .padding()
    }
}

class SavingsViewModel: ObservableObject {
    @Published var oneYenAmount: Double = 0.0
    @Published var fiveYenAmount: Double = 0.0
    @Published var tenYenAmount: Double = 0.0
    @Published var fiftyYenAmount: Double = 0.0
    @Published var fiveHundredYenAmount: Double = 0.0
    @Published var coinAmount: Double = 0.0
    @Published var billAmount: Double = 0.0

    var totalAmount: Double {
        oneYenAmount + fiveYenAmount + tenYenAmount + fiftyYenAmount + fiveHundredYenAmount + coinAmount + billAmount
    }

    func addAmount(_ amount: Double, for moneyType: MoneyType) {
        switch moneyType {
        case .coin:
            switch amount {
            case 1:
                oneYenAmount += amount
            case 5:
                fiveYenAmount += amount
            case 10:
                tenYenAmount += amount
            case 50:
                fiftyYenAmount += amount
            case 500:
                fiveHundredYenAmount += amount
            default:
                coinAmount += amount
            }
        case .bill:
            billAmount += amount
        }
    }

    func resetAmount() {
        oneYenAmount = 0.0
        fiveYenAmount = 0.0
        tenYenAmount = 0.0
        fiftyYenAmount = 0.0
        fiveHundredYenAmount = 0.0
        coinAmount = 0.0
        billAmount = 0.0
    }
}

この例では、1円、5円、10円、50円、500円に対応するボタンを追加しました。それぞれの金額が適切にトラッキングされ、合計金額が表示されます。

追加できたかな？

ボタンが全8種類に

できてるー！でも小数点以下が表示されてしまっている…。ということで修正。

CABO：小数点以下を表示しないようにしてください。

ChatGPT：理解しました。金額を整数として表示するように変更します。以下が修正されたコードです。

import SwiftUI

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

struct ContentView: View {
    @StateObject private var viewModel = SavingsViewModel()

    var body: some View {
        VStack {
            Text("合計金額: ¥\(Int(viewModel.totalAmount))")
                .padding()

            HStack {
                MoneyButton(value: 1, viewModel: viewModel, moneyType: .coin)
                MoneyButton(value: 5, viewModel: viewModel, moneyType: .coin)
                MoneyButton(value: 10, viewModel: viewModel, moneyType: .coin)
                MoneyButton(value: 50, viewModel: viewModel, moneyType: .coin)
                MoneyButton(value: 500, viewModel: viewModel, moneyType: .coin)
            }
            .padding()

            HStack {
                MoneyButton(value: 1000, viewModel: viewModel, moneyType: .bill)
                MoneyButton(value: 5000, viewModel: viewModel, moneyType: .bill)
                MoneyButton(value: 10000, viewModel: viewModel, moneyType: .bill)
            }
            .padding()

            Button("金額をリセット") {
                viewModel.resetAmount()
            }
            .padding()
        }
    }
}

enum MoneyType {
    case coin
    case bill
}

struct MoneyButton: View {
    let value: Double
    @StateObject var viewModel: SavingsViewModel
    let moneyType: MoneyType

    var body: some View {
        Button("\(moneyType == .coin ? "硬貨" : "紙幣") ¥\(Int(value))") {
            viewModel.addAmount(value, for: moneyType)
        }
        .padding()
    }
}

class SavingsViewModel: ObservableObject {
    @Published var oneYenAmount: Double = 0.0
    @Published var fiveYenAmount: Double = 0.0
    @Published var tenYenAmount: Double = 0.0
    @Published var fiftyYenAmount: Double = 0.0
    @Published var fiveHundredYenAmount: Double = 0.0
    @Published var coinAmount: Double = 0.0
    @Published var billAmount: Double = 0.0

    var totalAmount: Double {
        oneYenAmount + fiveYenAmount + tenYenAmount + fiftyYenAmount + fiveHundredYenAmount + coinAmount + billAmount
    }

    func addAmount(_ amount: Double, for moneyType: MoneyType) {
        switch moneyType {
        case .coin:
            switch amount {
            case 1:
                oneYenAmount += amount
            case 5:
                fiveYenAmount += amount
            case 10:
                tenYenAmount += amount
            case 50:
                fiftyYenAmount += amount
            case 500:
                fiveHundredYenAmount += amount
            default:
                coinAmount += amount
            }
        case .bill:
            billAmount += amount
        }
    }

    func resetAmount() {
        oneYenAmount = 0.0
        fiveYenAmount = 0.0
        tenYenAmount = 0.0
        fiftyYenAmount = 0.0
        fiveHundredYenAmount = 0.0
        coinAmount = 0.0
        billAmount = 0.0
    }
}

この修正により、Textビューに表示される金額が整数として表示されます。

小数点以下が非表示になってるかな？

スッキリー

これで完成！貯金額の追加、確認、リセットが可能なアプリができた！

最後に

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

この記事が参加している募集

#AIとやってみた

28,739件

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