可変長引数（…args）とは何か
可変長引数とは、関数に渡す引数の数を自由にできる仕組みです。通常の関数は「引数の数」を決めて定義しますが、...args を使うと「いくつ渡しても受け取れる」ようになります。args は配列のように扱えるので、まとめて処理することができます。
基本構文と流れ
JavaScript では次のように書きます。
function 関数名(...args) {
// args は配列のように使える
}
...（スプレッド構文）を引数名の前につける。- 関数を呼び出すときに渡した値がすべて
argsに入る。 argsは配列のように扱えるので、lengthやfor...ofで処理できる。
例題で理解する
例題1：渡された数をすべて表示
function showNumbers(...args) {
for (const num of args) {
console.log(num);
}
}
showNumbers(1, 2, 3);
// 出力: 1, 2, 3
showNumbers(10, 20, 30, 40);
// 出力: 10, 20, 30, 40
渡す数が変わっても、すべて受け取って表示できます。
例題2：合計を計算する関数
function sum(...args) {
let total = 0;
for (const num of args) {
total += num;
}
return total;
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(10, 20, 30, 40)); // 100
引数の数が違っても、すべて足し合わせて合計を返します。
例題3：文字列をまとめる
function joinWords(...args) {
return args.join(" ");
}
console.log(joinWords("こんにちは", "世界"));
// こんにちは 世界
console.log(joinWords("私は", "JavaScript", "を", "勉強中"));
// 私は JavaScript を 勉強中
文字列をいくつ渡しても、スペースでつなげて一つの文章にできます。
可変長引数のメリット
柔軟に使える
引数の数を決めなくてもよいので、呼び出し側が自由に値を渡せます。
配列のように扱える
args は配列風なので、map や filter などの高階関数も使えます。
デフォルト引数と組み合わせられる
通常の引数と ...args を組み合わせることで、柔軟な関数が作れます。
function greet(message, ...names) {
for (const name of names) {
console.log(`${message}, ${name}さん`);
}
}
greet("こんにちは", "太郎", "花子", "次郎");
// 出力: こんにちは, 太郎さん
// 出力: こんにちは, 花子さん
// 出力: こんにちは, 次郎さん
まとめ
- 可変長引数
...argsは「引数の数を自由にできる」仕組み。 - 渡された値はすべて配列のように
argsに入る。 - 合計計算や文字列結合など、柔軟な処理に役立つ。
- 通常の引数と組み合わせることで、さらに便利な関数が作れる。
初心者は「...args は引数をまとめて配列にする魔法」と覚えると理解しやすいです。