Nativeコンポーネントライフサイクル目次はじめにデータをfetchするコンポーネントライフサイクル実装を行うまとめはじめに前回は、Expoを使ったReactNativeのアプリ開発についてご紹介しました。Native】Expoは複雑でカスタマイズしたいようなアプリケーションには向いていませんが、機能が限られているアプリケーションであればとても簡単に開発が可能です。今回開発するのは、サーバと通信をし、そのデータをリストとして表示するアプリケーションです。多くのモバイルアプリケーションは、端末上で全てデータを持っているわけではなく、サーバと通信しそのデータを取得し表示するような形となっています。今回もそういったAPIを使用し、アプリケーション内に取得したデータを表示するものを開発していきます。データをfetchするそれでは、Expoで新しいプロジェクトを作ります。App.jsから、APIで値をHTTPリクエストしてみましょう。NetworkingPOINT!!fetchでも十分事足りますが、別のHTTPクライアントライブラリが使われることも多いです。シンプルな書き方で使えるaxiosというライブラリが人気です。axiosはVue.jsなどでも使われることが多いです。GETメソッドでアクセスしてみましょう。fetch('https://facebook.github.io/react-native/movies.json');値としてはこれらのものを返してくれます。]}このmoviesの値をリストとして展開するアプリケーションができそうですね。このfetchメソッドをどこに置くか考えてみましょう。アプリケーションを立ち上げたタイミングで値を取得してくれたら、その後のリスト展開が上手くいきそうですね。このタイミングについては、コンポーネントライフサイクルを理解してから実装する必要があります。コンポーネントライフサイクルReactには、コンポーネントライフサイクルと呼ばれるサイクルがあり、そのタイミングで処理を発動することができます。具体的には「コンポーネントが作成されたタイミング」、「マウント(画面上に表示)されたタイミング」などがあり、公式リファレンスから簡単に列挙していきます。マウントの前に呼び出されるメソッドです。componentDidMount()マウントが終わった後に呼び出されるメソッドです。componentWillReceiveProps()新しいpropsを受け取ると呼び出されるメソッドです。shouldComponentUpdate()stateやpropsに更新があった際に、マウントの前に呼び出されるメソッドです。componentWillUpdate()コンポーネントの更新マウントされる前に呼び出されるメソッドです。componentDidUpdate()コンポーネントの更新マウントされた後に呼び出されるメソッドです。(非推奨)となり、今後廃止されていくようです。イベントを見たことがあるかと思いますが、そちらと近いかもしれません。jQueryなどは実際のDOMを操作するのに対し、Reactのライフサイクルメソッドでは仮想DOMの生成や内部の状態(state)といった要素が関連する点が大きく異なります。今回のケースの場合はどのメソッドを使うべきでしょうか。内で行うのが良さそうですね。実装を行うでは、実際にコードを書いていきましょう。Expoのサンプルコードを極力触らず、元の素材も使いながらシンプルに作っていきます。出来上がるイメージはこちらです。}});解説では、App.jsから見ていきましょう。注意するポイントは、ScrollViewです。</ScrollView>ScrollViewですが、こちらはその名前の通りスクロールするViewのコンポーネントです。したAPIから動的に値を取ってくるものなど、件数が多いとどうしてもViewの場合は表示しきれなくなりがちです。この場合にはスクロールしなければ全体を見ることができず、ScrollViewが必要となります。次のポイントは、fetchで取得した値をstateに保存している処理です。}この処理でAPIの取得に成功した場合に、stateのmovieとtitleに値を設定しています。初期化している点もポイントです。</Card>そして、これらでCardの中身にmoviesをmapし、全件を1つずつAssetExampleコンポーネントとしてレンダリングさせています。その際にmovieの中身も渡していますね。次にAssetExample.jsです。}}そして、テキスト部分にpropsに設定したmovieのtitleやreleaseYearを使うことで、APIで取得した値を動的に表示させていることがわかるかと思います。まとめ今回はAPIから値を取得し、表示させる処理を実装しました。その際にコンポーネントのライフサイクルメソッドも確認しました。Expoを使っている為、今回実装した内容はすぐにスマホで確認できるはずです。次回は、レイアウトの整え方などを解説します。マーケター・ディレクター・エンジニアなど何でも屋。COBOLからReactまで色んなことやります。Native】アプリでもっと便利に!気になる記事をチェック!記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。palanでは一緒に働く仲間を募集しています正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。マーケター・ディレクター・エンジニアなど何でも屋。COBOLからReactまで色んなことやります。デザイナーアメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。デザイナーWebAR/VRのデザインと3DCG制作がメインです。肩書きは「アニメ案件に関わりたいデザイナー」。マーケタードイツでWEBマーケティングしています。使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。デザイナーフロントエンドデザイナー。CSS、JSの実装を担当しています。NativeやReact360をよく触っています。エンジニアサーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。デザイナーSketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。好きな食べものは生ハムとお寿司とカレーです。エンジニアサーバーサイドエンジニアからフロントエンドエンジニアになりました。Nativeでのアプリ開発をしています。エンジニアサーバーサイドエンジニア。SIerを経て2019年7月に入社。Railsを使った開発を行っています。WebGLとReactが強みと言えるように頑張ってます。DamienWebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。TOP運営会社お問い合わせプライバシーポリシーは株式会社palanの運営する情報メディアです。おいしいデザイン・プログラミング情報をお届けします。クリエイター向けの記事を可愛く更新中!。