JavaScript | arguments を Array に変換して …rest と同じように扱う方法

JavaScript

2020.08.252025.10.30

ここでは「arguments を Array に変換して、...rest と同じように扱う方法」を
初心者向けに、図＋実験つきでわかりやすく解説します。

なぜ変換が必要なの？
1. ❌ 使えない例
✅ 変換方法（3パターン）
内部イメージ
💻 実際に試せる HTML サンプル
まとめ

なぜ変換が必要なの？

arguments は「配列のように見えるけど、配列ではない」特別なオブジェクト。

function sample() {
  console.log(arguments);          // [10, 20, 30]
  console.log(Array.isArray(arguments)); // ❌ false
}
sample(10, 20, 30);

function sample() {
  console.log(arguments);          // [10, 20, 30]
  console.log(Array.isArray(arguments)); // ❌ false
}
sample(10, 20, 30);

JavaScript

❌ 使えない例

function sample() {
  // 配列メソッドを使おうとするとエラー！
  arguments.forEach(x => console.log(x)); // ❌ TypeError
}

function sample() {
  // 配列メソッドを使おうとするとエラー！
  arguments.forEach(x => console.log(x)); // ❌ TypeError
}

JavaScript

✅ 変換方法（3パターン）

① Array.from(arguments) — 一番わかりやすい！

function sample() {
  const args = Array.from(arguments);
  console.log(args);          // [10, 20, 30]
  console.log(Array.isArray(args)); // ✅ true
}
sample(10, 20, 30);

function sample() {
  const args = Array.from(arguments);
  console.log(args);          // [10, 20, 30]
  console.log(Array.isArray(args)); // ✅ true
}
sample(10, 20, 30);

JavaScript

🔹 Array.from() は「配列風のオブジェクト」を配列にしてくれる便利関数。
🔹 NodeList や HTMLCollection にも使える。

② [...arguments]（スプレッド構文で展開）

function sample() {
  const args = [...arguments];
  console.log(args); // [10, 20, 30]
}
sample(10, 20, 30);

function sample() {
  const args = [...arguments];
  console.log(args); // [10, 20, 30]
}
sample(10, 20, 30);

JavaScript

🔹 一番モダンな書き方。
🔹 見た目も ...rest とそっくり。

③ Array.prototype.slice.call(arguments)（昔の書き方）

function sample() {
  const args = Array.prototype.slice.call(arguments);
  console.log(args); // [10, 20, 30]
}
sample(10, 20, 30);

function sample() {
  const args = Array.prototype.slice.call(arguments);
  console.log(args); // [10, 20, 30]
}
sample(10, 20, 30);

JavaScript

🔹 ES5 以前の古い方法（レガシー環境用）。
🔹 現在は Array.from() または [...arguments] 推奨。

内部イメージ

arguments（配列風） → [Array.from] → 本物の配列

型	メソッド使用可？	表記例
`arguments`	❌	`arguments[0]`
`[...arguments]` / `Array.from(arguments)`	✅	`args.map(...)`

💻 実際に試せる HTML サンプル

以下をブラウザで実行すると、3パターンの違いを確認できます👇

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>arguments を配列に変換</title>
</head>
<body>
<h2>arguments を配列に変換する方法</h2>
<button onclick="runFrom()">Array.from()</button>
<button onclick="runSpread()">スプレッド構文([...])</button>
<button onclick="runSlice()">slice.call()</button>

<pre id="output"></pre>

<script>
function log(msg) {
  document.getElementById("output").textContent += msg + "\n";
}
function clear() {
  document.getElementById("output").textContent = "";
}

function runFrom() {
  clear();
  log("【Array.from() 版】");
  function test() {
    const args = Array.from(arguments);
    log("args = [" + args.join(", ") + "]");
    log("Array.isArray(args) = " + Array.isArray(args));
    log("map結果: " + args.map(x => x * 2));
  }
  test(1, 2, 3);
}

function runSpread() {
  clear();
  log("【スプレッド構文版】");
  function test() {
    const args = [...arguments];
    log("args = [" + args.join(", ") + "]");
    log("Array.isArray(args) = " + Array.isArray(args));
    log("map結果: " + args.map(x => x * 2));
  }
  test(4, 5, 6);
}

function runSlice() {
  clear();
  log("【slice.call() 版】");
  function test() {
    const args = Array.prototype.slice.call(arguments);
    log("args = [" + args.join(", ") + "]");
    log("Array.isArray(args) = " + Array.isArray(args));
    log("map結果: " + args.map(x => x * 2));
  }
  test(7, 8, 9);
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>arguments を配列に変換</title>
</head>
<body>
<h2>arguments を配列に変換する方法</h2>
<button onclick="runFrom()">Array.from()</button>
<button onclick="runSpread()">スプレッド構文([...])</button>
<button onclick="runSlice()">slice.call()</button>

<pre id="output"></pre>

<script>
function log(msg) {
  document.getElementById("output").textContent += msg + "\n";
}
function clear() {
  document.getElementById("output").textContent = "";
}

function runFrom() {
  clear();
  log("【Array.from() 版】");
  function test() {
    const args = Array.from(arguments);
    log("args = [" + args.join(", ") + "]");
    log("Array.isArray(args) = " + Array.isArray(args));
    log("map結果: " + args.map(x => x * 2));
  }
  test(1, 2, 3);
}

function runSpread() {
  clear();
  log("【スプレッド構文版】");
  function test() {
    const args = [...arguments];
    log("args = [" + args.join(", ") + "]");
    log("Array.isArray(args) = " + Array.isArray(args));
    log("map結果: " + args.map(x => x * 2));
  }
  test(4, 5, 6);
}

function runSlice() {
  clear();
  log("【slice.call() 版】");
  function test() {
    const args = Array.prototype.slice.call(arguments);
    log("args = [" + args.join(", ") + "]");
    log("Array.isArray(args) = " + Array.isArray(args));
    log("map結果: " + args.map(x => x * 2));
  }
  test(7, 8, 9);
}
</script>
</body>
</html>

HTML

🧪 それぞれのボタンを押すと：

arguments が配列に変換される
.map() や .forEach() が使えるようになる

まとめ

方法	モダン度	特徴
`Array.from(arguments)`	✅ 高い	わかりやすく安全
`[...arguments]`	✅ 高い	スプレッド構文でシンプル
`Array.prototype.slice.call(arguments)`	⚠️ 古い	互換性重視