インターラプト開発者ブログ

インターラプトのエンジニアによる技術系ブログ

React超入門 mapでリストアイテムを繰り返す

この記事ではTypeScriptを使います。

Reactでよく使う実装にArray.mapでのループがあります。 ループというのは繰り返しのことで一つのReactエレメントを繰り返してリスト表示させることができる機能です。

リストって何?

リストとは配列のことで、順番に要素が格納された長い箱のようなものです。

[1,2,3,4,5]

これは、1〜5までの数字が順番に格納された箱です。これがリスト(配列)です。

配列は、数字の他に文字列を入れることも出来ます。

['朝食','りんご','ヨーグルト']

文字列の他にオブジェクトも入ります。

[{key: 'value', 'キー': '値'}, {key: 'value', 'キー': '値'}]

オブジェクトは、キーと値がセットになったデータで、

data.key
data['キー']

とすると、値が取得できます。

Reactでは、この配列とオブジェクトを組み合わせてReactエレメントを繰り返して表示させることが多いです。

繰り返す元となる型を作ろう

型とは、データがどういうキーを持っているのか決めたものです。例えば人の名前と年齢を管理するデータであれば、

type Human = {
  name: string; // 名前
  age: number; //  年齢
}

となります。stringというのは文字列であるということを表します。numberは数値です。

Humanデータを作成する

リストアイテムを繰り返すために、このHumanを配列データにしてみます。

const humans: Human[] = [];

複数ある事がわかるように、humansのようにsをつけます。 その後ろにある Human[] が、Humanの配列型です。

今は空が代入されていますが、この配列の中にはHumanしか入れられないように型で縛っているわけです。

const humans: Human[] = [
  { name: '斎藤', age: 20},
  { name: '中島', age: 21},
  { name: '田中', age: 50},
];

先ほど定義した型定義に従って、データを作っていきます。 ちょっと、リストっぽくなってきたと思います。

Humanを繰り返す

ではいよいよ、このデータをReactエレメントで出力していきます。

const humans: Human[] = [
  { name: '斎藤', age: 20},
  { name: '中島', age: 21},
  { name: '田中', age: 50},
];

const HumanTag: React.FC = () => {
  return <>
    { humans.map( human => {
      <div key={human.name}>
         {human.name}さんは{human.age}歳です。
      </div>
    })}
  </>;
}

あとは.mapが配列の要素を一つずつ取り出してくれるので、そこにタグを入れるのみです。この時に必ずkeyを入れ忘れないようにしてください。

keyは必ず重複しないようにしてください。