React 18 新機能解説: useIdフックの使い方 | 初心者向けチュートリアル

本日はReact 18で新たに導入された「useId」フックの使い方について、初心者の方に解説していきます。

「useId」は、React 18以降で利用できる組み込みのフックです。

React 18に関する新機能について、以下で詳しく説明しています。

dev-k.hatenablog.com

useIdフックとは
- 抑えておくべきポイント
  - 一意のID生成
  - 最後に

useIdフックとは

useId()フックは、React18でクライアント側とサーバー側の両方で安定した一意のIDを生成する新しい方法のフックとなっています。

以前では、HTMLのIDを使用して2つのHTML要素を結合させます。

つまり、Reactコンポーネント内で一意のIDを必要とする場合、通常は手動でIDを生成する必要があります。

今までの例を簡単なフォームで見てみましょう。

const App = () => {

const [name, setName] = useState("");

const handleSubmit = (event) => {
    event.preventDefault();
    alert(`あなたの名前は: ${name}`)
  }

return(
<div>

<form onSubmit={handleSubmit} method="post" action="">
      <label htmlFor="your_name">your name:
        <input id="your_name"
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
<input type="submit" />
    </form>


</div>
)
}

See the Pen React 入力フィールド by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

label要素に関連付けるには、input要素にid属性を設定する必要があります。

次にhtmlForは、テキストの属性を同じ値に設定すると、テキストが入力に関連付けられます。

labelタグ内のhtmlForで指定したidにinputタグと紐づいている事になります。

上記でのIDの場合、フックは1つの識別子しか生成できず、フックのルールに従わなければならないため、新しいIDを動的に生成することはできませんでした。

このように、今までは手動でIDを生成する必要がありました。しかし、「useId」フックを使用することで、このプロセスを簡素化することができます。

「useId」フックを利用すると、Reactコンポーネント内で簡単に一意のIDを生成できます。これにより、複数の要素やコンポーネントを正しく識別することが容易になります。

つまり、アプリを両側で実行すると、同じIDが生成されます。

以下のように、inputタグとラベルで結合が可能です。

  const id = useId(); 

<label htmlFor={id + "-name"}></label>
<input id={id + "-name"} name="name" />

<label htmlFor={id + "-email"}></label>
<input id={id + "-email"} type="email" />

useIdフックは不一致を回避します。

複数の入力ボックスがあった場合でも、複数のボックスを使用する必要はありません。

つまりフォーム全体で使用できるIDは1つだけとなります。

抑えておくべきポイント

・コロン( : )を含む文字列を返しますがその文字列はCSS セレクタではサポートされておりませんので使用は避けて下さい。

・リスト内のアイテムのキーを生成するためにuseIdフックを使用する事は避けて下さい。 (代わりとしてデータを使用下さい)

・今までのフック同様にフックルールに準拠しながら書いていくようにして下さい。

フックルールに関しては以下を参照ください。

dev-k.hatenablog.com

一意のID生成

以下ではinputとラベルを使用したフォームの入力フィールドとなります。

import { useId } from "react";
import { useState } from "react";

const App = () => {
  // 一意のIDを生成するためにuseIdフックを使用
  const id = useId();

  // ユーザー名を管理するためにuseStateフックを使用
  const [username, setUserName] = useState();

  // フォームの送信時に実行される関数
  const handleSubmit = () => {
    // アラートダイアログでIDと入力されたフルネームを表示
    alert("Your ID: " + id + " - Full Name: " + username);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <p>
          <label htmlFor={`${id}-fullName`}>Full Name</label>
          <input
            id={`${id}-name`}
            onChange={(e) => setUserName(e.target.value)}
            type="text"
          />
        </p>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

See the Pen React useIdフック使い方 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

上記のコードでは、Reactコンポーネント内で「useId」フックを使用して一意のIDを生成し、フォームの入力フィールドと関連付けています。

まず、import { useId } from "react";およびimport { useState } from "react";を使用して、ReactのuseIdフックとuseStateフックをインポートします。

次に、const id = useId();を使用して、useIdフックを呼び出して一意のIDを生成し、idという変数に格納します。

その後、const [username, setUserName] = useState();を使用して、useStateフックを使用してusernameという状態変数とその更新関数setUserNameを宣言します。

また、const handleSubmitはフォームの送信時に実行される関数で、アラートダイアログを表示して入力された値とidを表示します。

JSX内では、idを使用してhtmlFor属性やid属性に一意のIDを設定します。また、入力フィールドの値が変更されるたびにsetUserNameが呼び出されてusernameの値が更新されます。

最後に、フォームはhandleSubmit関数を送信時の処理として指定しており、ボタンをクリックすることでフォームが送信されます。

これは裏側でランダムのIDを自動で生成してくれています。

inputタグの入力フィールドを増やしてみましょう。

import { useId } from "react";
import { useState } from "react";

const App = () => {
  // useIdフックを使用して一意のIDを生成
  const id = useId();

  // フォームの入力値を管理するためにuseStateフックを使用
  const [firstName, setFirstName] = useState();
  const [lastName, setLastName] = useState();

  // フォームの送信時に実行される関数
  const handleSubmit = () => {
    // アラートダイアログでIDと入力された名前を表示
    alert("Your ID: " + id + " - Name: " + firstName + " " + lastName);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <p>
          <label htmlFor={`${id}-FirstName`}>First Name</label>
          <input
            id={`${id}-name`}
            onChange={(e) => setFirstName(e.target.value)}
            type="text"
          />
        </p>
        <p>
          <label htmlFor={`${id}-lastname`}>Last Name</label>
          <input
            id={`${id}-lastname`}
            onChange={(e) => setLastName(e.target.value)}
            type="text"
          />
        </p>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

See the Pen React useIdフック使い方　複数 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

上記のコードでは、Reactコンポーネント内で「useId」フックを使用して一意のIDを生成し、フォームの入力フィールドと関連付けています。

const id = useId();を使用して、useIdフックを呼び出して一意のIDを生成し、idという変数に格納します。

その後、const [firstName, setFirstName] = useState();とconst [lastName, setLastName] = useState();を使用して、useStateフックを使ってfirstNameとlastNameという状態変数とその更新関数を宣言します。

また、const handleSubmitはフォームの送信時に実行される関数で、アラートダイアログを表示して入力された値とidを表示します。

JSX内では、idを使用してhtmlFor属性やid属性に一意のIDを設定します。また、入力フィールドの値が変更されるたびにそれぞれの状態変数の更新関数が呼び出されます。

最後に、フォームはhandleSubmit関数を送信時の処理として指定しており、ボタンをクリックすることでフォームが送信されます。