・外部APIを取得する際の注意点
こんにちは、フロントエンドエンジニアのてりーです。
僕がReact + TypeScriptを使い始めて5年ぐらい経過しました。
大学中退してニートの時期にプログラミングを始めて、ReactとTypeScriptの分野に集中する事で、派遣→フリーランス→メガベンチャーとキャリアを模索してきました。
詳細を書くと長くなるので、気になる方は以下の記事をご覧ください。
プロフィール はじめまして、Webエンジニアの「てりー」です。 プロフィールを読んでいただいて、ありがとうございます。 現在はメガベンチャー企業でエンジニアとしてフルリモートで働きながら、スキマ時間で副業をしています。 この[…]
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら 今回は大学中退してニートだった自分が完全未経験からメガベンチャーに入社した方法について解説していきます。 ・完全未経験から将来的なメガベンチャー転[…]
初心者向けのReact+TypeScriptの教材を作りました！！
2024年4月にnoteで一番読まれた記事なったほど反響があったので、興味ある方は是非ご覧下さい！
こんにちは、フロントエンドエンジニアのてりーです。 記事を手に取って頂きありがとうございます。 このチュートリアルでは…
完全未経験からReactを使って仕事をする為の学習ロードマップをまとめました。
こんにちは、フロントエンドエンジニアのてりーです。 僕がReact + TypeScriptを使い始めて5年ぐらい経過しました。 大学中退してニートの時期にプログラミングを始めて、ReactとTypeScriptの分野に集中する事で[…]
2024年現在にフロントエンドエンジニアとして、良い条件を目指していくなら是非ともReactは使える状態にしていきたいですね！
今回はReact Hooksの中でも、useEffectに焦点を当てて解説していきます。
では、どうぞ！！
useEffectとは
useEffectは、コンポーネントを外部システムと同期させるための React フックです。
useEffectの特徴は関数の実行タイミングを任意で設定できる事です！
関数コンポーネントの処理タイミングに関係なく、好きなタイミングで実行出来るので、「副作用フック」と呼ばれたりもします。
副作用フックの別名通り、DOMの書き換え、変数の代入、API通信などの副作用を扱うのに適しています。
useEffectの基本形
以下が基本形です。
useEffect(
() => {
実行関数
},
[ 依存配列 ]
);第一引数は実行関数で、第二引数が依存配列になります。
実行関数はレンダリングするたびに新しく作られる
実行関数はuseEffectが呼び出されるごとに新しく作られます。
ですので、画像の様にif文を使ったり、状況に応じて処理を変えることなども可能です
useEffect(( ) => {
if(data){
fetchData()
}
}依存配列と実行関数
依存配列が[ ]だと、ブラウザが最初に読み込まれた時に実行関数の処理が走ります。
依存配列に値が指定されている場合は、最初に実行関数の処理が走り、その後は依存配列の中の値に変更があった時に再度、実行されます
useEffectで非同期処理を行う
さてuseEffectの特徴がわかった所で非同期処理についてです。
先にネタバレすると、useEffectには直接、非同期処理を書くことは推奨されていません！！
じゃあどのように実装すえば良いのか？を解説していきます
useEffectの非同期処理の基本形
このような形になります。
useEffect(() => {
// 非同期関数を定義
const fetchData = async () => {
try {<br /> // APIを叩く
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('データの取得に失敗しました');
}
const result = await response.json();
setData(result); //データをセット
};
// 非同期関数を呼び出す
fetchData();
}, []); // 空の依存配列で初回レンダリング時にのみ実行これにより、useEffect内で非同期処理ができます。
ポイント①：useEffectの依存配列を空にする
useEffectの依存配列を空にする事で、初回時にのみ実行されます。
依存配列に具体的な値をセットする事で、特定のタイミングで非同期処理を実行する事も出来ます。
ポイント②：非同期処理の即時実行
今回のサンプルコードではuseEffect内で、非同期処理を行うfetchDataを定義して即時実行しています。
useEffect内に直接、非同期処理を書くことは、useEffectがpromiseを返す可能性が出てしまい、予期せぬエラーの原因となる為、推奨されていません。
その為、非同期処理を行う関数を定義し、即時実行する必要があるわけです！
今回使っているfetchDataではAPIを叩いて期待するレスポンスがあったら、useStateでデータをセット、なければエラーをthrowしています
・useEffectの依存配列を使って非同期処理の発火タイミングは制御する
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら 今回は、僕がエンジニア歴4年ぐらいの時にレバテックキャリアを使って転職をした体験談を振り返っていきます！ 結論は、転職意思が固まっている場合、転職エー[…]
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら 今回は大学中退してニートだった自分が完全未経験からメガベンチャーに入社した方法について解説していきます。 ・完全未経験から将来的なメガベンチャー転[…]