JavaScript ・ 配列・オブジェクト
map()
配列の各要素を変換した新しい配列を作る
配列の要素1つずつに関数を実行し、その戻り値を集めた新しい配列を作ります。元の配列は変わりません。
01
サンプルコード
JS
1const prices = [480, 550, 620];
2
3const withTax = prices.map((p) => Math.round(p * 1.1));
4const labels = prices.map((p) => `${p}円`);
5
6console.log(withTax);
7console.log(labels);
8console.log(prices);
02
実行結果
コンソール
- console.log() の出力がここに表示されます
03
解説
map() は「すべての要素を同じルールで変換する」ためのメソッドです。関数が返した値を順に並べた、新しい配列が返ります。
要素の数は元の配列と同じになります。元の配列は変更されないため、元のデータを残したまま加工できます。
オブジェクトの配列から特定の値だけを取り出す（例：商品名の一覧を作る）といった使い方もよくします。
04
応用例・注意点
配列を加工するメソッド
| メソッド | 説明 |
|---|---|
map() | 各要素を変換した配列を作る |
filter() | 条件に合う要素だけの配列を作る |
find() | 条件に合う最初の要素を取り出す |
reduce() | 要素をまとめて1つの値にする（合計など） |
sort() | 並べ替える（元の配列も変わる） |
オブジェクトの配列から名前だけ取り出す
必要なプロパティだけを集めた配列を作れます。
JS
1const menu = [
2 { name: 'ブレンド', price: 480 },
3 { name: 'カフェラテ', price: 550 },
4];
5const names = menu.map((m) => m.name);
6console.log(names);
注意点
- 01関数で return を忘れると、要素がすべて undefined の配列になります。
- 02画面への表示など、新しい配列が不要な処理には forEach() を使います。