---
type: reference
language: javascript
slug: array/map
title: "Array.prototype.map()"
title_tag: "JavaScript map() の使い方 — 配列を変換する【実行できる例つき】"
summary: >
  map() は配列の各要素を関数に通し、その戻り値を集めた新しい配列を返します。
  元の配列は変わりません。要素数も変わりません。
description: >
  元の配列を変えずに変換した新しい配列を返します。map(parseInt) が NaN を生む理由、中のオブジェクトが共有される点、Array.from との使い分けまで実行して確かめます。
status: published
difficulty: 2
minutes: 6

versions:
  verified: "Node 22.22.3"
  since: "ES5"
  deprecated: null
  removed: null

sources:
  - title: "Array.prototype.map — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-array.prototype.map"
  - title: "Array.prototype.map() — MDN"
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map"

terms: [コールバック関数, 高階関数, 破壊的メソッド]

links:
  related:
    - javascript/reference/array/filter
    - javascript/learn/array/transform
    - javascript/reference/array/reduce
    - javascript/errors/is-not-a-function
    - javascript/how-to/async/parallel
    - javascript/how-to/array/flatten
    - javascript/reference/array/sort

content_updated_at: 2026-09-08
published_at: 2026-09-06
---

`map()` は、配列の[num:1]つ1つを関数に通して、**その戻り値を集めた新しい配列**を返します。
[key:元の配列は変わりません]。要素数も変わりません。

```js run
const nums = [1, 2, 3];

const doubled = nums.map(n => n * 2);

console.log(doubled);
console.log(nums);
```
```output
[ 2, 4, 6 ]
[ 1, 2, 3 ]
```

上のコードは書き換えて実行できます。`n * 2` を `n * n` にしてみてください。

## 何が返るのか

| | 中身 |
|---|---|
| 戻り値 | [key:新しい配列]。長さは元と同じ |
| 元の配列 | [em:変わらない] |
| 呼ばれる回数 | 要素の数だけ |

`map()` は[type:非破壊的メソッド]です。同じ配列を書き換える `sort()` や `reverse()` とは違います。

要素を[em:変換する]のが `map()`、要素を[em:絞る]のが
[filter()](/ja/javascript/reference/array/filter/) です。`map()` で要素を減らすことはできません。

## コールバック関数が受け取るもの

コールバック関数には、[num:3]つの引数が渡されます。

```js run
const chars = ['a', 'b', 'c'];

const result = chars.map((value, index, array) => {
  return `${index}:${value}/${array.length}`;
});

console.log(result);
```
```output
[ '0:a/3', '1:b/3', '2:c/3' ]
```

第[num:2]引数の `index` と第[num:3]引数の `array` は、要らなければ書かなくて構いません。

## よく使う形

### オブジェクトの配列から値を取り出す

**いちばん多い使い道です。**

```js run
const users = [{ id: 1, name: 'あ' }, { id: 2, name: 'い' }];

console.log(users.map((user) => user.name));
console.log(users.map(({ name }) => name));
```
```output
[ 'あ', 'い' ]
[ 'あ', 'い' ]
```

下は[key:分割代入]で、必要な鍵だけ取り出す書き方です。読みやすいほうを選んでください。

### 中身を書き換えた新しい配列を作る

```js run
const users = [{ id: 1, name: 'あ' }];

const renamed = users.map((user) => ({ ...user, name: user.name + 'さん' }));

console.log(renamed);
console.log(users);
```
```output
[ { id: 1, name: 'あさん' } ]
[ { id: 1, name: 'あ' } ]
```

`{` をそのまま書くと[bad:関数の本体]と読まれるので、`({ ... })` と丸括弧で囲みます。
元の `users` は変わりません。

### 番号を振る

```js run
const items = ['あ', 'い', 'う'];

console.log(items.map((item, i) => `${i + 1}. ${item}`));
```
```output
[ '1. あ', '2. い', '3. う' ]
```

### 絞ってから変換する

```js run
const nums = [1, 2, 3, 4, 5];

console.log(nums.filter((n) => n % 2 === 1).map((n) => n * 10));
```
```output
[ 10, 30, 50 ]
```

**`filter()` を先に書くと、変換する回数が減ります。**
結果が同じなら、[em:少ないほうを選んでください]。
→ [配列を変換する・絞り込む](/ja/javascript/learn/array/transform/)

返す値が配列になるなら、`flatMap()` で平らにしながら変換できます。
→ [入れ子の配列を平らにする](/ja/javascript/how-to/array/flatten/)

## よくある間違い

### 戻り値を書き忘れる

