tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【react】ループ用のモックの作成方法

最近新規開発でBEのデータの代わりにモックデータを書くことが多いのですが、
リードエンジニアのイケメンコードを発見したのでメモ。

//domain層

export interface Human {
  id: string;
  name: string;
  height: number;
  age: string;
}

export const useHumanList = () => {
  const humanList: Array<Human> = new Array(5)
    .fill(undefined)
    .map((_, idx) => ({
      id: `00${idx}`,
      name: `人間${idx}`,
      height: 160 + idx,
      age: `${idx}歳です`
    }));
  return humanList;
};
//ui層
const Humans = () => {
  const humanList = useHumanList();
  return (
    <div>
      {humanList.map((h) => (
        <HumanBody key={h.id} human={h} />
      ))}
    </div>
  );
};

解説

Arrayオブジェクト

Array(2)
// = [ , ]

Array("you","me")
// = ["you","me"]

fill 指定したインデックス以降から(指定したインデックスまで)全て変更加える

let 5a = ['a','a','a','a','a']

console.log( 5a.fill('b',2) )

// = ['a','a','b','b','b']   

map

list.map((a)=>a+1)  

map()メソッドは、与えられた関数を配列の全ての要素に対して呼び出し、その結果からなる新しい配列を生成する。
同じように、オブジェクトを結果とすることも可能。

list.map((a)=>({"name": a}))  

従って、以下のコードがやっていることは

export const useHumanList = () => {
  const humanList: Array<Human> = new Array(5)
    .fill(undefined)
    .map((_, idx) => ({
      id: `00${idx}`,
      name: `人間${idx}`,
      height: 160 + idx,
      age: `${idx}歳です`
    }));
  return humanList;
};

「配列のコンストラクタを作成して、
その数だけオブジェクトをmapで追加している」

といった感じですかね!

こうやって文字起こしして初めて理解できるタイプです笑