目次
概要
関数を定義する際、呼び出し側が「いくつの値を渡してくるか分からない」というケースがあります。 ES6以降で導入された「残余引数（Rest Parameters）」構文を使用すると、任意の個数の引数をひとつの配列としてまとめて受け取ることができます。 本記事では、この構文を使用して、渡された複数の数値をすべて合算する処理を実装します。
仕様（入出力）
- 入力: 任意の個数の数値（例: 10, 20, 30…）
- 出力:
- 渡された数値の合計値
- 引数が何個渡されたかのカウント（配列の長さ）
基本の使い方
関数の引数定義において、引数名の前に ...（ドット3つ）を記述します。 これにより、渡された値が自動的に「配列」に格納されて関数内で使えるようになります。
コード全文（HTML / JavaScript）
HTML (index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rest Parameters Demo</title>
<script src="rest-param.js" defer></script>
</head>
<body>
<div class="container">
<h1>Consoleを確認してください</h1>
<p>可変長引数による計算結果が出力されています。</p>
</div>
</body>
</html>
JavaScript (rest-param.js)
テストの点数を集計するシナリオに変更しています。 受け取った scores は配列として扱えるため、for...of ループで簡単に合計を算出できます。
/**
* 渡されたスコアの合計を計算する関数
* @param {...number} scores - 任意の数の点数（配列として受け取る）
* @returns {number} 合計点
*/
function calculateTotalScore(...scores) {
console.log(`受信したデータ数: ${scores.length}件`);
console.log(`中身:`, scores);
let total = 0;
// 配列 scores の中身を順番に取り出して加算
for (const score of scores) {
total += score;
}
return total;
}
// パターン1: 引数を3つ渡す場合
const groupAScore = calculateTotalScore(80, 75, 90);
console.log(`Aグループ合計: ${groupAScore}点`);
// 出力: 245点
// パターン2: 引数を5つ渡す場合
const groupBScore = calculateTotalScore(100, 60, 70, 85, 95);
console.log(`Bグループ合計: ${groupBScore}点`);
// 出力: 410点
// パターン3: 引数が0個の場合
// 配列は空 [] になり、ループは回らず 0 が返ります
const emptyScore = calculateTotalScore();
console.log(`データなし合計: ${emptyScore}点`);
// 出力: 0点
カスタムポイント
- 固定引数との組み合わせ:
function registerTeam(teamName, ...members)のように、最初の引数は固定の変数（チーム名）で受け取り、残りすべてを配列（メンバー名）で受け取る、といった使い方が実務では一般的です。 - 計算ロジックの変更: 合計だけでなく、
Math.max(...scores)で最大値を求めたり、平均値を計算したりする関数にも応用できます。
注意点
- 記述位置の制限: 残余引数（
...変数名）は、必ず引数リストの最後に記述しなければなりません。function func(...args, lastParam)のように途中に書くと構文エラーになります。 - 1つの関数に1つだけ: 残余引数は1つの関数定義につき1回しか使えません。
応用
reduceメソッドによる短縮記述
配列の集計処理（合計など）は、for...of の代わりに配列メソッドの reduce を使うと、よりモダンで簡潔に記述できます。
// アロー関数とreduceを使った書き方
const sumAll = (...nums) => nums.reduce((acc, curr) => acc + curr, 0);
console.log(sumAll(10, 20, 30)); // 60
まとめ
...引数名 という構文を使うことで、引数の数が事前に決まっていない柔軟な関数を作ることができます。関数内部では通常の「配列」として扱えるため、ループ処理や配列メソッドがそのまま使える点が大きなメリットです。
