APIから取得したデータをRealmに保存し取得してみた!

たか（エンジニア）

2024.07.17

IT技術

ReactNative

はじめに

こんにちは!今回はAPIから取得したデータをRealmに保存し、表示する流れをブログにまとめてみようと思います!

業務でReactNativeを触っているのですが、webviewで表示されています。そのためローカルDBに保存されていないため機内モードにしたときなど通信接続ができなくなったときに何も表示されなくなります。
研修で開発したAndroidアプリではRoomライブラリを使用していたのですが、ReactNativeでは何が使用されているのか気になったため今回調べてみました!

ReactNativeで使用されるローカルDBについて

ReactNativeではSQLite、Realm、AsyncStorageの主に3つがローカルDBで使用されているみたいです!
3種類が使い分けられているということはそれぞれにメリット、デメリットがあると思うのでchatGPTに質問してみます!

ReactNativeで主に使用されているSQLite,Realm,AsyncStorageについてメリット、デメリットを教えてください

SQLite: 標準的なSQLを使用できるため、既存のSQL知識を活用したい場合やシンプルなデータ管理に適しています。
Realm: 高パフォーマンスが必要なリアルタイムアプリケーションや、クロスプラットフォームの対応が求められる場合に最適です。
AsyncStorage: 設定や簡単なデータ保存が必要な小規模アプリケーションでの使用に適しています。

なるほど、、、　今回は都道府県と人口を管理するシンプルなデータ管理で使用するためSQLiteでもいいのですが、せっかくなので使ったことがないRealmを選択してみようと思います!

今回作成したアプリ

今回作成したアプリは都道府県と人口を取得し画面に表示するアプリを作成したいと思います!
アプリ画面はかなりシンプルですが、こんな感じです!

都道府県と人口を取得するAPIはRESAS-APIを使用します!
アカウントを作成すれば誰でも都道府県や人口以外にも地域経済・インフラなども取得できるみたいなので使ってみてください!
参考リンク: https://opendata.resas-portal.go.jp/

axiosを使用してAPI接続

ではまずRealmに保存する前にaxiosを使用してRESAS-APIから都道府県と人口のデータを取得してみたいと思います!

1import axios from 'axios';
2
3const apiKey = 'あなたのAPIKEYを設定';
4
5export const fetchPrefecturesData = async () => {
6    try {
7        //都道府県リストの取得
8        const getPrefectures = await axios.get('https://opendata.resas-portal.go.jp/api/v1/prefectures', {
9            headers: { 'X-API-KEY': apiKey }
10        });
11
12        const prefectureData = getPrefectures.data.result;
13
14        //各都道府県の人口データの取得
15        const prefecturesPopulation = await Promise.all(prefectureData.map(async (pref: { prefCode: number, prefName: string }) => {
16            const getPopulation = await axios.get(`https://opendata.resas-portal.go.jp/api/v1/population/composition/perYear?prefCode=${pref.prefCode}`, {
17                headers: { 'X-API-KEY': apiKey }
18            });
19            const populationData = getPopulation.data.result.data[0].data;
20            const latestPopulation = populationData[populationData.length - 1].value;
21
22            return {
23                prefCode: pref.prefCode,
24                prefName: pref.prefName,
25                population: latestPopulation,
26            };
27        }));
28
29        return prefecturesPopulation;
30    } catch (error) {
31        console.error('APIからデータを取得する際にエラーが発生しました:', error);
32        throw error;
33    }
34};

コードについて軽く説明するとRESAS APIから都道府県のリストとその人口データを取得し、各都道府県の最新の人口データを返します。非同期関数を使っているので、APIリクエストは同時に行われ、データを集めるように実装しています!

まず、APIキーを用意します!これはRESAS APIにアクセスするための秘密の鍵で、これがないとAPIにアクセスできません!
次に、fetchPrefecturesDataメソッドを使って、全ての都道府県とその人口データを取得します!
getPrefectures変数で都道府県のリストを取得するリクエストを行います。APIキーを使ってアクセスし、結果はprefectureDataに保存されます!

