---
type: reference
language: javascript
slug: array/from
title: "配列を作る — Array.from() / Array.of() / new Array()"
title_tag: "JavaScript の Array.from() — 配列の作り方と new Array の罠"
summary: >
  new Array(3) が作るのは「穴が3つ」で、map() が動きません。Array.from() との違い、
  fill() で同じオブジェクトが共有される罠、連番の作り方まで実行して確かめます。
description: >
  new Array(3) は要素が無い「穴」を作るので map() が素通りします。Array.from() との違い、
  fill([]) が全部同じ配列を指す落とし穴まで、実行しながら確かめられます。
status: published
difficulty: 2
minutes: 8

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

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

terms: [穴, 反復可能, 参照の共有]

links:
  related:
    - javascript/reference/iterator/iterable
    - javascript/reference/operator/spread
    - javascript/errors/invalid-array-length

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

## `Array.from()` — 何からでも配列にする

```js run
console.log(Array.from('あい'));
console.log(Array.from(new Set([1, 1, 2])));
console.log(Array.from([1, 2], (n) => n * 10));
```
```output
[ 'あ', 'い' ]
[ 1, 2 ]
[ 10, 20 ]
```

**第2引数に関数を渡すと、その場で加工できます。**
`Array.from(x).map(f)` と同じですが、中間の配列を作りません。

対象は[type:反復可能]なもの、または `length` を持つものです。
→ [反復可能とイテレータ](/ja/javascript/reference/iterator/iterable/)

```js run
console.log(Array.from({ length: 3 }));
console.log(Array.from({ length: 3 }, (unused, i) => i * 2));
console.log(Array.from({ a: 1 }));
```
```output
[ undefined, undefined, undefined ]
[ 0, 2, 4 ]
[]
```

`length` が無いものは[bad:黙って空配列]になります。エラーにはなりません。

## `new Array(3)` は「穴」を作る

**ここが最大の落とし穴です。**

```js bad
const holed = new Array(3);

console.log(holed);
console.log(holed.length);
console.log(holed.map((value, i) => i));
```
```output
[ <3 empty items> ]
3
[ <3 empty items> ]
```

`length` は3なのに、**`map()` が1度も呼ばれません。**

`undefined` が3つ入っているのではなく、[key:要素が存在しない]状態です。
`map()` / `forEach()` / `filter()` は、この穴を飛ばします。

`Array.from()` なら、ちゃんと `undefined` が入ります。

```js run
console.log(Array.from({ length: 3 }));
console.log(Array.from({ length: 3 }).map((value, i) => i));
```
```output
[ undefined, undefined, undefined ]
[ 0, 1, 2 ]
```

`fill()` で埋めても直ります。

```js run
console.log(new Array(3).fill(0).map((value, i) => i));
```
```output
[ 0, 1, 2 ]
```

## 引数が1つか2つかで意味が変わる

```js bad
console.log(new Array(3));
console.log(new Array(1, 2, 3));
```
```output
[ <3 empty items> ]
[ 1, 2, 3 ]
```

**数値を1つ渡したときだけ「長さ」の意味になります。**
これを避けるために `Array.of()` があります。

```js run
console.log(Array.of(3));
console.log(Array.of(1, 2, 3));
```
```output
[ 3 ]
[ 1, 2, 3 ]
```

`Array.of()` は[key:必ず要素として扱います]。

長さに使えない値を渡すと落ちます。

```js run
try {
  new Array(-1);
} catch (error) {
  console.log(error.name + ': ' + error.message);
}
```
```output
RangeError: Invalid array length
```

→ [RangeError: Invalid array length](/ja/javascript/errors/invalid-array-length/)

## `fill()` で同じものを共有してしまう

```js bad
const grid = new Array(2).fill([]);

grid[0].push('x');

console.log(JSON.stringify(grid));
```
```output
[["x"],["x"]]
```

**片方に足したのに、両方に入りました。**
`fill()` は**同じ1つのものを全部に置く**からです。

毎回作りたいなら `Array.from()` の第2引数です。

```js run
const grid = Array.from({ length: 2 }, () => []);

grid[0].push('x');

console.log(JSON.stringify(grid));
```
```output
[["x"],[]]
```

[bad:オブジェクトや配列を `fill()` に渡さないでください。] 数値や文字列なら問題ありません。

## 連番を作る

```js run
console.log(Array.from({ length: 5 }, (unused, i) => i));
console.log(Array.from({ length: 5 }, (unused, i) => i + 1));
console.log(Array.from({ length: 3 }, (unused, i) => i * 10));
```
```output
[ 0, 1, 2, 3, 4 ]
[ 1, 2, 3, 4, 5 ]
[ 0, 10, 20 ]
```

**これがいちばん短い書き方です。**
`for` で `push()` しても同じですが、行数が増えます。

## スプレッドとの使い分け

```js run
console.log([...'あい']);
console.log([...new Set([1, 1, 2])]);
```
```output
[ 'あ', 'い' ]
[ 1, 2 ]
```

反復可能なものなら、`[...x]` のほうが短く書けます。

| 使うもの | 何ができるか |
|---|---|
| `[...x]` | **反復可能なものだけ**。いちばん短い |
| `Array.from(x)` | `length` だけのものも扱える。**加工の関数を渡せる** |
| `Array.of(a, b)` | 渡した値をそのまま要素にする |
| `new Array(n)` | 長さだけ決める。**中身は穴** |

`{ length: 3 }` のような形は反復可能ではないので、
[bad:スプレッドでは開けません。]

```js bad
try {
  console.log([...{ length: 3 }]);
} catch (error) {
  console.log(error.name + ': ' + error.message);
}
```
```output
TypeError: {(intermediate value)} is not iterable
```

→ [スプレッド構文と残余](/ja/javascript/reference/operator/spread/)

## まとめ

- `Array.from()` は**反復可能なものと `length` を持つもの**から作る。第2引数で加工できる
- **`new Array(3)` が作るのは穴。** `map()` も `forEach()` も飛ばす
- 数値1つを渡したときだけ「長さ」になる。避けたいなら `Array.of()`
- **`fill()` にオブジェクトや配列を渡すと、全部が同じものを指す**
- 連番は `Array.from({ length: n }, (unused, i) => i)`
- 反復可能なだけなら `[...x]` が短い