1. HOME
  2. ブログ
  3. IT技術
  4. SwiftUIでRealmを使ってみた

SwiftUIでRealmを使ってみた

実施すること

SwiftUIでRealmを用いて、CRUD処理を実装する

はじめに

SwiftUI上でRealmをどのように用いるかを確認するために公式ドキュメントを参考にして実装した。

公式ドキュメント
https://www.mongodb.com/docs/realm/sdk/swift/swiftui-tutorial/

今回私が作成したコード
https://github.com/muranakar/ReamSampleInSwiftUI

まずはRealmのPackageをインストールします

Realmをインストール

  1. File > Add Packages.... を選択する

  2. 以下のURLをクリップボードにコピー
    https://github.com/realm/realm-swift.git

  3. ①の部分に上記URLを挿入する。②でPackageを導入する

  4. 左下にRealmとRealmDatabaseを表示されていれば準備完了です。

Modelの実装

次はModelの実装を行います
今回は以下のER図で表すテーブル設計を元に実装を進めます

ItemGroup、Itemを定義する。

Realmでは以下のようにModelの定義を書きます

  1. @Persisted(primaryKey: true)と追記することで、プライマリーキーを設定可能である
  2. @Persisted var items = RealmSwift.List()で、一つのItemGroupに属したItemをListとして呼び出すことが可能である
  3. @Persisted(originProperty: "items") var group: LinkingObjectsで、ItemGroupに属していることを設定する。

CRUD処理の実装

CRUD処理を行うために、以下のリストの手順で簡単なViewを実装する

  1. Content.View
  2. ItemView.View
  3. ItemRow.View
  4. ItemDetailView

ContentViewを作成

まずは、ベースとなるContentViewを実装する

  1. @ObservedResults(ItemGroup.self) var itemGroupsと実装することで、ローカルに保存されているItemGroupを直接View上で呼び出すことができる

ItemView、ItemRowを作成

Itemをリスト表示する画面を作成します。(以下に画像あり)

  • Itemをリスト表示して、項目をタップすると詳細画面に遷移します。
  • 右上の編集ボタンをタップすると、並び替え・削除が可能です。

  1. @ObservedRealmObjectのプロパティラッパーで宣言することによって、ローカルデータを簡単に書き換え可能である。
  2. .onDelete(perform: $itemGroup.items.remove)で、 Listの削除実装が可能であり、ローカルデータも書き換えることが可能である。
  3. .onMove(perform: $itemGroup.items.move)で、Listの並び替え実装が可能であり、ローカルデータの並び替えも可能である。
  4. $itemGroup.items.append(Item())で、itemGroupに属するItemを新規追加できる。

ItemDetailViewを作成

Itemの詳細画面の実装です。(以下に画像あり)

  • 右上のハートボタンをタップすると、isFavariteの値の切り替えです。
  • 「wiggly twister」という値が入力されているTextFieldをタップすると、編集が可能です

  1. TextField("New name", text: $item.name)で、itemnameを書き換えることができる。
  2. Toggle(isOn: $item.isFavorite) で、itemisFavoriteを書き換えることができる。

まとめ

CRUDの実装程度であれば、簡単に実装することができました。
SwiftUIのTextFieldやList に、ObservedRealmObjectObservedResultsを用いた値を直接入れることによって、書き換え・更新が実装されることは非常に便利でした。
ただ、今回はチュートリアルということもあり、Realmに依存したViewになってしまっているので、実際の業務で使用する場合は注意が必要だと感じました。

書いた人はこんな人

村中(エンジニア)
村中(エンジニア)

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア