APIから取得したデータをRealmに保存し取得してみた!【株式会社ライトコード】

はじめに

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

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

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

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

1. 質問:

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

1. 回答:

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

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

今回作成したアプリ

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

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

axiosを使用してAPI接続

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

import axios from 'axios';



const apiKey = 'あなたのAPIKEYを設定';



export const fetchPrefecturesData = async () => {

    try {

        //都道府県リストの取得

        const getPrefectures = await axios.get('https://opendata.resas-portal.go.jp/api/v1/prefectures', {

            headers: { 'X-API-KEY': apiKey }

        });



        const prefectureData = getPrefectures.data.result;



        //各都道府県の人口データの取得

        const prefecturesPopulation = await Promise.all(prefectureData.map(async (pref: { prefCode: number, prefName: string }) => {

            const getPopulation = await axios.get(`https://opendata.resas-portal.go.jp/api/v1/population/composition/perYear?prefCode=${pref.prefCode}`, {

                headers: { 'X-API-KEY': apiKey }

            });

            const populationData = getPopulation.data.result.data[0].data;

            const latestPopulation = populationData[populationData.length - 1].value;



            return {

                prefCode: pref.prefCode,

                prefName: pref.prefName,

                population: latestPopulation,

            };

        }));



        return prefecturesPopulation;

    } catch (error) {

        console.error('APIからデータを取得する際にエラーが発生しました:', error);

        throw error;

    }

};

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

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

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

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

…