React + TypeScriptで一意のIDを生成

結論

「Math.random()ではなくuuidを使用して一意の ID を生成しましょう」

Introduction

React でアプリケーションを開発する際に、一意の ID が必要になることがあります。
例えばMath.random()で生成した文字列を ID として使用できそうです。
ただ、この文字列は疑似乱数のため重複する懸念があり、一意の ID としては推奨されません。
業務で使っているmlflowではuuidが使われていることを思い出し、調べてみました。
React でも使えそうです。

本記事が少しでも読者様の学びに繋がれば幸いです！
「いいね」をしていただけると今後の励みになるので、是非お願いします！

uuid ライブラリを使用した ID の生成方法

一意の ID を生成する場合はuuidライブラリが推奨されています。
こちらはRFC4122に従っており、衝突の可能性が限りなくゼロに近いです。
以下の手順に従って、uuidライブラリを使用した一意の ID の生成方法を説明します。

1. インストール
   uuidライブラリをインストールします。

   npm install

   $ npm install uuid
   

2. 実装
   uuidで一意の ID を生成します。
   ここでは以下の 2 パターンのコードで例示します。

   • 確認用に console 出力
   App.tsx

   import { v4 as uuidv4 } from 'uuid';
   
   // Generate a unique ID
   const uniqueId = uuidv4();
   console.log('A unique ID:', uniqueId);
   

   • 古典的な ToDo アプリの抜粋
   App.tsx

   const todoAddHandler = (text: string) => {
     // NOTE: prevTodos is the current todos copy
     setTodos((prevTodos) => [
       ...prevTodos,
       // Generate a unique ID
       { id: uuidv4(), text: text },
     ]);
   

   v4はuuidライブラリでランダムな UUID を生成する関数の 1 つです。
   uuidv4()を呼び出すことで、一意の ID が生成されます。

3. React + TypeScript で実装する場合
   TypeScript では、上記に加えてuuidライブラリを使用するための型定義ファイル@types/uuidライブラリが必要です。

   npm i

   $ npm i --save-dev @types/uuid
   

   これでuuidライブラリを TypeScript で使用できます。

4. 確認
   Console 出力のコードで、一意の ID が生成されるかを確認します。

   npm start

   $ npm start
   

   

   A unique ID: a016f360-9ffa-4fdf-9245-f9a3b9d06e6dが出力されました。
   再読込してみましょう。

   

   A unique ID: 88550175-e7da-4414-b981-30bc7bc5630aに ID が変更されました。
   一意の ID が正常に出力されていますね。

まとめ

• React では、一意の ID をuuidライブラリで生成できます。

• React + Typescript で uuid ライブラリを使用する場合、以下の 2 コマンドが必要です。

  $ npm install uuid
  $ npm i --save-dev @types/uuid
  

• uuidを import して、一意の ID を生成する。

  App.tsx

  import { v4 as uuidv4 } from 'uuid';
  
  // Generate a unique ID
  const uniqueId = uuidv4();
  console.log('A unique ID:', uniqueId);
  

最後に

閲覧頂きありがとうございました。
備忘録の側面もありますが、本記事がお役に立てば幸いです！

参考 URL

RFC4122