プログラミング初心者のための入門ブログエンジニアが未来を切り開く。初心者向け解説この広告は、90日以上更新していないブログに表示しています。本日はReactのカスタムフック(独自フック)について、初心者の方に向けて基本的な使い方を解説します。カスタムフックとはカスタムフックの作成カスタムフックの使い方カスタムフックの利点カスタムフックはいつ使用する?最後にReactの基礎として、以前当ブログで解説したデータ取得の流れを活用して、カスタム(独自)フックを作成し、useEffectを使用してデータをフェッチし、そのデータを表示する方法を説明します。useEffectフックの基本的な使い方について理解していない場合は、以下の記事を参考にしてください。dev-k.hatenablog.comdev-k.hatenablog.comカスタムフックとはReactでは、独自のカスタムフックを作成することができます。これは、複数のコンポーネントで共通の状態ロジックを使用する場合に、同じコードを繰り返し記述する代わりに、カスタムフック内に配置し再利用することができるためです。カスタムフックの主な目的は、コンポーネントで使用されるロジックの再利用を容易にすることです。これにより、より読みやすくなる関数として活用でき、他のフックを使用できるJavaScript関数となります。このメカニズムにより、ロジックとビューを分離することができます。カスタムフックを使用する際のルールは以下の通りです。ループ、条件、またはネストされた関数の内部からフックを呼び出さない。通常の関数からフックを呼び出さない。React関数コンポーネントからのみフックを呼び出す。フックはコンポーネントのトップに配置する必要がある。カスタムフックを使用する際の名前は、useという単語で始まる必要があります。これは命名規則となっており、注意が必要です。サーバーからデータをフェッチし、プロセス全体で共有する必要がある場合、カスタム関数を作成することで、結果を自由に返すことができます。それではCreate-React-Appのご準備をお願い致します。カスタムフックの作成まずは、Reactアプリケーションで外部APIからデータを取得するための独自フックuseFetchを作成しましょう。このフックは、useStateとuseEffectを使用して、指定されたURLからデータを取得し、そのデータを状態として返します。データをuseStateフックで初期化します。useEffectフックを使用して、APIからデータを取得します。取得したデータを返します。useFetch;次に、先ほど作成したuseFetchフックを使用して、外部APIから取得したデータを表示するReactコンポーネントAppを作成しましょう。このコンポーネントでは、useFetchフックを使用して、https://jsonplaceholder.typicode.com/todosからデータを取得し、取得したデータをリスト形式で表示します。useFetchフックを使用して、APIからデータを取得します。取得したデータを表示します。CodePen.Reactアプリケーションで外部APIからデータを取得するための簡単な方法です。カスタムフックであるuseFetchフックを使用することで、データの取得と表示を簡単に行うことができます。上記のコードを分解して、より詳細な解説をしていきます。Placeholder」サービスを使用して、サンプルのデータをフェッチします。useFetch;このカスタムフックは、useStateフックを使用して、データを初期化します。useEffectフックを使用して、APIからデータを取得します。useEffectフックは、第2引数に空の配列を渡すことで、初回のレンダリング時にのみ実行されるようにしています。この関数は、必要に応じて何でも返すことができます。他のReactフックを使用しているため、この関数はカスタムフックと呼ばれます。以下は、作成したカスタムフックを使用する例です。);}そして、取得したデータをsetData関数を使用して、useStateフックで管理しているdataにセットします。最後に、取得したデータをreturn文で返します。このように、カスタムフックを任意のコンポーネントで再利用することができます。カスタムフックは、複雑な問題を処理するために単純化されたコードとして分割するための強力で便利な方法を提供してくれます。これにより、生産性が向上し、時間が節約されます。他の例でも、学んでいきましょう。API取得以外でも、例えばフォームのバリデーションやローカルストレージの操作など、様々な用途に使うことができます。以下に、入力フィールドのカスタムフックを作成して再利用可能な関数として抽出していきます。useInputカスタムフックを定義します。このフックは、入力値と入力値を変更する関数、そして入力値をリセットする関数を返します。reset];}次に、Appコンポーネントを定義します。このコンポーネントでは、useInputカスタムフックを呼び出して、名前とメールアドレスの入力フォームを作成します。フォームが送信された時には、入力値をコンソールに出力して、入力値をリセットします。App;最後に、Appコンポーネントをエクスポートしています。このように、useInputカスタムフックを使用することで、コンポーネントのロジックを再利用可能な関数として抽出することができます。カスタムフックを使うことで、コンポーネントの見通しを良くし、コードの再利用性を高めることができます。初心者でも簡単に使えるので、ぜひ試してみてください。以下では、当ブログでカスタムフックを使用した記事になりますので参照下さい。同じフックを2回記述する必要なく、何度でも使用できます。保守性カスタムフックは保守が容易です。フックのロジックを変更する必要がある場合は、一度変更するだけで済みます。綺麗で読みやすいコードすべてのコンポーネントロジックをフックに抽出すると、きれいなコードベースが提供され、読み手側にも分かりやすいコードとなります。異なるコンポーネントで同じロジックを使用している場合。大規模なプロジェクトに取り組んでいるとき。ロジックが非常に複雑な場合。最後に使用する上でのルールだけをおさえておけば、カスタムフックの作成は非常に簡単です。あなたは、フックのルールとカスタムフックの使用方法も確認し学び終えました。カスタムフックは、よりクリーンなコードを記述し、大規模なプロジェクトを構築するのに役立ちます。本日は以上となります。最後まで読んで頂きありがとうございます。この記事が役に立ったら、ブックマークと共有をしていただけると幸いです。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。