「Reactフックを使ったAPI取得の方法 | 簡単な手順で実装可能
初心者向けに、Reactのフックを使って、簡単な手順でAPIを取得する方法についてご紹介します。
Hooks(フック)
React v16.8からは、クラスを使用せずに関数コンポーネントでState(状態)やその他の機能を使用することができるようになりました。この機能をフックと呼びます。
フックを使用することで、関数コンポーネントはステートフルなコンポーネントとして振る舞うことができます。これにより、コンポーネントの状態を管理し、必要に応じて再レンダリングすることができます。
例えば、useStateフックを使用することで、コンポーネント内で状態を管理することができます。useEffectフックを使用することで、コンポーネントがマウントされたりアンマウントされたりしたときに実行する処理を定義することができます。
フックを使用することで、クラスを使用したコンポーネントよりもシンプルで読みやすいコードを書くことができます。また、フックは再利用可能であるため、コードの共通化も容易になります。
以上のように、フックはReactコンポーネントの状態管理やライフサイクル処理を行うための重要な機能です。
useEffectフックとは
useEffectフックは、Reactの関数コンポーネントで副作用を実行するための仕組みです。
副作用とは、データの取得やDOMの変更など、コンポーネントの描画以外の処理のことを指します。
useEffectフックは、コンポーネントがレンダリングされた後に非同期で実行されます。
例えば、fetchメソッドを使用してデータを取得する場合、useEffectフックを使って非同期に処理を行うことができます。
useEffectフックについては、他の記事で詳しく解説していますので、関連する記事を参照ください。
初心者でのReact開発では、Create-React-App(CRA)を使用することが一般的です。
CRAは、Reactアプリケーションの構築を簡単に行うことができます。
したがって、本日では初心者向けにCRAを使用していきます。
フックを使用したAPI呼び出し
まずは必要なモジュールをインポートしなければいけませんので、useEffect()とuseState()フックを読み込みます。
import { useEffect, useState } from 'react';
まず、全体図コードでコメント付きコードにしたのでご確認ください。
// App.js // Reactのコンポーネントを定義する const App = () => { // useStateフックを使って、postsという名前のstateを定義する // 初期値は空の配列 const [posts, setPosts] = useState([]) // useEffectフックを使って、コンポーネントがマウントされた時に一度だけ実行される処理を定義する // fetchメソッドを使って、外部APIからデータを取得し、取得したデータをsetPosts関数を使ってstateにセットする useEffect(() => { fetch('https://jsonplaceholder.typicode.com/posts') .then(res => res.json()) .then(data => {setPosts(data) }) },[]) // mapメソッドを使って、取得したデータをリスト表示するためのJSXを生成する const usePosts = posts.map((post, index)=>{ return ( <div key={index}> <li>{post.id}</li> <li>{post.title}</li> </div> ) }) // コンポーネントの描画内容を定義する return ( <div> <ul> {usePosts} </ul> </div> ); } // Appコンポーネントをエクスポートする export default App;
See the Pen Untitled by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.
では、以下にコードを分解して解説していきます。
const App = () => {
この行は、Appという名前のReactコンポーネントを定義しています。コンポーネントは、UIの一部を表すJavaScriptの関数です。
const [posts, setPosts] = useState([])
この行では、ReactのuseStateフックを使用して、postsという名前の状態変数を定義しています。
useStateは、Reactコンポーネント内で状態を管理するために使用されます。
そして、setPostsは、postsの値を更新するために使用されます。
useEffect(() => { fetch('https://jsonplaceholder.typicode.com/posts') .then(res => res.json()) .then(data => {setPosts(data) }) },[])
この行は、ReactのuseEffectフックを使用して、コンポーネントがマウントされたときに実行される副作用関数を定義しています。
fetch関数を使用して、外部APIからデータを取得し、setPostsを使用して、postsの値を更新しています。
第二引数である[]では、useEffectが最初にマウントされたときにのみ実行されることを示しています。
つまりコンポーネントがマウントされた際にコールバックを1回だけフックさせるには、空の配列を2番目の引数に渡す必要があると言うことになります。
const usePosts = posts.map((post, index)=>{ return <div key={index}> <li>{post.id}</li> <li>{post.title}</li> </div> })
この行は、posts配列を使用して、usePostsという名前の変数を定義しています。
map関数を使用して、各投稿のidとタイトルを表示するためのHTML要素を生成しています。
return ( <div> <ul> {usePosts} </ul> </div> ); } export default App;
この行は、AppコンポーネントがレンダリングするUIを定義しています。usePosts変数を使用して、投稿のリストを表示しています。最後に、Appコンポーネントをエクスポートしています。
以上が、Reactアプリケーションで外部APIからデータを取得するための簡単な方法です。
以下のように、React v18では、useStateの引数に空の配列を渡さなくてもエラーはスローされません。
const [posts, setPosts] = useState([]) // React v18 ~ const [posts, setPosts] = useState( )
React v18以前の場合、useStateの引数に空の配列を渡し忘れると、初期値がundefinedになります。この場合、解決策は、useStateの初期値にnullを渡すことです。nullを初期値として渡すことで、undefinedエラーを回避できました。
しかし、React v18以降では、Suspenseに変更が加えられ、undefinedやnullのフォールバックをレンダリングできるようになりました。
これにより、useStateの引数に空の配列を渡す必要がなくなりました。
ただし、useStateの引数に空の配列を渡すことは、コンポーネントがマウントされたときに一度だけ実行される副作用関数を定義する場合に依然として推奨されています。
これにより、コンポーネントが再レンダリングされたときに、副作用関数が再度実行されることが防止されます。したがって、引数に空の配列を渡すことは、パフォーマンスの向上に役立ちます。
最後に
フックでAPIをフェッチする際は、useEffectフックの副作用がどのように機能するのかをしっかりと理解する事が重要となります。
無数の再レンダリングを回避する方法は、useCallback()フックで非同期関数をメモ化してuseEffectと併用すると回避可能です。
ですが、fetchは基本的にはasync/awaitの構造体として呼び出すようにしてください。
外部リソースではPromiseによって呼び出されるのが一般的です。
次のステップは下記となります。
本日は以上となります。
最後までこの記事を読んで頂きありがとうございます。
この記事が気に入ったら、ブックマークし他の方にも共有してください。
