React Nativeでaxiosを使ってWebAPIから画像を取得して表示する【チュートリアル】

javascriptを使ってiphoneやAndroidアプリを作成できるReact Native

今回は、外部モジュールである「axios」をつかって、WebAPIから画像URLなどの情報を取得して、アプリに描写する方法を紹介します。

もし、環境構築や基本的なComponentの使い方がわからない方は、以下の記事を参照してください。

 

画像を表示するようのComponentを作成する

React Native CLIで作成(react-native init)したファイル一式にsrcフォルダを作成し、srcフォルダの中にcomponentを作成していきます。

このようにデフォルトのフォルダやファイル一式に「src」ディレクトリが追加された形です。

rootの位置にあるindex.jsは

このように、Headerコンポーネントと画像一覧を表示するImageListコンポーネントを呼び出して、描写しているだけです。

 

フォルダ構成

全てのComponentが入っているsrcディレクトリの中身は

このようになっていて、

  • Header.js  ヘッダーを表示しているだけ(今回は無視してください)
  • ImageList.js  ImageMainコンポーネントの親コンポーネント(このコンポーネントでAPIから情報を取得して、ImageMainコンポーネントに渡す)
  • ImageMain.js  ImageListコンポーネントから受け取ったパラメータを表示する子コンポーネント

という役割になっています。

axiosでデータを取得

今回のお題の1つ「axiosで外部APIからデータを取得する」

この処理は、ImageListコンポーネントで行うのですが、まずは、axiosでデータ取得している部分だけ、抜き出してみてみましょう。

まずはaxiosを使用することを宣言(1行目)、8〜13行目のcomponentWillMount()内にて、axiosを使います。

componentWillMount

componentWillMountはライフサイクルと呼ばれ、componentの動作のタイミングに合わせて発火されるメソッドです。

componentWillMountはその名の通り、ImageListComponentがアプリにマウント(表示)される前に実行されるメソッドで、表示される前にaxiosで表示したいデータを取得します。

axios

axiosは

  • GETやPOSTなどのHTTPリクエストの種類
  • アクセスするURL
  • パラメータ

を指定して、APIにアクセスするモジュールで、今回は

「GET」メソッドにて、「https://rallycoding.herokuapp.com/api/music_albums」にノーパラメータでアクセスしています。

その結果を、then()のなかで利用して、取得したデータをstateに保持します。

※今回使用したAPIはUdemyでReact Native講座の人気講師「Stephen Grider」氏のものです。非常にわかりやすい授業なので、めっちゃくちゃオススメですよ!!

取得したデータをrenderする

ImageList.jsの全てのソースはこういった形です。

axiosで取得したデータを、renderImagesメソッドで使いやすいデータに変換して、ImageMainコンポーネントに渡します。

画像をアプリに描写する

ImageMainコンポーネントは非常にシンプルで、

ImageList(親)コンポーネントから渡されたデータをタグにはめ込んでいくだけです。

  • View  HTMLのdivのようなもので、汎用的に要素をラップする
  • Text   HTMLのpのようなもので、テキストを表示するときに使う
  • Image HTMLのimgのようなもので、画像を描写するときに使う

このように、ReactNative独特の記法に慣れてしまえば、問題ありません。

ただ、1点だけ注意しなければならないことがあります。それは、

「ReactNativeでは画像にwidthとheightをつけなければならないこと」

Web制作出身者は見落としがちなポイントなので意識して制作しましょう。

画像一覧がスクロールして表示される

以上のソースを記述して、simulatorを起動すれば、

このように、画像とタイトルが一覧のリストが表示されます。

マウスで上下にドラッグ・アンド・ドロップすれば、ちゃんとアプリを指で操作しているみたいに、画面がスクロールして表示されます。

※ImageList.jsで「View」ではなく、「ScrollView」を使っている理由はViewにするとスクロールができなくなるため。

アプリづくりもちょろいちょろい!

外部のAPIから情報を取得して、アプリに画像を描写するフローはいかがでしたでしょうか?

意外と簡単じゃないですか?

わたし自身、アプリづくりには苦手意識があったのですが、こうやって少しずつ勉強していくと、ドンドン苦手意識がなくなり、逆に楽しくなってきています。

みなさんもどうぞアプリ制作にチャレンジしてみてください!

サンプルファイル(完成品)

https://github.com/rara-tan/react-native-axios-image-list

今回作成したアプリのソース一式を上記のgithubにアップしてありますので、興味のある方は是非^^

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。