村中（エンジニア）SwiftUIでRealmを使ってみた
村中（エンジニア）2023.11.29
IT技術
実施すること
SwiftUIでRealmを用いて、CRUD処理を実装する
はじめに
SwiftUI上でRealmをどのように用いるかを確認するために公式ドキュメントを参考にして実装した。
公式ドキュメント
https://www.mongodb.com/docs/realm/sdk/swift/swiftui-tutorial/
今回私が作成したコード
https://github.com/muranakar/ReamSampleInSwiftUI
まずはRealmのPackageをインストールします
Realmをインストール
-
File > Add Packages.... を選択する
-
以下のURLをクリップボードにコピー
https://github.com/realm/realm-swift.git -
①の部分に上記URLを挿入する。②でPackageを導入する
-
左下にRealmとRealmDatabaseを表示されていれば準備完了です。
Modelの実装
次はModelの実装を行います
今回は以下のER図で表すテーブル設計を元に実装を進めます
ItemGroup、Itemを定義する。
Realmでは以下のようにModelの定義を書きます
1final class ItemGroup: Object, ObjectKeyIdentifiable {
2 @Persisted(primaryKey: true) var _id: ObjectId
3 @Persisted var items = RealmSwift.List<Item>()
4}
5
6final class Item: Object, ObjectKeyIdentifiable {
7 @Persisted(primaryKey: true) var _id: ObjectId
8 @Persisted var name = "\(randomAdjectives.randomElement()!) \(randomNouns.randomElement()!)"
9 @Persisted var isFavorite = false
10 @Persisted var itemDescription = ""
11 @Persisted(originProperty: "items") var group: LinkingObjects<ItemGroup>
12}@Persisted(primaryKey: true)と追記することで、プライマリーキーを設定可能である@Persisted var items = RealmSwift.List()で、一つのItemGroupに属したItemをListとして呼び出すことが可能である@Persisted(originProperty: "items") var group: LinkingObjectsで、ItemGroupに属していることを設定する。
CRUD処理の実装
CRUD処理を行うために、以下のリストの手順で簡単なViewを実装する
- Content.View
- ItemView.View
- ItemRow.View
- ItemDetailView
ContentViewを作成
まずは、ベースとなるContentViewを実装する
1import SwiftUI
2import RealmSwift
3
4struct ContentView: View {
5 @State var searchFilter: String = ""
6 @ObservedResults(ItemGroup.self) var itemGroups
7
8 var body: some View {
9 if let itemGroup = itemGroups.first {
10 ItemsView(itemGroup: itemGroup)
11 } else {
12 ProgressView().onAppear {
13 $itemGroups.append(ItemGroup())
14 }
15 }
16 }
17}@ObservedResults(ItemGroup.self) var itemGroupsと実装することで、ローカルに保存されているItemGroupを直接View上で呼び出すことができる
ItemView、ItemRowを作成
Itemをリスト表示する画面を作成します。（以下に画像あり）
Itemをリスト表示して、項目をタップすると詳細画面に遷移します。- 右上の編集ボタンをタップすると、並び替え・削除が可能です。
1struct ItemsView: View {
2 @ObservedRealmObject var itemGroup: ItemGroup
3
4 var leadingBarButton: AnyView?
5
6 var body: some View {
7 NavigationView {
8 VStack {
9 List {
10 ForEach(itemGroup.items) { item in
11 ItemRow(item: item)
12 }
13 .onDelete(perform: $itemGroup.items.remove)
14 .onMove(perform: $itemGroup.items.move)
15 }
16 .listStyle(GroupedListStyle())
17 .navigationBarItems(
18 leading: self.leadingBarButton,
19 trailing: EditButton())
20 HStack {
21 Spacer()
22 Button(action: {
23 $itemGroup.items.append(Item())
24 }) { Image(systemName: "plus") }
25 }.padding()
26 }
27 }
28 }
29}@ObservedRealmObjectのプロパティラッパーで宣言することによって、ローカルデータを簡単に書き換え可能である。.onDelete(perform: $itemGroup.items.remove)で、 Listの削除実装が可能であり、ローカルデータも書き換えることが可能である。.onMove(perform: $itemGroup.items.move)で、Listの並び替え実装が可能であり、ローカルデータの並び替えも可能である。$itemGroup.items.append(Item())で、itemGroupに属するItemを新規追加できる。
1import SwiftUI
2import RealmSwift
3
4struct ItemRow: View {
5 @ObservedRealmObject var item: Item
6
7 var body: some View {
8 NavigationLink(destination: ItemDetailsView(item: item)) {
9 Text(item.name)
10 if item.isFavorite {
11 Image(systemName: "heart.fill")
12 }
13 }
14 }
15}ItemDetailViewを作成
Itemの詳細画面の実装です。（以下に画像あり）
- 右上のハートボタンをタップすると、isFavariteの値の切り替えです。
- 「wiggly twister」という値が入力されているTextFieldをタップすると、編集が可能です
1import SwiftUI
2import RealmSwift
3
4struct ItemDetailsView: View {
5 @ObservedRealmObject var item: Item
6
7 var body: some View {
8 VStack(alignment: .leading) {
9 Text("Enter a new name:")
10 TextField("New name", text: $item.name)
11 .navigationBarTitle(item.name)
12 .navigationBarItems(trailing: Toggle(isOn: $item.isFavorite) {
13 Image(systemName: item.isFavorite ? "heart.fill" : "heart")
14 })
15 }.padding()
16 }
17}TextField("New name", text: $item.name)で、itemのnameを書き換えることができる。Toggle(isOn: $item.isFavorite)で、itemのisFavoriteを書き換えることができる。
まとめ
CRUDの実装程度であれば、簡単に実装することができました。
SwiftUIのTextFieldやList に、ObservedRealmObject、ObservedResultsを用いた値を直接入れることによって、書き換え・更新が実装されることは非常に便利でした。
ただ、今回はチュートリアルということもあり、Realmに依存したViewになってしまっているので、実際の業務で使用する場合は注意が必要だと感じました。
ライトコードでは、エンジニアを積極採用中！
ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
村中（エンジニア）
おすすめ記事
ライトコードの営業マンって何してるの？〜高橋さん編〜
広告メディア事業部
2024.05.08
日常
移転したライトコード大阪オフィスを調査せよ！
広告メディア事業部
2024.04.03
日常
【GCP】BIG QUERYを触り程度に理解してみる
かねまさ（エンジニア）
2024.04.02
IT技術
【Android】Github ActionsでFirebase Test Labの実行を分散する
笹川（エンジニア）
2024.04.02
IT技術
【Next.js】App Router で使用できるキャッシュまとめ
モーリー（エンジニア）
2024.03.29
IT技術
