はじめに
こんにちは、nukkyです。
今回はアプリとしてなくてはならないデータの永続化について書いていこうと思います。
データ永続化の方法
調べた所、React Nativeでデータを永続化する方法は色々あるみたいです。
例えば、React Native標準の仕組みにはAsyncStorageというものがあり、iOSとAndroidに両方対応しています。
他にも、Realm、SQLite、Couchbase、MongoDBといった選択肢があります。
今回はAsyncStorageとRealmを使ってみたいと思います。
AsyncStorage
早速使ってみようと公式に飛んだらDeprecatedになってました。。。
「Deprecated. Use react-native-community/react-native-async-storage instead.」
とのことなのでreact-native-async-storageを使ってみたいと思います！
react-native-async-storage
AsyncStorage(react-native-async-storage)は非同期の永続的な、key-valueストアです。
インストール
インストールしたいプロジェクトで以下のコマンドを実行します。
| 1 | $ yarn add @react-native-community/async-storage |
実装
まずはインポートします。
| 1 | import AsyncStorage from '@react-native-community/async-storage'; |
値を保存したいときは以下のコード、
| 1 2 3 4 5 6 7 | storeData = async () => { try { await AsyncStorage.setItem('@storage_Key', 'stored value') } catch (e) { // saving error } } |
上記の保存した値を読み込むときは以下のコードになります。
| 1 2 3 4 5 6 7 8 9 10 | getData = async () => { try { const value = await AsyncStorage.getItem('@storage_Key') if(value !== null) { // value previously stored } } catch(e) { // error reading value } } |
Realm
iOSやAndroidのネイティブ開発で採用される例が増えている、モバイルアプリケーション向けデータベースです。
Realmはデータベースであり、AsyncStorageとは仕組みが異なりますので、より複雑で速度の必要なデータの扱いはRealmの方が良いかもしれません。
今回の記事ではRealm JavaScript 2.29.0のコードになっています。
インストール
インストールしたいプロジェクトで以下のコマンドを実行します。
| 1 2 | $ npm install --save realm $ react-native link realm |
実装
公式のサンプルコードになります、Realmを扱うにはスキーマを定義する必要があります。
ネイティブ開発でRealmを使ったことがある人は、戸惑うことなくコードを書いていけそうです。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | const Realm = require('realm'); // Define your models and their properties const CarSchema = { name: 'Car', properties: { make: 'string', model: 'string', miles: {type: 'int', default: 0}, } }; const PersonSchema = { name: 'Person', properties: { name: 'string', birthday: 'date', cars: 'Car[]', picture: 'data?' // optional property } }; Realm.open({schema: [CarSchema, PersonSchema]}) .then(realm => { // Create Realm objects and write to local storage realm.write(() => { const myCar = realm.create('Car', { make: 'Honda', model: 'Civic', miles: 1000, }); myCar.miles += 20; // Update a property value }); // Query Realm for all cars with a high mileage const cars = realm.objects('Car').filtered('miles > 1000'); // Will return a Results object with our 1 car cars.length // => 1 // Add another car realm.write(() => { const myCar = realm.create('Car', { make: 'Ford', model: 'Focus', miles: 2000, }); }); // Query results are updated in realtime cars.length // => 2 }) .catch(error => { console.log(error); }); |
redux-persist
Reactにおけるデータの永続化といえばこれといった形で本などでも紹介されているのですが、
私がまだReduxを学習中であり、これを紹介するのはReduxの記事を書くときにしようと思ったので今回は触れていないです。
今後にご期待ください。。。
さいごに
iOSエンジニアの所感としてはAsyncStorageはUserDefaultsの様な使い方(状態のフラグ管理など)で、DBが必要な複雑なデータを扱わない場合やプロトタイプなどにはシンプルに使えそうですが、やはりDBは欲しくなると思うので使い慣れたRealmかなと行った所です。
そろそろReduxも記事にしたくなってきたのでより学習を進めて説明できる様になりたいと思います。
おすすめ書籍
