サンプルコードで身につける: rest引数 — 個数が決まらない引数を受け取る

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1個数が決まらない数値を合計する

rest引数の最も基本の形です。...values と書くだけで、呼び出しごとに違う個数の引数をまとめて受け取れ、関数の中では普通の配列として扱えます。引数が2個でも3個でも同じ関数で済む、というのがすべての出発点です。

TypeScript

// ...values は「渡された引数を全部まとめた配列」になる
function addAll(...values: number[]): number {
  let total = 0;
  for (const v of values) {
    total = total + v;
  }
  return total;
}

console.log(addAll(1, 2));
console.log(addAll(5, 10, 15));
console.log(addAll(100, 200, 300, 400));

2固定の引数とrest引数を組み合わせる

最初の引数は普通に受け取り、それ以降だけを rest引数でまとめる形です。rest引数は必ず引数リストの最後に置く、というルールもここで確認できます。「共通の設定1つ + 対象データたくさん」という実務の関数でよく出てくる並びです。

TypeScript

// prefix は固定の引数、words はそれ以降を全部まとめた配列
function tagWords(prefix: string, ...words: string[]): string[] {
  const tagged: string[] = [];
  for (const w of words) {
    tagged.push(prefix + w);
  }
  return tagged;
}

console.log(tagWords("#", "news", "tech", "sports"));
console.log(tagWords("@", "taro"));

// function wrong(...words: string[], last: string) {} // restが最後でないとエラー

3spread構文で配列をrest引数に渡す

受け取る側の rest引数と、渡す側の spread構文(配列の前に ...)は対になる関係です。すでに配列になっているデータを、要素を1個ずつ書き直さずにそのまま rest引数の関数へ渡せます。Math.max のような組み込み関数にも同じ渡し方が使えます。

TypeScript

// 最大値と最小値の差(値のばらつき)を返す
function rangeWidth(...nums: number[]): number {
  return Math.max(...nums) - Math.min(...nums);
}

// 1個ずつ渡してもよいし...
console.log(rangeWidth(3, 8, 1));

// 配列を spread で展開して渡してもよい
const dailyTemps: number[] = [22.5, 25.1, 24.3, 26.8];
console.log(rangeWidth(...dailyTemps));
console.log(Math.max(...dailyTemps));

4引数0個の呼び出しに備える

rest引数は0個の呼び出しも合法で、そのときは空の配列になります。平均のように個数で割る計算では、空のまま計算すると壊れるので length の確認が必要です。「restは常に配列。ただし空かもしれない」という性質を確かめる例です。

TypeScript

function averageScore(...scores: number[]): number {
  // rest引数は0個でも空配列になるだけなので、自分で確認する
  if (scores.length === 0) {
    return 0;
  }
  let total = 0;
  for (const s of scores) {
    total = total + s;
  }
  return total / scores.length;
}

console.log(averageScore(80, 90, 70));
console.log(averageScore(60));
console.log(averageScore()); // 0(空配列なので既定値を返す)

5可変個の詳細を持つログ行を組み立てる

実務のログ出力では、エラーの内容・リトライ回数・担当チームなど、付けたい詳細情報の数が場面ごとに変わります。レベルは固定の引数、詳細は rest引数で受けて join でつなげば、どんな個数でも1つの関数で整形できます。

TypeScript

function buildLogLine(level: string, ...details: string[]): string {
  if (details.length === 0) {
    return "[" + level + "] (詳細なし)";
  }
  return "[" + level + "] " + details.join(" | ");
}

console.log(buildLogLine("INFO", "起動完了"));
console.log(buildLogLine("ERROR", "DB接続失敗", "リトライ3回", "担当: 基盤チーム"));
console.log(buildLogLine("DEBUG"));