Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。

まずはとにかく自由を目指すエンジニアのブログです。
「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。
React Native

【ReactNative】APIによる図書情報の取得方法

どうも、とがみんです。

この記事では、React Nativeにて、国立情報学研究所が提供しているAPIを使用し、取得し図書情報

を表示する方法についてまとめていきます。

今回作成するもの

今回は、国立情報学研究所が提供している、図書情報を扱うAPIを使用し、取得した情報を一覧表示するものを作成していきます。

今回使用するAPIの詳細は以下に記載されています。

>CiNii Books – メタデータ・API – CiNii Books 図書・雑誌検索のOpenSearch

以下はタイトルに「ポケモン」が含まれる図書情報を30件取得し、一覧に表示したものです。

実相方法について

プロジェクトの作成

プロジェクトの作成方法については、以下を参考にしてください。

必要なパッケージについて

以下のコードをターミナルで実行し、axiosというパッケージをインストールします。

yarn add axios

axiosは、ブラウザとWEBサーバー間でのHTTP通信を簡単に行うことができるようにするライブラリです。

>https://github.com/axios/axios

APIを実行しデータを取得する関数の実相

APIを実行し、データを取得する部分についてです。
それに関わる部分のコードを以下に書いています。

「url」と「params」

CiNii Books図書・雑誌書誌検索のAPIを使用するので、urlにそのurlを、paramsにリクエストを送る際のパラメータをセットします。

今回は、パラメータとして以下を設定し、「ポケモン」で検索した結果30件をjson形式で返してもらうためのクエリを作成します。

title:ポケモン
format:json
count:30

その他のパラメータについては以下の記事に詳しく記載されています。

getData関数について

getData関数の中身では、urlparamsを渡しクエリを作成し、実行結果をresponseに格納する処理を行ってます。(setApiData関数については後ほど)

async/awaitは非同期処理を書く際の構文です。

asyncを関数の直前につけると、その関数は非同期で実行されるようになり、

その関数は、メインのプログラムとは別の流れの中で実行されるため、レスポンスを待たず、次の処理が実行されます。

そして、非同期で実行された関数の処理が終了したタイミングで、呼び出し元にその値を通知します。

非同期処理を行う関数の中のconst response = await axios.get(url,{params});に、awaitが指定されていますが、

これは、レスポンスが帰ってくるまで待機するという意味です。レスポンスが帰ってきた後に、その次の行のプログラムが実行されます。

今回受け取ったデータのresponse.data[‘@graph’][0].itemsの中身に以下のような今回欲しいデータが格納されています。

描画後に呼ばれる「useEffect」について

useEffectは関数は、コンポーネント内で「外部データの取得」や「DOMの更新(ビューの更新)」を実行することを可能にするためのものです。

以下では、APIを実行しレスポンスを受けとるgetData関数useEffect関数内で実行しています。

これにより、App関数が実行され、return()が呼ばれDOMの更新が反映された後に、getData関数を呼び出すことができます。

useEffect()の第二引数に[]を渡すことによって、マウント直後とアンマウント直前にのみuseEffect関数内の処理が呼び出されます。

内に値を入れた際は、その値に変化があった際にもuseEffect関数が呼び出されます。

指定しなかった場合、DOMが更新されるたびに呼び出されるので、無限にAPIにアクセスすDOMを更新する処理になってしまうため注意が必要です。

画面を再描画するための「useState」について

useStateは、Reactのstateの機能を関数コンポーネントで使用できるようにするためのものです。

const [apiData,setApiData] = useState([]);では、現在のstateとそれを更新するための関数をセットで返します。

useState([])()内には初期値を設定します。

今回のケースでは空の配列が初期値です。

まとめ

ReactNativeにて、APIの実行と、受け取った値を表示する方法について紹介しました。
サンプルコードはGitHubに上げているのでよければ参考にしてください。

https://github.com/togamin/ReactAPI.git

参考

>CiNii Books – メタデータ・API – CiNii Books 図書・雑誌検索のOpenSearch
>ステートフックの利用法|React
>副作用フックの利用法|React
>Promise based HTTP client for the browser and node.js