各都道府県の人口データを取得するために、さらにAPIリクエストを送ります!各都道府県について、最新の人口データをlatestPopulationとして抽出し、都道府県ごとにオブジェクトを作成します。この一連のAPIリクエストは、Promise.allを使って全てのリクエストが完了するまで待ちます!

最終的に、全ての都道府県の最新人口データを含む配列をreturnします！
fetchPrefecturesDataメソッドを呼び出すことでAPIからデータを取得することができます!
以下が取得に成功したログです!

プロジェクトにRealmをインストールする

APIからデータ取得したので次にRealmにデータを保存してみます!
まずプロジェクトにRealmをインストールします!
インストールは簡単で以下のコマンドを叩くだけです!

1npm install realm

これによりプロジェクトにインストールすることができました!
注意点としてインストールした後に依存関係も追加する必要があります!
iosであれば

1pod install

を忘れないようにしましょう!

Schemaの定義

次にShemaを定義します!

1export const PrefectureSchema = {
2    name: 'Prefecture',
3    primaryKey: 'prefCode',
4    properties: {
5        prefCode: 'int',
6        prefName: 'string',
7        population: 'int',
8    },
9};

テーブル名を今回は都道府県に関するデータを保存するのでPrefectureとします。
主キーにはIDの役目をしているprefCodeにしたいと思います。
プロパティには主キーに設定したprefCodeと都道府県をstringで保存するprefName,都道府県ごとの人口をintで保存するpopulationを追加します!
ひとまずShemaは完成です!

Realmに取得したデータを保存する

RealmにAPIから取得したデータを保存してみます!

1// Realmに都道府県データを保存する関数
2export const savePrefecturesToRealm = (realmInstance: Realm, prefectures: Prefecture[]) => {
3    try {
4        realmInstance.write(() => {
5            prefectures.forEach((pref) => {
6                realmInstance.create('Prefecture', pref, Realm.UpdateMode.Modified);
7            });
8        });
9    } catch (error) {
10        console.error('Realmにデータを保存する際にエラーが発生しました:', error);
11        throw error;
12    }
13};

このコードは、取得した都道府県データをRealmデータベースに保存するためのものです!
まず、savePrefecturesToRealmメソッドを定義して、Realmデータベースのインスタンスと都道府県データの配列を受け取ります。

メソッド内では、realmInstance.writeを使ってデータベースに書き込む処理を行います。writeメソッドの中で、都道府県データの配列をループし、各都道府県データをrealmInstance.createを使って保存します。このとき、Realm.UpdateMode.Modifiedを指定することで、既存のデータがあれば更新し、なければ新規作成します!

もしエラーが発生した場合には、catchブロックでエラーメッセージを出力し、エラーを再スローします。これにより、エラーが発生した場合でも適切に対処できるようになっています!

以上で、取得した都道府県データをRealmデータベースに保存し、必要なデータを管理しています!

Realmからデータを取得する

最後にRealmからデータを取得してみます!

1// Realmから都道府県データを取得する関数
2export const getPrefecturesFromRealm = (realmInstance: Realm): Prefecture[] => {
3    try {
4        const storedPrefectures = realmInstance.objects('Prefecture');
5        return Array.from(storedPrefectures);
6    } catch (error) {
7        console.error('Realmからデータを取得する際にエラーが発生しました:', error);
8        throw error;
9    }
10};

このコードは、Realmデータベースから都道府県データを取得するためのものです。getPrefecturesFromRealmメソッドを定義して、Realmデータベースのインスタンスを受け取ります。

メソッド内では、realmInstance.objects('Prefecture')を使って、Prefectureスキーマに保存されている全てのデータを取得します。取得したデータはRealm.Resultsオブジェクトなので、これをArray.fromを使って通常の配列に変換し、returnします!

このようにして、Realmデータベースからスムーズに都道府県データを取得し、必要なデータを管理しています!

このコードを使えば、保存されている都道府県データを簡単に取り出せます。データベースからのデータ取得もばっちりです！
以上の実装でRealmからデータを取得することができました!