プログラミング初心者のための入門ブログエンジニアが未来を切り開く。簡単な手順で実装可能この広告は、90日以上更新していないブログに表示しています。初心者向けに、Reactのフックを使って、簡単な手順でAPIを取得する方法についてご紹介します。v16.8からは、クラスを使用せずに関数コンポーネントでState(状態)やその他の機能を使用することができるようになりました。この機能をフックと呼びます。フックを使用することで、関数コンポーネントはステートフルなコンポーネントとして振る舞うことができます。これにより、コンポーネントの状態を管理し、必要に応じて再レンダリングすることができます。useStateフックを使用することで、コンポーネント内で状態を管理することができます。useEffectフックを使用することで、コンポーネントがマウントされたりアンマウントされたりしたときに実行する処理を定義することができます。フックを使用することで、クラスを使用したコンポーネントよりもシンプルで読みやすいコードを書くことができます。フックは再利用可能であるため、コードの共通化も容易になります。以上のように、フックはReactコンポーネントの状態管理やライフサイクル処理を行うための重要な機能です。useEffectフックとはuseEffectフックは、Reactの関数コンポーネントで副作用を実行するための仕組みです。副作用とは、データの取得やDOMの変更など、コンポーネントの描画以外の処理のことを指します。useEffectフックは、コンポーネントがレンダリングされた後に非同期で実行されます。fetchメソッドを使用してデータを取得する場合、useEffectフックを使って非同期に処理を行うことができます。useEffectフックについては、他の記事で詳しく解説していますので、関連する記事を参照ください。dev-k.hatenablog.comdev-k.hatenablog.comdev-k.hatenablog.com初心者でのReact開発では、Create-React-App(CRA)を使用することが一般的です。CRAは、Reactアプリケーションの構築を簡単に行うことができます。したがって、本日では初心者向けにCRAを使用していきます。フックを使用したAPI呼び出しまずは必要なモジュールをインポートしなければいけませんので、useEffect()とuseState()フックを読み込みます。'react';まず、全体図コードでコメント付きコードにしたのでご確認ください。CodePen.では、以下にコードを分解して解説していきます。{この行は、Appという名前のReactコンポーネントを定義しています。コンポーネントは、UIの一部を表すJavaScriptの関数です。useState([])この行では、ReactのuseStateフックを使用して、postsという名前の状態変数を定義しています。useStateは、Reactコンポーネント内で状態を管理するために使用されます。setPostsは、postsの値を更新するために使用されます。})},[])この行は、ReactのuseEffectフックを使用して、コンポーネントがマウントされたときに実行される副作用関数を定義しています。fetch関数を使用して、外部APIからデータを取得し、setPostsを使用して、postsの値を更新しています。第二引数である[]では、useEffectが最初にマウントされたときにのみ実行されることを示しています。コンポーネントがマウントされた際にコールバックを1回だけフックさせるには、空の配列を2番目の引数に渡す必要があると言うことになります。})この行は、posts配列を使用して、usePostsという名前の変数を定義しています。map関数を使用して、各投稿のidとタイトルを表示するためのHTML要素を生成しています。App;この行は、AppコンポーネントがレンダリングするUIを定義しています。usePosts変数を使用して、投稿のリストを表示しています。最後に、Appコンポーネントをエクスポートしています。以上が、Reactアプリケーションで外部APIからデータを取得するための簡単な方法です。v18では、useStateの引数に空の配列を渡さなくてもエラーはスローされません。v18以前の場合、useStateの引数に空の配列を渡し忘れると、初期値がundefinedになります。この場合、解決策は、useStateの初期値にnullを渡すことです。nullを初期値として渡すことで、undefinedエラーを回避できました。v18以降では、Suspenseに変更が加えられ、undefinedやnullのフォールバックをレンダリングできるようになりました。これにより、useStateの引数に空の配列を渡す必要がなくなりました。useStateの引数に空の配列を渡すことは、コンポーネントがマウントされたときに一度だけ実行される副作用関数を定義する場合に依然として推奨されています。これにより、コンポーネントが再レンダリングされたときに、副作用関数が再度実行されることが防止されます。したがって、引数に空の配列を渡すことは、パフォーマンスの向上に役立ちます。最後にフックでAPIをフェッチする際は、useEffectフックの副作用がどのように機能するのかをしっかりと理解する事が重要となります。無数の再レンダリングを回避する方法は、useCallback()フックで非同期関数をメモ化してuseEffectと併用すると回避可能です。fetchは基本的にはasync/awaitの構造体として呼び出すようにしてください。外部リソースではPromiseによって呼び出されるのが一般的です。次のステップは下記となります。dev-k.hatenablog.com本日は以上となります。最後までこの記事を読んで頂きありがとうございます。この記事が気に入ったら、ブックマークし他の方にも共有してください。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。