カテゴリ: JavaScript 更新日: 2025/09/16

JavaScriptの可変長引数(rest parameters)の活用テクニック

JavaScriptの可変長引数(rest parameters)の活用テクニック
JavaScriptの可変長引数(rest parameters)の活用テクニック

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで関数の引数をいくつでも受け取れるようにする方法はありますか?」

先生

「はい、あります。『可変長引数』という仕組みを使います。英語では rest parameters と言います。」

生徒

「具体的にはどうやって書くんですか?例えば、人数が違うときに合計点を計算したいんですが。」

先生

「それなら、rest parametersを使うと便利です。順を追って説明しますね!」

1. 可変長引数(rest parameters)とは?

1. 可変長引数(rest parameters)とは?
1. 可変長引数(rest parameters)とは?

可変長引数とは、関数に渡す引数の数が決まっていなくても、まとめて受け取れる仕組みです。

例えば、合計を計算する関数で、人数や点数が毎回違っても対応できます。

rest parametersは、関数の引数の前に「...」を付けて書きます。

2. rest parametersの基本的な書き方

2. rest parametersの基本的な書き方
2. rest parametersの基本的な書き方

rest parametersは次のように使います。引数名の前に「...」を付けるだけです。


function sum(...numbers) {
  let total = 0;
  for (let num of numbers) {
    total += num;
  }
  return total;
}

console.log(sum(10, 20));          // 30
console.log(sum(5, 15, 25, 35));   // 80
console.log(sum());                 // 0

この例では、sum関数はいくつでも引数を受け取り、すべて足し合わせて返しています。

3. rest parametersと配列の関係

3. rest parametersと配列の関係
3. rest parametersと配列の関係

rest parametersは、受け取った引数を自動で配列にまとめてくれます。

配列(array)とは、複数のデータをまとめて扱うためのものです。つまり、numbersは配列として扱えます。

配列の中身を順に見るために、for文やfor...of文を使うのが一般的です。

4. rest parametersを使うメリット

4. rest parametersを使うメリット
4. rest parametersを使うメリット
  • 引数の数を気にせず関数を作れる
  • コードがシンプルで読みやすくなる
  • 不特定多数の値を扱う処理が楽になる

例えば、ショッピングカートの合計金額を計算したり、複数のテスト点数の平均を求めたりするときに役立ちます。

5. 通常の引数とrest parametersを組み合わせる

5. 通常の引数とrest parametersを組み合わせる
5. 通常の引数とrest parametersを組み合わせる

rest parametersは、他の引数と一緒に使えます。ただしrest parametersは必ず最後に書かなければいけません。


function introduce(greeting, ...names) {
  console.log(greeting);
  for (let name of names) {
    console.log(name + "さん");
  }
}

introduce("こんにちは", "太郎", "花子", "次郎");

この例では、最初のgreetingは普通の引数で、それ以降の人の名前をrest parametersで受け取っています。

6. 使うときの注意点

6. 使うときの注意点
6. 使うときの注意点

rest parametersは関数の最後の引数である必要があり、複数使うことはできません。

また、rest parametersは配列なので、配列用のメソッド(例: map, filter, reduce)も使えます。


function multiplyAll(...nums) {
  return nums.map(x => x * 2);
}

console.log(multiplyAll(1, 2, 3)); // [2, 4, 6]

7. rest parametersとargumentsオブジェクトの違い

7. rest parametersとargumentsオブジェクトの違い
7. rest parametersとargumentsオブジェクトの違い

JavaScriptには昔からargumentsという「関数に渡された全ての引数」をまとめた特別なオブジェクトがあります。

しかし、argumentsは配列ではなく似たもの(配列のようなオブジェクト)なので、使いにくい面があります。

rest parametersは配列として扱えるので、argumentsより便利でおすすめです。


// argumentsの例(配列ではない)
function oldSum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
console.log(oldSum(1, 2, 3));  // 6

8. 実用的な活用例:平均点を計算する関数

8. 実用的な活用例:平均点を計算する関数
8. 実用的な活用例:平均点を計算する関数

rest parametersを使って複数の点数を渡し、その平均を計算する関数を書いてみましょう。


function average(...scores) {
  if (scores.length === 0) return 0;
  let sum = scores.reduce((acc, val) => acc + val, 0);
  return sum / scores.length;
}

console.log(average(80, 90, 100)); // 90
console.log(average(70, 85));      // 77.5
console.log(average());            // 0

これで点数の数が変わっても、簡単に平均を求められます。

9. rest parametersまとめの代わりのポイント

9. rest parametersまとめの代わりのポイント
9. rest parametersまとめの代わりのポイント
  • rest parametersは「...」をつけて引数を配列として受け取る仕組み
  • 引数の数が変わる関数を簡単に作れる
  • 配列として扱えるのでfor文や配列メソッドが使いやすい
  • 通常の引数と組み合わせて使えるが、最後に書くことが必須
  • argumentsオブジェクトより扱いやすくてモダンな方法

ぜひJavaScriptで関数を作るときにrest parametersを使って、コードをもっと便利にしましょう!

カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptの正規表現で繰り返し指定(* + ? {n,m})を学ぼう
New2
TypeScript
TypeScriptとESNextの連携を完全ガイド!最新機能を使いこなす設定と対応法
New3
JavaScript
JavaScriptの正規表現で任意の1文字(.)や文字クラスを使う方法
New4
TypeScript
TypeScriptで非同期イテレーター(for await of)を活用する
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptの日時操作Tips!実務で役立つテクニック集
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.4
Java&Spring記事人気No4
TypeScript
TypeScriptでESLintとPrettierを導入!コード整形ルールを自動で統一する方法
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptのif文の使い方を完全ガイド!初心者でもわかる条件分岐
No.6
Java&Spring記事人気No6
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptの配列の要素にアクセスする方法(インデックス番号の使い方)
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptの型を明確に設計するコツとチーム開発の指針