プログラミング初心者のための入門ブログエンジニアが未来を切り開く。初心者向けチュートリアルこの広告は、90日以上更新していないブログに表示しています。18で新たに導入された「useId」フックの使い方について、初心者の方に解説していきます。18以降で利用できる組み込みのフックです。18に関する新機能について、以下で詳しく説明しています。最後にuseIdフックとはuseId()フックは、React18でクライアント側とサーバー側の両方で安定した一意のIDを生成する新しい方法のフックとなっています。以前では、HTMLのIDを使用して2つのHTML要素を結合させます。Reactコンポーネント内で一意のIDを必要とする場合、通常は手動でIDを生成する必要があります。今までの例を簡単なフォームで見てみましょう。CodePen.label要素に関連付けるには、input要素にid属性を設定する必要があります。次にhtmlForは、テキストの属性を同じ値に設定すると、テキストが入力に関連付けられます。labelタグ内のhtmlForで指定したidにinputタグと紐づいている事になります。上記でのIDの場合、フックは1つの識別子しか生成できず、フックのルールに従わなければならないため、新しいIDを動的に生成することはできませんでした。このように、今までは手動でIDを生成する必要がありました。「useId」フックを使用することで、このプロセスを簡素化することができます。「useId」フックを利用すると、Reactコンポーネント内で簡単に一意のIDを生成できます。これにより、複数の要素やコンポーネントを正しく識別することが容易になります。アプリを両側で実行すると、同じIDが生成されます。以下のように、inputタグとラベルで結合が可能です。/>useIdフックは不一致を回避します。複数の入力ボックスがあった場合でも、複数のボックスを使用する必要はありません。フォーム全体で使用できるIDは1つだけとなります。)を含む文字列を返しますがその文字列はCSSセレクタではサポートされておりませんので使用は避けて下さい。リスト内のアイテムのキーを生成するためにuseIdフックを使用する事は避けて下さい。今までのフック同様にフックルールに準拠しながら書いていくようにして下さい。フックルールに関しては以下を参照ください。以下ではinputとラベルを使用したフォームの入力フィールドとなります。CodePen.上記のコードでは、Reactコンポーネント内で「useId」フックを使用して一意のIDを生成し、フォームの入力フィールドと関連付けています。"react";を使用して、ReactのuseIdフックとuseStateフックをインポートします。useId();を使用して、useIdフックを呼び出して一意のIDを生成し、idという変数に格納します。useState();を使用して、useStateフックを使用してusernameという状態変数とその更新関数setUserNameを宣言します。handleSubmitはフォームの送信時に実行される関数で、アラートダイアログを表示して入力された値とidを表示します。JSX内では、idを使用してhtmlFor属性やid属性に一意のIDを設定します。入力フィールドの値が変更されるたびにsetUserNameが呼び出されてusernameの値が更新されます。最後に、フォームはhandleSubmit関数を送信時の処理として指定しており、ボタンをクリックすることでフォームが送信されます。これは裏側でランダムのIDを自動で生成してくれています。inputタグの入力フィールドを増やしてみましょう。CodePen.上記のコードでは、Reactコンポーネント内で「useId」フックを使用して一意のIDを生成し、フォームの入力フィールドと関連付けています。useId();を使用して、useIdフックを呼び出して一意のIDを生成し、idという変数に格納します。useState();を使用して、useStateフックを使ってfirstNameとlastNameという状態変数とその更新関数を宣言します。handleSubmitはフォームの送信時に実行される関数で、アラートダイアログを表示して入力された値とidを表示します。JSX内では、idを使用してhtmlFor属性やid属性に一意のIDを設定します。入力フィールドの値が変更されるたびにそれぞれの状態変数の更新関数が呼び出されます。最後に、フォームはhandleSubmit関数を送信時の処理として指定しており、ボタンをクリックすることでフォームが送信されます。18の新機能として導入されました。useIdフックは、2つのHTML要素を結び付けるために使用されますが、CSSでIDをターゲットにすることは避けるべきです。これは、一意のIDが毎回異なるIDを生成するためです。この機能は、クライアント側とサーバー側の両方で一意のIDを生成するのに非常に便利です。将来的には、useIdフックの使用例もさらに増えていくと予想されますので、楽しみにしてください。最後までこの記事をお読みいただき、ありがとうございました。役に立った場合は、ブックマークや共有をしていただけると幸いです。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。