プログラミング初心者のための入門ブログエンジニアが未来を切り開く。使い方この広告は、90日以上更新していないブログに表示しています。使い方React基礎useDebugValueとは?非文字列パラメータ複数でのDebugValueuseDebugValueはいつ使うのですか?本日の記事はReact初学者様には、まだ教えるべきかどうか悩みましたなぜかと言いますとほとんどの場合ではReactフックでuseDebugValueを使用する必要はないからです。Reactのカスタムフックの複雑さによっては役立つ場合があります。useDebugValueフックが、何なのかそれを使用する方法やそして、いつそれを使用する必要があるかについて初心者様に解説していきます。カスタムフックに精通し複雑化したカスタムフックを書いていく事になれば、将来この記事はあなたにとって役立つ事は間違いないでしょう。toolの拡張機能と連携して機能致します。カスタムフックのデバッグ情報をプリントアウトするために使用され、フックの値を確認するよりも簡単な形式で開発ツールに情報を記録できるようになります。それだけではなく、他の人があなたのフックに関する情報を簡単に確認でき、あなたのフックに関する詳細情報をすばやく確認も可能となるので、あなたのフックにも非常に役立ちます。コンソールやネットワーク情報にアクセスできるのと同じように、ブラウザにダウンロードしブラウザの開発ツール内のタブとしてアクセスできる拡張機能の一部となります。Tools』を有効化しておいて下さい。useDebugValueの使用は非常に簡単となっており、カスタムフック内で関数を呼び出してあげます。className='App-header'></div>カスタムフックであるuseUserフックにuseDebugValueは文字列を引数として取るフックがあります。この渡し方はごく一般的な方法となります。{useUser()フックの現在のステータスを強調するために、条件付きで文字列を変更するか、条件付きで関数を呼び出す必要があります。toolで表示する文字列を条件付きで選択することにより、カスタムフックの基本的なステータスを決定するために使用されます。フックを使用するコンポーネントをクリックすると、画面の右側にhooksラベルの付いたセクションが表示されます。上記の画像のように、セクション内にはUserフックが表示され、その横に渡された値にはデバッグ情報が表示されています。それがuseDebugValueとなります。このフックであるラベルとして機能しフックが何が起こっているのかを識別し開発ツールに情報を記録できるようになります。useDebugValueのReactフックを使用しない場合のフックだと今回のコードではこのように表示されます。非文字列パラメータuseDebugValueフックを使用して、非文字列パラメータを表示するには、第二引数としてフォーマット関数を渡す必要があります。...}非文字列パラメータを使用すると、パラメータの文字列ラベルが表示されますが、フックをDebugValue展開して詳細を表示するとオブジェクトの詳細を展開できるセクションが表示されます。これにより、デバッグツールでカスタムフックの値を見るときに、User:の前に渡された値が表示されます。注意点として、フォーマット関数はパフォーマンス上の理由から、必要なとき以外は呼び出されないようにすることが重要です。値が変更されていない場合は呼び出されないようにする必要があります。これを達成するためには、フォーマット関数内で依存関係を定義する必要があります。依存関係は、useDebugValueフックと同じように配列で指定することができます。複数でのDebugValueこのフックを複数使用する場合、それぞれのカスタムフックで使用することができます。下記のように、2つの異なる値に対してuseDebugValueを使用するカスタムフックを作成できます。...}上記では、useCustomHookは2つの値を受け取り、それぞれuseDebugValueを使用しています。それぞれの値に対するカスタムフォーマット関数を定義することで、デバッグツールで値を適切に表示できるようにしています。useDebugValue("test1")useDebugValue("test2")上記の場合、useDebugValueは配列に渡した場合とほとんど同じように機能し内部ではデバッグツールですべてのフックを1つの配列に結合するだけとなります。useDebugValueはReactフックであるため、関数コンポーネントの中で直接使用する事も可能なので覚えておいて下さい。カスタムフックが複雑になるにつれて、デバッグする必要がある場合は、上記の例のようにフックの状態を示す文字列を瞥見した方が簡単になることがあります。useDebugValueはいつ使うのですか?このフックを使用する際は、カスタムフックと組み合わせてのみ使用していく必要があります。あなたが作成するカスタムフック全てにこのuseDebugValueを追加していく必要性はありません。複雑なフック時やフックの状態が明らかになっていなく確認したい場合のみとなります。ほとんどの場合が必要がありません、事前に当記事をブックマークしておき、今後あなたが必要になった時は、このフックを思い出して、またいつでも学習しにお戻り下さい。その際は、このフックを慎重に扱うように心がけて下さい。使用すると、開発プロセスをよりスムーズかつ効率的に実行するのに役立ちます。本日は以上となります。最後まで読んで頂きありがとうございました。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。