lorem-co-ltd0Webアプリケーションを開発する場合、APIからデータを取得して表示することがよくあります。過去の記事でJavaScriptで標準で用意されているfechメソッドを使ったAPIの取得を紹介しましたが、fetchメソッドは最近トレンドになっているReactでも使用できます。通常のJavaScriptとReactとの書き方の違いを知ってもらうため、今回はReactでfectchメソッドを使ってみたいと思います。動画もあるので必要な方は以下よりご覧ください。Reactでfetchメソッドを使ってAPIを取得する今回使用するAPIは無料で誰でも使用できる「jsonplaceholder」を使います。ブログ記事やユーザーデータなどのテストデータをたくさん用意してくれているので、まだ使ったことがない方はお気に入りにでも追加しておくことをお勧めします。https://jsonplaceholder.typicode.com/Reactではreturnの場所に画面に表示する内容を書くことになっているので、API処理など裏側で処理するものはreturnの外に書くルールになっています。FetchData;APIからデータを取得しただけですが、fetchメソッドの部分だけ見ると通常のJavaScriptと書き方は同じですね。ReactやVueなど新しいライブラリがどんどん生まれていますが、結局はJavaScriptの上位互換でしかないのでメソッドの書き方は一緒なんですね。考えると少しは親しみやすく見えるのではないでしょうか?fetchメソッドを使うのが初めての方は以下の記事で詳しく解説しているので確認してみてください。JavaScriptのfetch()の基本的な使い方とAPIの仕組みを解説【エンドポイント、クエリ、HTTP、ヘッダー、ボディ】fetchメソッドの使い方はReactでも同じであるのですが、取得したデータの扱い方がReactでは少し特殊になります。FetchData;Reactではステート変数というものにデータを格納する仕組みになっています。ステート変数を使うためには「useState」というものが必要で、こちらは事前にインポートしておく必要があります。データが格納されるステート変数に「データを入れる処理」をしてくれるものをステート関数と言います。useStateの引数にはステート変数にデータが入る前には何をセットしておくか、いわゆる初期値を指定しておきます。APIからデータ」になる仕組みです。FetchData;上記のコードで実際にステート変数であるdataにAPIの取得結果が格納されるか確認してみましょう。現状はまだコンソールでログを確認する形で大丈夫です。FetchData;ブラウザをリロードすると以下のようになるはずです。データらしきものは表示できていますが、同じようなものが大量に表示されていますね。こちら無限ループと言って「APIから同じデータを延々と繰り返し取得し続けている」という状態です。ブラウザを落としておきましょう。ReactではuseStateでステート変数の中身にデータを格納していくのですが、「何を」「いつまで」といった具合に条件を指定してあげないと延々とステート変数の中身を更新し続ける仕組みになっています。こちらを解決するためにuseEffectというものがあります。FetchData;まずuseEffectもインポートが必要なのでuseStateと同じくインポートしておきます。続いてuseEffectは関数になっていて引数を2つ指定します。・第二引数:実行したい処理を実行するタイミング第一引数で指定するものはAPIの取得なので、すでに作ってあるfetchメソッドのコードをそのまま入れるだけです。](空の配列)にすると「リロード時に1回だけ実行」という意味になります。上記の状態でもう一度ローカルサーバーを立ち上げてコンソールを確認してみましょう。先ほどのような無限ループにはならず配列が1個だけ取得できていますね。取得できた配列の中身を見てみます。オブジェクトが合計100個あるのが分かります、さらにオブジェクト単体の中身を見てみます。中には4つのプロパティがあり、英語表記ですが正常にデータを取得できていますね。今回取得したデータは英語表示のブログ記事になっています。こちらfetchメソッドに指定したURLをそのままブラウザに打ち込んでも同じデータが確認できます。https://jsonplaceholder.typicode.com/postsデータが取得できてステート変数であるdataに格納されたので、dataの中身を画面に表示してみたいと思います。FetchData;コンソールで確認したように1個ずつのデータは「配列の中にオブジェクトが100個ある」状態になっていたので配列とオブジェクトからデータを表示する書き方をするだけです。冒頭にも説明しましたがReactでは画面に表示する部分のコードはreturnの中で書くルールです。上記の場合、「0番目のオブジェクトのtitleの値を表示」という意味になっています。ブラウザをリロードすると画面にtitleの値が表示されました。ちなみにですが実はまだやることが残っていて、もう一度ブラウザを閉じて立ち上げ直してみてください。すると今度は画面には何も表示されておらずコンソールが以下のようになっているかと思います。何やらエラーになってしまったようです。見てみると最初のログが「undefined」になっているのですが、こちらどこかで見た覚えがありませんか?useStateを使ったステート変数dataの初期値に「undefined」を指定していましたね。dataの中身は初期値のままでAPIから取得したデータは入ってないことが想像できました。こちら結論から言うと、「APIの取得に時間がかかっていて、その間に画面の表示をしようとした」ことが原因です。dataにAPIの取得結果が格納されていない間に、<div>{data[0].title}</div>を実行しようとしたことで「{data[0].title}なんて何も入ってません」と言われてしまったわけです。こちらを回避する方法は何パターンかあるのですが一番簡単なのはreturn部分の画面に表示するコードを以下のようにすることです。FetchData;画面の表示部分のコードについて三項演算子で条件文を作りました。三項演算子が初めての方がいるかもしれませんが「if文」を書いているのと同じですので安心してください。・ステート変数dataがundefined(初期値のまま)だったら何も表示しない・ステート変数dataにAPIのデータがあれば表示すると言う内容です。初学者の方にはなかなかイメージしづらいかもしれませんが、APIの取得は僅かながら時間がかかる処理です。そのような時間がかかる処理を使うときは今回のような条件式で「データがないときにどうするか?」を考える必要があるんです。エラーではなくローディング画面などにする方が何かと便利だからですね。以上のような形でReactでfetchメソッドを使ったAPI取得をやってみました。fetchメソッド単体は全く持って同じ書き方ですが、画面の表示やデータの管理などが通常のJavaScriptと違う部分だったかと思います。これを機にReactを本腰入れて勉強してみようという方は以下のような本もオススメですので確認してみてください。