この記事では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は必ず重複しないようにしてください。