MENU

JavaScriptのレストパラメータの使い方

以下は、JavaScriptのレストパラメータ(Rest Parameters)についての技術記事です。備忘録として活用できるよう、基本的な使い方から応用までを解説します。


目次

JavaScriptのレストパラメータについて

レストパラメータとは?

レストパラメータ(Rest Parameters)は、ES6(ECMAScript 2015)で導入された機能で、関数の引数として与えられる可変長の値を一つの配列として扱うことができます。スプレッド構文(Spread Operator)と同じく ... を使いますが、レストパラメータは「残りのすべての引数」を意味し、主に関数の宣言で利用されます。


基本構文

レストパラメータは、関数の引数の最後に置かれ、可変数の引数をまとめて1つの配列として受け取ります。

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(10, 20, 30, 40)); // 100

上記の例では、sum 関数が任意の個数の数値を引数として受け取り、それらを配列として扱っています。numbers はレストパラメータとしてすべての引数をまとめた配列です。


レストパラメータの制約

  1. 関数引数の最後にのみ使用可能
    レストパラメータは引数の最後に配置する必要があります。途中に配置すると構文エラーになります。
   // 正しい使い方
   function example(first, ...rest) { /* ... */ }

   // 間違った使い方
   function example(...rest, last) { /* エラー */ }
  1. 1つの関数で1つだけ使用可能
    レストパラメータは1つの関数につき1つだけ使うことができます。
   // エラーになる例
   function example(...first, ...second) { /* エラー */ }

レストパラメータと通常の引数の組み合わせ

レストパラメータを使いながら、通常の引数と組み合わせることも可能です。レストパラメータは最後に置かれるため、通常の引数はその前に宣言します。

function multiply(multiplier, ...numbers) {
  return numbers.map(num => num * multiplier);
}

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

この例では、multiplier は通常の引数で、numbers はレストパラメータとして残りの引数をすべて配列で受け取ります。


引数の数がわからない関数に便利

レストパラメータは、引数の数が事前にわからない関数や、可変長の引数を扱う際に便利です。

function greet(greeting, ...names) {
  return `${greeting} ${names.join(', ')}!`;
}

console.log(greet('Hello', 'Alice', 'Bob', 'Charlie')); // "Hello Alice, Bob, Charlie!"

greet 関数では、最初の引数 greeting が挨拶の言葉となり、残りの引数は names という配列にまとめられています。このように、可変長の引数を簡単にまとめて処理できます。


配列の分割に使う

レストパラメータは、配列の分割にも活用できます。配列の一部だけを特定の変数に代入し、残りを配列としてまとめて取り出す場合に便利です。

const [first, second, ...rest] = [1, 2, 3, 4, 5];

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

この例では、firstsecond には配列の最初の2つの要素が割り当てられ、rest には残りの要素が配列として割り当てられます。


レストパラメータとargumentsオブジェクトの違い

レストパラメータは、従来の arguments オブジェクトと似た機能を持っていますが、重要な違いがあります。

  1. arguments は配列ではない
    arguments オブジェクトは配列のように見えますが、厳密には配列ではありません。したがって、配列のメソッド(map, filter, reduceなど)は直接使えません。レストパラメータは配列なので、これらのメソッドをそのまま使えます。
   function showArgs() {
     console.log(arguments); // Arguments(3) [1, 2, 3]
     console.log(Array.isArray(arguments)); // false
   }
   showArgs(1, 2, 3);
  1. レストパラメータは配列のメソッドを直接使用可能
    レストパラメータを使うと、配列のメソッドを直接使用できます。
   function showArgs(...args) {
     console.log(args); // [1, 2, 3]
     console.log(Array.isArray(args)); // true
   }
   showArgs(1, 2, 3);
  1. レストパラメータは使いやすくシンプル
    レストパラメータは関数宣言の引数リストで指定するため、可変長引数を扱う際の意図が明確で、コードの可読性が向上します。

応用例:デフォルト引数と組み合わせる

レストパラメータとデフォルト引数を組み合わせることで、より柔軟な関数を作成することができます。

function logMessages(level = 'INFO', ...messages) {
  console.log(`[${level}]`, ...messages);
}

logMessages('DEBUG', 'This is a debug message', 'with multiple parts');
// [DEBUG] This is a debug message with multiple parts

logMessages('This is a message without a level');
// [INFO] This is a message without a level

この例では、level はデフォルトで 'INFO' に設定され、レストパラメータ messages には残りの引数がまとめられます。


まとめ

  • レストパラメータの基本: レストパラメータ(...)は、関数の可変長引数をまとめるために使う構文。
  • 引数の最後に配置: レストパラメータは、関数引数の最後に1つだけ配置する必要がある。
  • 可変長引数の処理: 複数の引数を1つの配列にまとめ、配列のメソッドを直接使うことができる。
  • argumentsとの違い: レストパラメータは配列であるため、arguments よりも使いやすい。
  • 応用: デフォルト引数や配列の分割と組み合わせることで、柔軟で強力な関数を作成できる。

レストパラメータは、可変長の引数を簡潔かつ柔軟に扱えるため、関数の設計やコードの可読性向上に役立ちます。必要に応じて活用し、効率的なJavaScriptのコーディングを目指しましょう。

目次