---
type: learn
language: javascript
slug: array/transform
title: "配列を変換する・絞り込む — map と filter"
title_tag: "JavaScript の map と filter — ループを1行にする【第3回】"
summary: >
  ループで書いていた「新しい配列を作る」処理を map と filter に置き換えます。
  繋げて書く方法、元の配列が変わらないこと、途中で空になっても落ちない理由まで確かめます。
description: >
  ループで書いていた処理を map と filter に置き換えます。繋げて書く順序、元の配列が変わらないこと、途中で空になっても落ちない理由まで動かして確かめます。
status: published
difficulty: 2
minutes: 9

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.filter — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-array.prototype.filter"

terms: [コールバック関数, メソッドチェーン, 非破壊的メソッド]

links:
  prev: javascript/learn/array/loop
  next: null
  related:
    - javascript/reference/array/map
    - javascript/reference/array/filter
    - javascript/how-to/array/flatten

content_updated_at: 2026-09-07
published_at: 2026-09-07
---

[前回](/ja/javascript/learn/array/loop/)は `for...of` で1つずつ処理しました。
今回は、その中でも特に多い「[key:全部に同じ加工をして、新しい配列を作る]」を短く書きます。

## ループで書くとこうなる

値段の配列から、税込み価格の配列を作ります。

```js run
const prices = [100, 200, 300];
const withTax = [];

for (const price of prices) {
  withTax.push(Math.round(price * 1.1));
}

console.log(withTax);
```
```output
[ 110, 220, 330 ]
```

やっていることは3つです。**空の配列を用意し、回して、`push()` する。**
この形はとても多く出てくるので、専用の書き方があります。

## map なら1行

```js run
const prices = [100, 200, 300];

const withTax = prices.map(price => Math.round(price * 1.1));

console.log(withTax);
```
```output
[ 110, 220, 330 ]
```

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

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

**要素の数は変わりません。** [num:3]件入れたら[num:3]件返ります。

## filter で絞る

数を[em:減らしたい]ときは `filter()` です。

```js run
const prices = [100, 250, 80, 400];

const expensive = prices.filter(price => price >= 200);

console.log(expensive);
console.log(prices);
```
```output
[ 250, 400 ]
[ 100, 250, 80, 400 ]
```

`filter()` に渡す関数は、[key:残すかどうか]を返します。
`true` になった要素だけが集まります。

| | 何をするか | 要素の数 |
|---|---|---|
| `map()` | [em:変換する] | 変わらない |
| `filter()` | [em:絞る] | 減ることがある |

**変換と絞り込みは別の仕事です。** `map()` で要素を減らすことはできません。

## 繋げて書く

`map()` も `filter()` も[key:配列を返す]ので、そのまま次に繋げられます。
これを[type:メソッドチェーン]と呼びます。

```js run
const prices = [100, 250, 80, 400];

const result = prices
  .filter(price => price >= 200)
  .map(price => Math.round(price * 1.1));

console.log(result);
```
```output
[ 275, 440 ]
```

**絞ってから変換する**ほうが、変換の回数が減ります。
上の例では[num:4]件のうち[num:2]件しか計算していません。

読むときは[key:上から順に]追ってください。「200円以上を残して、税込みにする」と読めます。

## 元の配列は変わらない

`map()` も `filter()` も[type:非破壊的メソッド]です。
前回出てきた `push()` や `pop()` とは違います。

```js run
const prices = [100, 250, 80];

prices.map(p => p * 2);
prices.filter(p => p >= 200);

console.log(prices);
```
```output
[ 100, 250, 80 ]
```

呼んだだけでは[bad:何も起きません]。**戻り値を受け取る必要があります。**

```js run
const prices = [100, 250, 80];

const doubled = prices.map(p => p * 2);

console.log(doubled);
```
```output
[ 200, 500, 160 ]
```

## 途中で空になっても落ちない

`filter()` が1件も残さなかったとき、返るのは[key:空の配列]です。
`null` ではないので、そのまま次に繋げても止まりません。

```js run
const prices = [100, 80];

const result = prices
  .filter(price => price >= 200)
  .map(price => Math.round(price * 1.1));

console.log(result);
console.log(result.length);
```
```output
[]
0
```

第1回で見た「範囲の外を読むと `undefined`」とは違い、**ここは安全です。**
繋げた先で落ちる心配をしなくて構いません。

## よくある間違い

`{}` で囲んだのに `return` を書き忘れると、[bad:全部 undefined になります]。

```js bad
const prices = [100, 200];

const withTax = prices.map(price => {
  Math.round(price * 1.1);
});

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

エラーになりません。[bad:静かに undefined が並びます]。
`{}` を外すか、`return` を書けば直ります。

## まとめ

- `map()` … 1つ1つを変換して[key:新しい配列]を作る。**数は変わらない**
- `filter()` … 残すものを選ぶ。**数は減ることがある**
- どちらも[em:元の配列を変えない]。戻り値を受け取る
- 繋げられる。**絞ってから変換する**と無駄が少ない
- 途中で空になっても[em:空配列]が返るので落ちない

## この連載はここまで

配列を作り、取り出し、繰り返し、変換するところまで来ました。
ここから先は、必要になったときに引ける形でまとめてあります。

- [Array.prototype.map()](/ja/javascript/reference/array/map/)
  … 穴のある配列での挙動、コールバック関数が受け取る3つの引数
- [Array.prototype.filter()](/ja/javascript/reference/array/filter/)
  … `find()` との違い、`filter(Boolean)` の書き方
- [Array.prototype.reduce()](/ja/javascript/reference/array/reduce/)
  … 配列を[em:1つの値]にまとめる。合計・グループ化
- [配列を数値の大きさで並び替える](/ja/javascript/how-to/array/sort-numbers/)
  … `sort()` が数値を正しく並べない理由
- [配列から重複を取り除く](/ja/javascript/how-to/array/remove-duplicates/)
  … オブジェクトの配列で重複が消えない理由