`{}` で囲んだら `return` が要ります。書かないと[bad:全部 undefined になります]。

```js bad
const nums = [1, 2, 3];

const doubled = nums.map(n => {
  n * 2;
});

console.log(doubled);
```
```output
[ undefined, undefined, undefined ]
```

エラーにはなりません。[bad:静かに undefined が並びます]。だから気づきにくい。

`{}` を外すか、`return` を書けば直ります。

```js
const doubled = nums.map(n => n * 2);
```

### 戻り値を使わない

戻り値を使わないなら、`map()` ではなく `forEach()` を使います。
`map()` は[fn:新しい配列を作る]ので、捨てるなら無駄になります。

```js bad
const nums = [1, 2, 3];

nums.map(n => console.log(n));
```
```output
1
2
3
```

出力そのものは出ます。ただし `map()` が返した `[ undefined, undefined, undefined ]` は捨てられています。

### `map(parseInt)` と書く

```js bad
console.log(['1', '2', '3'].map(parseInt));
```
```output
[ 1, NaN, NaN ]
```

**関数名だけ渡すと、引数が3つとも渡ります。**
`parseInt(値, 添字)` として呼ばれ、第2引数が[key:何進法か]の指定になってしまいます。

```js run
console.log(parseInt('2', 1));
console.log(parseInt('3', 2));
```
```output
NaN
NaN
```

[num:1]進法に `2` は無く、[num:2]進法に `3` は無いので `NaN` です。

`Number` は引数を[num:1]つしか見ないので、そのまま渡せます。

```js run
console.log(['1', '2', '3'].map(Number));
console.log(['1', '2', '3'].map((s) => parseInt(s)));
```
```output
[ 1, 2, 3 ]
[ 1, 2, 3 ]
```

**関数名をそのまま渡すときは、その関数が第2・第3引数をどう扱うか確かめてください。**
→ [文字列を数値に変換する](/ja/javascript/how-to/string/to-number/)

### 中のオブジェクトは同じものを指している

```js bad
const rows = [{ n: 1 }];
const copied = rows.map((row) => row);

copied[0].n = 99;

console.log(rows[0].n);
```
```output
99
```

新しい配列はできますが、**中身は同じオブジェクトです**（[type:浅いコピー]）。
書き換えたいなら、複製してから渡します。

```js run
const rows = [{ n: 1 }];
const copied = rows.map((row) => ({ ...row }));

copied[0].n = 99;

console.log(rows[0].n, copied[0].n);
```
```output
1 99
```

→ [オブジェクトを結合する](/ja/javascript/how-to/object/merge/)

## 元の配列を変えたいとき

`map()` では変えられません。結果を代入し直します。

```js run
let nums = [1, 2, 3];

nums = nums.map(n => n * 2);

console.log(nums);
```
```output
[ 2, 4, 6 ]
```

[dim:const で宣言していると代入し直せません。let を使うか、別の名前にします。]

## 空きのある配列では呼ばれない

要素が入っていない位置（[type:疎な配列]の穴）では、コールバック関数は呼ばれません。
[key:穴は穴のまま]、結果の配列に残ります。

```js run
const sparse = [1, , 3];

const result = sparse.map(n => n * 2);

console.log(result);
console.log(result.length);
```
```output
[ 2, <1 empty item>, 6 ]
3
```

[dim:表示のしかたは処理系によって違います。上は Node 22.22.3 の出力です。]

`new Array(3)` は穴が3つ並んだ配列なので、`map()` を通しても[bad:何も起きません]。

```js run
console.log(new Array(3).map((_, i) => i));
console.log(Array.from({ length: 3 }, (_, i) => i));
```
```output
[ <3 empty items> ]
[ 0, 1, 2 ]
```

**連番を作るなら `Array.from()` を使ってください。**
`Array.from()` は長さから作るので、穴を踏みません。

```js run
console.log(Array.from('abc', (c) => c.toUpperCase()));
```
```output
[ 'A', 'B', 'C' ]
```

文字列など[key:配列でないもの]を配列にしながら変換できるのも `Array.from()` です。

## まとめ

- `map()` は[key:新しい配列]を返す。**元は変わらない。長さも変わらない**
- 減らしたいなら `filter()`、[num:1]つにまとめたいなら `reduce()`
- `{}` で囲んだら `return` が要る。**忘れると `undefined` が並ぶ**
- 戻り値を使わないなら `forEach()`
- **`map(parseInt)` と書かない。** 引数が3つとも渡る
- 中のオブジェクトは[em:同じものを指している]。複製するなら `{ ...row }`
- 連番を作るなら `Array.from()`。`new Array(n).map()` は動かない