配列の各要素に関数を適用し、新しい配列を返す
// ── 基本: 数値配列の変換 ──────────────────────────────
const nums = [1, 2, 3, 4, 5];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// ※ 元の nums は変わらない(非破壊)
// ── index も使える ─────────────────────────────────
const withIndex = ['a', 'b', 'c'].map((item, index) => {
return `${index}: ${item}`; // 0: a, 1: b, 2: c
});
// ── React でのリスト表示(最も多い使い方)─────────
const users = [
{ id: 1, name: '田中' },
{ id: 2, name: '鈴木' },
];
function UserList() {
return (
<ul>
{users.map(user => (
// key は必須!ループ内で一意な値を指定する
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
// ── オブジェクトの特定プロパティだけ取り出す ───────
const prices = [100, 200, 300];
const withTax = prices.map(price => ({
original: price,
withTax: Math.round(price * 1.1), // 消費税10%
}));
// [{ original: 100, withTax: 110 }, ...]map()は配列の各要素を変換して新しい配列を作る最も基本的なメソッドです。元の配列は変更されません(非破壊)。TypeScriptでは戻り値の型がコールバックの戻り値から自動推論されます。forループの代わりにmap()を使うことで宣言的で読みやすいコードになります。非同期処理との組み合わせではPromise.all(array.map(async ...))のパターンが頻出です。
array.map(callbackFn(element, index?, array?) => newElement)
callbackFnFunction各要素に適用するコールバック関数elementT現在処理中の要素indexnumber(省略可)現在の要素のインデックスarrayT[](省略可)mapが呼ばれた元の配列コールバックの戻り値で構成された新しい配列。元の配列と同じ長さを持つ。
元の配列は変更しない非破壊メソッド。TypeScriptでは戻り値の型が自動推論される。