deve.K

エンジニアが未来を切り開く。

React 18 useIdフック 使い方【一意のID生成】

React 18 useIdフック

本日はReact 18 で新しく導入された『useId』フックの使用方法を初学者様に解説していきます。

useIdは、React 18以降で使用できる組み込みのフックとなります。

React18に関する新機能は下記で解説しております。

dev-k.hatenablog.com

useIdフックとは

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

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

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

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タグと紐づいている事になります。

htmlForプロパティは、ラベルのfor属性の値を設定または返します。

という事はforもある事になりますが。

なぜhtmlForなのかは、Reactでは大文字と小文字が区別されるため、必要に応じて従わなければいけません。

例えば、classではなくclassNameだったりです、定義ごとにキーワードを使用しhtml属性を定義していく必要があります。

forやclassはJavaScript予約語になってます、そのためJSXのHTML属性に関しては別のものを使用しなければいけません。

なのでReactチームは新しくhtmlForやclassNameを用意したのです。

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

しかし現在では、useIdフックを使用してReactの2つの要素を結合できます。

一意の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生成

それでは例を見ていきましょう。

まず、useIdをインポートします。

import { useId } from "react";

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

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

const App = () => {
  
  const id = useId(); 

    const [username, setUserName] = useState(); 

    const handleSubmit = () => { 

    alert("Your id: " +  id + "-fullName : " + 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>
)

}

useStateフックを使用しステート名を作成し、入力フィールドに入力する名前を保存します。

保存されるのはusernameとなります。

フォーム内に入力フィールドを作成します。

onChangeの関数を使用して、入力されたテキストなどの値をステートに格納します。

変数 id には、useId フックから取得したランダムな ID が格納されます。

handleSubmit関数では、ボタンクリックし送信後にアラートとしてidを含む入力された名前を表示します。

    alert("Your id: " +  id + "-fullName : " + username); 

ラベルと入力タグを一意のIDとして結合されてるのが分かるかと思います。

idとForです。

<p><label htmlFor={`${id}` + "-fullName"}>Full Name</label>
   
<input id={`${id}` + "-name"} onChange={(e) => setUserName(e.target.value)} type="text" />
   </p>

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

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


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

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

const App = () => {
  
const id = useId(); 

const [firstName, setFirstName] = useState(); 
  
const [lastName, setLastName] = useState(); 

const handleSubmit = () => { 

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" />

  <br /><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>
)

}

上記では、firstNameとlastNameで複数のuseStateを宣言しており、それぞれの状態変数を管理しております。

useIdフックを使用すれば、一意のIDなのでラベルとinputタグは結合されており、複数用意しても機能します。

後はhandleSubmit関数で名前入力されたのをアラートで表示します。

このように、Reactによって生成されたIDはグローバルに一意になります。

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

最後に

useIdフックはReact18の新機能となります。

useIdフックは、2つのHTML要素を結合するためにのみ使用しますが、CSSでIDをターゲットにしないようにしてください。

それは一意のIDが毎回異なるIDを生成するためです。

これはあなたにとって、クライアント側とサーバー側の両方で一意のIDを生成するのに非常に役立ちます。

将来的には、useIdフックのユースケースもさらに増えていくと思いますので楽しみにしてましょう。

本日は以上となります。

最後までこの記事を読んで頂きありがとうございます。

プライバシーポリシー