ReactNativeデータ永続化

1 はじめに
2 データ永続化の方法
3 AsyncStorage
4 react-native-async-storage
- 4.1 インストール
- 4.2 実装
5 Realm
- 5.1 インストール
- 5.2 redux-persist
6 さいごに
7 おすすめ書籍

はじめに

こんにちは、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ストアです。

インストール

インストールしたいプロジェクトで以下のコマンドを実行します。

$ yarn add @react-native-community/async-storage

1	$ yarn add @react-native-community/async-storage

実装

まずはインポートします。

import AsyncStorage from '@react-native-community/async-storage';

1	import AsyncStorage from '@react-native-community/async-storage';

値を保存したいときは以下のコード、

storeData = async () => {
  try {
    await AsyncStorage.setItem('@storage_Key', 'stored value')
  } catch (e) {
    // saving error
  }
}

storeData = async () => {

try {

await AsyncStorage.setItem('@storage_Key', 'stored value')

} catch (e) {

// saving error

}

上記の保存した値を読み込むときは以下のコードになります。

getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_Key')
    if(value !== null) {
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
}

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のコードになっています。

インストール

インストールしたいプロジェクトで以下のコマンドを実行します。

$ npm install --save realm
$ react-native link realm

1 2	$ npm install --save realm $ react-native link realm

実装
公式のサンプルコードになります、Realmを扱うにはスキーマを定義する必要があります。
ネイティブ開発でRealmを使ったことがある人は、戸惑うことなくコードを書いていけそうです。

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);
  });

const Realm = require('realm');

// Define your models and their properties

const CarSchema = {

properties: {

make: 'string',

model: 'string',

miles: {type: 'int', default: 0},

}

};

const PersonSchema = {

properties: {

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も記事にしたくなってきたのでより学習を進めて説明できる様になりたいと思います。

日	月	火	水	木	金	土
« 6月
	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

ReactNativeデータ永続化

はじめに

データ永続化の方法

AsyncStorage

react-native-async-storage

インストール

実装

Realm

インストール

redux-persist

さいごに

おすすめ書籍

フォロー

アプリ情報