React Nativeでローカルデータを手軽に永続的に保存する方法（Expo対応）

はじめに

こんにちは！React Nativeアプリでデータをローカルに保存する方法はいくつかあります。データの種類や用途に応じて最適な選択肢を選ぶことで、アプリのパフォーマンスや使い勝手が向上します。本記事では、Expo環境で使える代表的な方法を比較し、それぞれの特徴や適したユースケースを紹介します！

上記にも記載していますがExpoを使用することを大前提に話を進めていきます。
(執筆中はExpo 52です)

永続的に保存するとはどういうことか

「データを永続的に保存する」とは、アプリを閉じたり、デバイスを再起動してもデータが消えないようにすることを指します。通常、React Nativeアプリの状態などはアプリを閉じるとリセットされますが、ローカルストレージを利用することで、データを保持し続けることができます。

永続的なデータ保存が必要なケースの例：

• ユーザー設定（ダークモードのON/OFFなど）
• 認証情報（ログイン状態の保持）
• キャッシュデータ（前回の検索結果など）
• オフラインデータ（ネットワーク接続なしでも利用できるデータ）

React Nativeのローカルストレージの選択肢

React Nativeでは、データを永続的に保存するためにいくつかの方法があります。それぞれ特徴が異なるので、用途に応じて使い分けることが重要です。Expo公式でも紹介されている3つを紹介します！

• SecureStore
• SQLite
• AsyncStorage

https://docs.expo.dev/develop/user-interface/store-data/

それぞれの概要

SecureStore

https://docs.expo.dev/versions/v50.0.0/sdk/securestore/

SecureStoreは、Expo環境で利用できる暗号化されたストレージです。特に機密情報の保存に適しており、APIトークンや認証情報などのデータを安全に管理できます。

インストール

bunx expo install expo-secure-store

使用例

"expo-secure-store": "~13.0.2",

import * as SecureStore from 'expo-secure-store';

const setSecureData = async (key: string, value: string) => {
  await SecureStore.setItemAsync(key, value);
};

const getSecureData = async (key: string) => {
  return await SecureStore.getItemAsync(key);
};

適したケース

• APIトークンや認証情報の保存
• 機密データの管理
• Expo環境でセキュアなデータ保存をしたい場合

避けるべきケース

• 大量データの保存(現状では2048 bytes以上は失敗する可能性があります)
• 非機密データの保存（AsyncStorageで十分）

SQLite

https://docs.expo.dev/versions/latest/sdk/sqlite/

SQLiteは、サーバーを必要としないファイルベースのリレーショナルデータベース（RDBMS）です。アプリ内にデータベースファイルを作成し、SQLを使用してデータを管理できます。

オフライン環境でも利用でき、大量のデータを扱うアプリやデータ同士の関連性を持たせたい場合に適しています。また、Expo v52以降ではSQLiteがKey-Value Storageに対応しました。これにより、WebのLocalStorageのような感覚でデータを手軽に管理できるのが嬉しいポイントです！

https://docs.expo.dev/versions/latest/sdk/sqlite/#key-value-storage

インストール

bunx expo install expo-sqlite

使用例（Key-Value Storage）

import Storage from 'expo-sqlite/kv-store';

await Storage.setItem('key', JSON.stringify({ entity: 'value' }));
const value = await Storage.getItem('key');
const entity = JSON.parse(value);
console.log(entity); // { entity: 'value' }

expo-sqlite/kv-storeは、@react-native-async-storage/async-storageの代わりとして使えるStorage機能であり、もしプロジェクトでexpo-sqliteをすでに使っているなら、新しく別のライブラリを追加せずにそのまま活用できます！

適したケース

• 大量のデータを保存・管理したい場合
• 検索やフィルタリングを頻繁に行う場合
• データ同士のリレーションが必要な場合（例: ユーザーと投稿）
• シンプルなKey-Value型のデータ保存（AsyncStorageの代替として）

避けるべきケース

• クラウドとの同期が必要な場合（ローカルのみの管理では不十分）

AsyncStorage

https://react-native-async-storage.github.io/async-storage/docs/usage/

AsyncStorageはReact Native向けの非同期ストレージです。キー・バリュー型のローカルストレージで、データの保存と取得を簡単に行うことができます。またJSONデータの保存も可能なのが特徴です！

少し前の話ですがAsyncStorageはもともとReact Nativeに存在したAPIでした。しかしReact Native v0.59から非推奨になり、既にv0.61でコアから削除されました。(執筆時はv0.78)

インストール

bun add @react-native-async-storage/async-storage

使用例

"@react-native-async-storage/async-storage": "1.23.1"

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

const storeData = async (key: string, value: string) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (e) {
    console.error(e);
  }
};

const getData = async (key: string) => {
  try {
    const value = await AsyncStorage.getItem(key);
    return value;
  } catch (e) {
    console.error(e);
  }
};

適したケース

• 設定情報の保存（例: ダークモードのON/OFF）
• ユーザーの簡単なデータキャッシュ
• 一時的なデータ保存

避けるべきケース

• 一度に大量のデータの保存・検索（パフォーマンスが低下）
• データのリレーション管理が必要な場合

まとめ

上記三つを表にしてみました！

ストレージ	特徴	用途例
SecureStore	Expo環境で利用できる暗号化ストレージ	APIトークンや認証情報の保存 / 機密データの管理
SQLite (expo-sqlite/kv-store)	SQLベースのデータ管理 / Key-Value型保存も可能	大量データの保存・検索 / データ同士の関連付け
AsyncStorage	シンプルなKey-Valueストレージ	設定情報の保存 / 簡単なデータキャッシュ

終わり

結局のところ、SQLiteのKey-Value Storageが登場したことで、AsyncStorageのように使えるのが便利になりましたね！シンプルなデータ保存ならSQLiteのKey-Value Storageを使い、そして機密データの管理にはSecureStoreも使ったほう良いと個人的には感じました！

アプリの用途に応じて最適なストレージを選びつつ、実際にテストしてみるのが一番ですね！