JSのMapオブジェクトを使用してみる

今回のゴール

Mapオブジェクトを用いてユーザーの情報を表示制御する。

実際のコード

import React from 'react';

// ユーザーの型定義
type User = {
  id: string;
  name: string;
};

// ユーザーデータ
const users: Map<string, User> = new Map([
  ['1', { id: '1', name: 'User One' }],
  ['2', { id: '2', name: 'User Two' }],
]);

const UserList = () => (
  <div className="p-4">
    {Array.from(users.values()).map((user) => (
      <div key={user.id} className="bg-blue-500 text-white p-2 m-2 rounded">
        {user.name}
      </div>
    ))}
  </div>
);

export default UserList;

上記のArray.from(users.values())の部分でMapオブジェクトのイテレータを取得して配列にしています。あとはmapメソッドで展開するだけです。

このオブジェクトの性質としてキーの型にstring以外にも指定できます。自身で設定した値をMapオブジェクトをJSON化したい場合、一度オブジェクトにする必要があります。

参考記事