[SwiftUI]メモアプリに新規メモ機能を追加 Part.1

2022年6月25日 14:41

■初めに

こんにちわ、中川(Twitter)です。
最近暑いですね🌞🍧

先日作ったメモアプリのサンプルアプリに
新規メモ追加機能を実装していこうと思います。
長くなりすぎないよう、３つのPartに分けます。
この記事はその第一弾です✊

こちらで作成したサンプルをそのまま使っていきます⬇︎

今回の目標:

◯メモリストのデータをアプリ全体でデータを共有 ⬅︎ ✅
◯新規メモ追加用のViewを作成
◯新規メモの追加ロジック作成

使用する主な機能:

・@Published
・ObservableObject
・@StateObject

※6/29
本記事はEnvironmentObjectを用いた記事でしたが、
今回の使用機能としてStateObjectが適していたため、修正させていただきました。🙏

[ 🍎 実装開始 🍎 ]

StateObjectを用いて、
リストに表示されるメモデータが格納された配列を
アプリケーション全体でデータ共有できるようにしていきます。

では、やっていきましょう。よろしくお願いします✊

■メモリストのデータをViewModelで管理

1. ViewModelデータを作成

まず、ViewModelグループを新しく作成して、
配下にデータファイル「MemoData」を新規作成します。

次に、classデータ「MemoData」を用意しましょう。
※ EnvironmentObjectを利用する際には、
対象のデータクラスにObservableObjectプロトコルを準拠させる
必要があります。

import SwiftUI

// ObservableObjectに準拠
class MemoModel: ObservableObject {

    
}

次に、上記のclassデータ内部に
メインページのMemoListViewで宣言されていた
各メモデータを格納している配列memosを
ViewModelのデータクラス内部に引っ越しさせます⬇︎

※ 参照したいプロパティには
プロパティラッパー「@Published」を付与する必要があります。

class MemoModel: ObservableObject {

    // 辞書型配列
    @Published var memos = [["memoTitle": "プログラミングで起きたエラー", "memoTime": "10:01", "memoText": "にんじんの美味しい料理の仕方を調べる。"],
                            ["memoTitle": "Swift勉強", "memoTime": "17:11", "memoText": "SwiftUIでメモアプリ作成"],
                            ["memoTitle": "誕生日プレゼント",  "memoTime": "16:34", "memoText": "どこそこデパートにプレゼントを買いに行く"]]

}

(配列内データのメモ内容は任意です)
はい、これでViewModelからデータを共有する準備はOKです👍

2. ViewModelのデータをViewファイルに宣言

さて、メインページのMemoListViewに戻ると
配列memosを参照していた場所にエラーが発生しています。

これは、元々MemoListView内に宣言されていた配列memosが
引っ越しによってスコープ内に存在しなくなってしまったからですね。
これを先ほど作ったViewModel内のデータに
参照ターゲットを変更することで解消していきます。

まず、MemoListView内に新規プロパティを宣言し、
MemoDataを呼び出します。
この時@StateObjectをプロパティに付与しましょう。
プロパティ名は今回「vm」とします。(任意)

struct MemoListView: View {

    // MemoDataが格納されたプロパティ「vm」を宣言
    @EnvironmentObject var vm: MemoData

3. View内の参照ターゲットを更新

次に、先ほどエラーを吐いていた箇所に
上記で作ったvmを指定してあげます。

これでviewModel内のデータへ参照先が更新され、
エラーがなくなります◎
以降、memos内のデータを参照したい場合は
「vm.memos」を指定しましょう。

■まとめ

以上、メモアプリに新規メモ機能を追加: Part.1
◯メモリストのデータをViewModelで管理
でした。
次回は「新規メモ用のViewを作成」です。
Part.2も良ければ見ていってください🙏

読んでいただきありがとうございました！
ではでは🙌

以上

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