配列とmap——「リストを変換する」

準備運動の2つ目は、配列の「map」です。先に言ってしまうと、これは最初で一番大事な道具です。Reactで「ユーザーの一覧」「商品のリスト」「ToDoの項目」——何かを並べて表示するとき、その裏では必ずmapが動いています。ここで手に馴染ませておけば、Reactに入ってから「表示の仕組み」に集中できます。

配列のおさらい

配列は、値を順番に並べたもの——

const names = ["太郎", "花子", "次郎"];

ここまでは他のコースでも見た形です。今日やるのは、この配列を別の配列に変換することです。

mapは「全員に同じ加工をする工場」

たとえば、names の全員を「◯◯さん」という敬称つきに変えたいとします。mapを使うとこう書けます。

const withSan = names.map((name) => name + "さん");
// → ["太郎さん", "花子さん", "次郎さん"]