mapの復習｜コードで実践 - ゆめさくコード

配列を、同じ件数の別の配列に変える

map は、配列の要素を 1 つずつ受け取って、それぞれを何かに変換し、変換後の値を集めた新しい配列を返すメソッドです。

const titles = ["レシピ検索アプリ", "買い物メモツール", "写真ギャラリー"];
const lengths = titles.map((title) => title.length);

lengths; // [8, 8, 7]
titles;  // もとの配列はそのまま

覚えることは 2 つだけです。件数は必ず同じになることと、もとの配列は変わらないことです。件数を減らしたいときは map ではなく filter を使います。

渡している (title) => title.length が、前のレッスンで復習したアロー関数です。map は「変換のしかたを書いた関数」を引数として受け取ります。

オブジェクトの配列を扱う

実際のデータはオブジェクトの配列であることがほとんどです。分割代入と組み合わせると読みやすくなります。

const works = [
  { id: 1, title: "レシピ検索アプリ", year: 2025 },
  { id: 2, title: "買い物メモツール", year: 2025 },
];

const labels = works.map(({ title, year }) => title + "（" + year + "）");

labels; // ["レシピ検索アプリ（2025）", "買い物メモツール（2025）"]

引数のところにそのまま波かっこを書けば、受け取った 1 件から必要なプロパティだけを取り出せます。

なぜ React でこれが要るのか

第6章のリスト描画が、この map そのものだからです。React には「配列をくり返し表示する専用の書き方」がありません。JSX の中で map を呼び、要素の配列を作って埋め込みます。

<ul>
  {works.map((work) => (
    <li key={work.id}>{work.title}</li>
  ))}
</ul>

やっていることは、さきほどの labels を作ったのと同じです。違うのは、変換後の値が文字列ではなく JSX の要素だという点だけです。作品が 3 件なら li が 3 個並びます。

key={work.id} にも触れておきます。React は、並んでいる要素のどれがどれなのかを key で見分けます。だから map に渡すデータには、id のように 1 件ずつ違う値が必要です。第6章で詳しく扱いますが、map するデータには id を持たせておく、と今のうちに意識しておいてください。

つまずきどころ

波かっこを書いて return を忘れると、中身が全部 undefined の配列ができます。

const labels = works.map((work) => {
  work.title + "（" + work.year + "）";
});

labels; // [undefined, undefined]

件数は合っているのに中身が空、という症状が出たらここを疑います。

演習

作品の配列を、画面にそのまま出せるラベルの配列に変換します。

mapの復習

配列を、同じ件数の別の配列に変える

オブジェクトの配列を扱う

なぜ React でこれが要るのか

つまずきどころ

演習

要件

入出力例

ヒント

メモ