【JavaScript入門】残余引数

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

残余引数

　JavaScript の関数では、あらかじめ決まった数の引数を受け取るだけでなく、「引数がいくつ渡されるか分からない」という場面も少なくありません。たとえば、「最初の引数だけは特別扱いして、それ以降の引数はまとめて処理したい」といったケースで便利なのが「残余引数（rest parameters）」と呼ばれる仕組みです。残余引数を使うと、余った引数をまとめて配列として受け取れるようになります。

１．残余引数の基本文法

1.1. 使い方

　関数のパラメータリストに「...変数名」という記述を加えると、その引数より後ろに渡された値をすべて配列として取得できます。

function 関数名(...残余引数) {
  // 残余引数は配列として扱われる
}

　残余引数は必ずパラメータの末尾に配置しなければなりません。通常の引数と組み合わせる場合も、先に通常の引数を定義し、最後に ...残余引数 を書きます。

1.2. サンプル

function example(first, second, ...others) {
  console.log('first:', first);
  console.log('second:', second);
  console.log('others:', others);
}

example('リンゴ', 'バナナ', 'メロン', 'スイカ', 'ぶどう');

上記の場合、

first は 'リンゴ'
second は 'バナナ'
others は ['メロン', 'スイカ', 'ぶどう']
という形で受け取れます。

２．サンプルHTML（実行例）

　以下のコードを「myRestParameters.html」というファイル名で保存し、ブラウザで開いた上で開発者ツールのコンソールを確認してみてください。

【myRestParameters.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myRestParameters.html</title>
</head>
<body>
  <h1>残余引数のサンプル</h1>
  <p>ブラウザの開発者ツール（コンソール）を開き、結果を確認してください。</p>

  <script>
    // 残余引数を使って注文をセットする関数
    function setOrder(firstOrder, ...restOrder) {
      console.log('最初の注文:', firstOrder);
      console.log('残りの注文:', restOrder);
    }

    // 関数を呼び出す（引数の数は自由）
    setOrder('ホットコーヒー', 'アイスラテ', '緑茶', 'オレンジジュース');

    // 別パターンの引数数
    setOrder('カプチーノ');
    setOrder('抹茶ラテ', 'ほうじ茶');
  </script>
</body>
</html>

実行結果

デバックコンソールの出力

最初の注文: ホットコーヒー
残りの注文: ["アイスラテ", "緑茶", "オレンジジュース"]
最初の注文: カプチーノ
残りの注文: []
最初の注文: 抹茶ラテ
残りの注文: ["ほうじ茶"]

最初の引数 firstOrder は文字列として受け取り、...restOrder が配列として残りの引数をまとめて取得します。
2回目の呼び出しでは引数が1つしかないため、残りの注文が空配列 [] になります。

まとめ

残余引数（rest parameters） は、関数が受け取る引数が可変長の場合や、最初の1～2個だけ固定で扱い、それ以降をすべて配列で受け取りたい場合に便利。
残余引数は「...変数名」と書き、パラメータリストの最後に配置しなければならない。
渡された引数は、自動的に配列にまとめられるので、ループや配列メソッドを使って楽に処理できる。

　このように、残余引数を活用すると、今まで arguments オブジェクトを使っていた処理をより簡潔で読みやすいコードに置き換えることができます。特定の要素数だけ固定で使い、あとはまとめて配列で持っておきたいというケースで重宝する仕組みです。