React Nativeで遊んでみよう - 其ノ弐：react native storage でデータを保存

こんにちは、みみです。

React Native の公式サイトとかをちんたら読みながら、ちまちま作っていくと、まあまあ大体の人が躓くと思うココ。

・・・結局、データ保存は何を使うのが良いのよ！？

ってなるよね？ AsyncStorage が基本というか React Native の標準装備的なのはわかるんだけども、ちょっと前は Realm が良いって聞いた気がするんだけどそうでもないの？どうなの？みたいな空気感。なので、

この辺りを流し読みして、結果、

react native storage – npm search

npm の人気ナンバーワン（2018/09/02現在）である react-native-storage （AsyncStorage のラッパー）にしてみました。

注：本来は目的に応じて選びましょう

今回作りたいアプリは凄いシンプルなデータしか扱わない予定なので、人気投票をアテにしてみたけれど、本来はちゃんと目的に応じて最適なものを選んでくださいね。選択肢がたくさんあって迷っちゃう、という贅沢な？悩み…。

早速インストール

npm install react-native-storage --save

（そうそう、WARNがばんばん出て脆弱性がーとか怒られて怖かったので書かれている通りfixしてみたら動かなくなった！ので、とりあえず何もしないでおきましょう。私の環境だけかもしれないけれど…）

App.jsに

import Storage from 'react-native-storage';
import { AsyncStorage } from 'react-native';

と書いてインポートします。

初期設定

GitHub に超丁寧な説明があるので、その通りにしていくだけです。適当ほんにゃくしておきます。

//ストレージの設定
var storage = new Storage({
	// 最大容量, 1000がデフォルト 
	size: 1000,

	// AsyncStorageを使う（WEBでもRNでも）。
	// セットしないとリロードでデータが消えるよ。
	storageBackend: AsyncStorage,
	
	// （たぶん）キャッシュの期限。デフォルトは一日(1000 * 3600 * 24 milliseconds).
	// nullにも設定できて、期限なしの意味になるよ。
	defaultExpires: 1000 * 3600 * 24,
	
	// メモリにキャッシュするかどうか。デフォルトは true。
	enableCache: true,
	
	// リモートシンクの設定（だと思う。）
	sync : {
		// これについては後述
	}
})

という感じで、データサイズとかキャッシュとかの設定をします。

データを保存する

データを保存するには、

storage.save({
    key: 'sample',
    id: '1234',
    data: {
        'name' : 'mimi',
        'status' : 'nemui'
    },
});

とかいう感じで、JSON形式で好きに保存できるぽい。すごい適当な例ですみません。データ毎にキャッシュの設定も出来るようです。

データを参照する

データを参照（ロード）するには、

storage.load({
        key: 'sample',
        id: '1234'
      }).then(ret => {
        // ロードに成功したら
        console.log(ret.name + ' is ' + ret.status);
      }).catch(err => {
        // ロードに失敗したら
        console.warn(err.message);
        switch (err.name) {
          case 'NotFoundError':
            // 見つかんなかった場合の処理を書こう
            break;
          case 'ExpiredError':
            // キャッシュ切れの場合の処理を書こう
            break;
        }
      });

てな感じでロードできます。

オマケ：デバックの方法

え、consoleってどこで見るのよ？ってなるかと思いますが、Macで、シュミレーターの場合は command + D を押すと

こういう画面が出てくるので “Debug Remote JS” を選びます。するとChromeが立ち上がるのでデベロッパーツールを表示して、普通にコンソールみたりしてデバックできるようになります。

参照：Debugging · React Native

というわけで、ざっくりデータの出し入れは分かったけれど、ひっさしぶりにデータベース設計的な事をしなくてはならないのでは。JSON形式だとなんか新鮮っていうか不安っていうか型とかどうなるんだっけこれ。AsyncStorage は文字型しか扱えないよってどっかに書いてあったけども…。マテジゴウ。