JavaScript の引数の考え方
はじめてでもわかるように、「関数に渡す値（引数）」をどう受け取って扱うかを、昔からある arguments と、今主流の ...rest（レストパラメータ）の2つで説明します。直感的に「今は ...rest を使う」が基本方針です。
関数と引数の基本
- 関数は処理のまとまり。入力（引数）を受け取り、結果を返したり表示したりします。
- 引数はカンマで区切って渡します。
function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
greet("佐藤"); // こんにちは、佐藤さん！
- 引数は複数あってもOK。足りないときは
undefinedになります。
function showPerson(name, age) {
console.log(name, age);
}
showPerson("田中", 20); // 田中 20
showPerson("鈴木"); // 鈴木 undefined
arguments オブジェクト（昔からある方法）
何ができる？
- 関数に渡された「すべての引数」にアクセスできる特別な“配列っぽい”オブジェクト。
- 引数の数が決まっていなくても使える。
使い方
function logAll() {
console.log("引数の数:", arguments.length);
console.log("最初の引数:", arguments[0]);
console.log("2番目の引数:", arguments[1]);
}
logAll("A", "B", "C");
// 引数の数: 3
// 最初の引数: A
// 2番目の引数: B
例題1：いくつでも足し算
function sumAll() {
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(sumAll(1, 2, 3)); // 6
console.log(sumAll(10, 5, 2, 8)); // 25
注意ポイント
- アロー関数では使えない（
argumentsは存在しません）。 - 配列っぽいけど「本当の配列」ではないため、
mapやreduceが直接使えません（必要ならArray.from(arguments)で配列化）。
レストパラメータ …rest（今の主流の方法）
何ができる？
...を付けた引数に「残りの全部」が配列として入ります。- 本物の配列なので配列メソッドがそのまま使える。
- アロー関数でも使える。
使い方
function sumAll(...nums) {
return nums.reduce((acc, cur) => acc + cur, 0);
}
console.log(sumAll(1, 2, 3)); // 6
console.log(sumAll(10, 5, 2, 8)); // 25
例題2：最初の引数は名前、残りは点数の一覧
function report(name, ...scores) {
const avg = scores.length ? (scores.reduce((a, b) => a + b, 0) / scores.length) : 0;
console.log(`${name}さんの平均点: ${avg}`);
}
report("山本", 80, 90, 70); // 山本さんの平均点: 80
report("佐々木"); // 佐々木さんの平均点: 0
例題3：アロー関数でもOK
const joinWords = (...words) => words.join("-");
console.log(joinWords("a", "b", "c")); // a-b-c
arguments と …rest の違いを体感する
- 配列メソッドが使えるかが最大の違い。
function oldWay() {
// arguments は配列っぽいが map は使えない
// const upper = arguments.map(x => String(x).toUpperCase()); // エラー
const arr = Array.from(arguments);
const upper = arr.map(x => String(x).toUpperCase());
return upper;
}
function newWay(...items) {
// items は配列なので直接 map できる
return items.map(x => String(x).toUpperCase());
}
console.log(oldWay("a", "b", "c")); // ["A", "B", "C"]
console.log(newWay("a", "b", "c")); // ["A", "B", "C"]
- アロー関数対応もポイント。
argumentsはアロー関数で使えないので、アロー関数を使うなら...rest一択。
実務での考え方・ベストプラクティス
- 基本は …rest を使う。読みやすく、配列として扱いやすい。
- 引数が固定なら個別に名前をつける。可変なら最後に
...rest。
function sendMessage(to, subject, ...attachments) {
console.log("宛先:", to);
console.log("件名:", subject);
console.log("添付:", attachments.length, "件");
}
sendMessage("taro@example.com", "ご連絡", "memo.pdf", "image.png");
// 宛先: taro@example.com / 件名: ご連絡 / 添付: 2 件
- 可読性重視：引数の意味が伝わる命名にする。
argumentsは古いコードの読み解きで遭遇するので「仕組みを知っておく」程度で十分。
よくあるつまずきと対処
- 「
argumentsをアロー関数で使ってエラー」
→ アロー関数では...restに置き換える。 - 「配列メソッドが使えない」
→Array.from(arguments)で配列化するか、最初から...restを使う。 - 「引数が足りないとエラー？」
→ JavaScript は足りないとundefined。デフォルト値を設定すると安心。
function hello(name = "ゲスト") {
console.log(`こんにちは、${name}さん`);
}
hello(); // こんにちは、ゲストさん
練習問題
- 最大値を返す関数を …rest で作る
function maxOf(...nums) {
return nums.length ? Math.max(...nums) : -Infinity;
}
console.log(maxOf(3, 10, 7)); // 10
- 文字列を何個でも渡して、結合して返す
function concatAll(...parts) {
return parts.join("");
}
console.log(concatAll("に", "ほ", "ん")); // にほん
- 最初の引数はタグ名、残りは子要素文字列。HTML風に組み立てる
function makeTag(tag, ...children) {
const inner = children.join("");
return `<${tag}>${inner}</${tag}>`;
}
console.log(makeTag("p", "こんにちは", "世界")); // <p>こんにちは世界</p>
まとめ
- すべての引数に触りたいなら、今は
...restが標準的で使いやすい。 argumentsは「昔のやり方」。読み解きのために仕組みは知っておくと安心。- 可変長引数の処理は「配列としてそのまま扱える」ことが、開発体験をぐっと楽にします。