The JavaScript map() method creates a new array by applying a callback to each element, making it a go-to tool for non-mutating transformations.
map() は、配列の各要素を「変換して並べ直す」のに使うメソッドで、元の配列を保ったまま新しい配列を作れます。
map() が「元配列を変えずに新しい配列を作る」変換だと説明できるvalue / index / array）と戻り値の関係を言語化できるmap() が呼ばれない点を判断できるforEach() / filter() / flatMap() と使い分けられるPromise.all）を理解できるmap() って何？map() は「配列 → 配列」の変換器です。各要素に関数（コールバック）を適用して、その結果を並べた新しい配列を返します。
map() 自体は破壊的ではない）配列（数値の並び）を入力して、map() で「変換」してみます。
[1, 2, 3, 4][2, 4, 6, 8]※ 変換は「元の配列を作って → map() で新しい配列」を行っています。
JavaScript
const nums = [1, 2, 3, 4];
const doubled = nums.map((value) => {
return value * 2;
});
console.log(nums); // [1, 2, 3, 4]（元はそのまま）
console.log(doubled); // [2, 4, 6, 8]map() は、配列の各要素にコールバック関数を適用し、その戻り値を並べて新しい配列を作るためのメソッドです。
Array のインスタンスで使えます（例：[].map）。配列に似たもの（NodeList など）は、そのままでは map() が使えないので Array.from() 等で配列化します。
value / index / array）を使って変換ルールを組み立てるfilter() の仕事）reduce() の仕事）forEach() が意図に合います）JavaScript
const out = array.map((value, index, arrayRef) => {
return value;
});コールバックの引数は (value, index, array) の順です。必要なものだけ書けばOKです（例：(value) => ...）。
nums.map((n) => n * 2)users.map((u) => u.name)items.map((v, i) => `${i}: ${v}`)Array.from(nodeList).map((el) => el.textContent)map() の戻り値は必ず配列です。戻り値を使わないなら map() を選ぶ理由が薄いです。return を忘れて undefined の配列になる」ことです。JavaScript（悪い例）
const out = [1, 2, 3].map((n) => {
n * 2; // return していない
});
console.log(out); // [undefined, undefined, undefined]const a = [1, , 3] のような空要素は、コールバックが実行されません（「undefined が渡される」のとは別）。JavaScript
const a = [1, , 3];
const out = a.map((v, i) => {
console.log(i, v);
return v ?? 0;
});
// 0 1
// 2 3
console.log(out); // [1, <1 empty item>, 3]thisArg は「this を渡す」第2引数function を使うときに this を渡せます。JavaScript
const ctx = { add: 10 };
const out = [1, 2].map(function (n) {
return n + this.add;
}, ctx);
console.log(out); // [11, 12]async 関数を渡すと、戻り値は値ではなく Promise になります。必要なら Promise.all でまとめて待ちます。JavaScript
const ids = [1, 2, 3];
const promises = ids.map(async (id) => {
const res = await fetch(`/api/user/${id}`);
return res.json();
});
const users = await Promise.all(promises);map() は「処理を回す」メソッドmap() は「新しい配列を作る」ための変換です。戻り値を使わないなら意図が伝わりにくいです。map() は元配列を絶対に変えないmap() 自体は変えませんが、コールバックが元配列や要素（オブジェクト）を変更すれば結果として変わります。undefined と同じmap() はコールバックを呼びません。undefined は「要素は存在して値が undefined」です。map() と forEach() は同じforEach() は戻り値を作りません（常に undefined を返す）。「新しい配列が欲しい」なら map() です。JavaScript
const rows = users.map((u) => {
return {
id: u.id,
label: `${u.name}（${u.role}）`
};
});querySelectorAll は NodeList なので、配列へ変換してから map() します。JavaScript
const texts = Array.from(document.querySelectorAll(".item")).map((el) => {
return el.textContent?.trim() ?? "";
});JavaScript
const labels = items.map((v, i) => `#${i + 1} ${v}`);undefined多くは「return を忘れた」「ブロックボディのアロー関数で戻り値を書いていない」です。式だけなら (n) => n * 2 の形にすると事故が減ります。
オブジェクト要素を破壊的に変更していないか確認します。安全に変換したいなら新しいオブジェクトを作ります（{ ...obj }）。
async コールバックは Promise を返すので、結果は Promise の配列です。必要なら await Promise.all(...) で「値の配列」にします。
map() は配列変換なので直接A11yを変えるわけではありませんが、「DOMを作るための配列」を作る場面で出番が多いです。
10px、（補足））map() は新しい配列を返す（forEach() は返さない）(value, index, array) の順map() 自体は破壊的ではないが、コールバック内の副作用で元が変わり得るasync を渡すと「Promise配列」になる（必要なら Promise.all）map() と forEach() の違いは？map() は戻り値として新しい配列を作ります。forEach() は配列を作らず、副作用（DOM更新など）目的に向きます。undefined はどう違う？map() のコールバックが呼ばれません。undefined は「要素は存在し、値が undefined」です。map(async () => ...) の結果が期待と違いますPromise になるので、結果は Promise 配列です。await Promise.all(...) でまとめて待つと値の配列になります。map() で要素数が変わることはある？filter() や flatMap() を検討します。map() は「配列を変換して新しい配列を作る」forEach()、絞り込みなら filter()