JavaScriptのスプレッド構文(...)の主な用途として、最も適切なものはどれか?
解説
正解と要点正解は「配列やオブジェクトの要素を展開する」です。スプレッド構文(...)は、イテラブル(配列や文字列など)やオブジェクトの中身を個々の要素として展開し、別の配列・オブジェクト・関数引数の中に埋め込むための構文です。なぜその答えなのか非同期処理の待機 — これはawaitキーワードの役割です。スプレッド構文は同期・非同期に関係なく要素の展開に使うものであり、待機の機能は持ちません。メソッドの隠蔽 — カプセル化はクロージャやプライベートフィールド(#field)で実現するものです。スプレッド構文はむしろプロパティを展開して外に出す操作であり、隠蔽とは逆の方向です。要素の逆順並び替え — 配列の反転はArray.prototype.reverse()やtoReversed()で行います。スプレッド構文は順序を変えず、そのまま展開します。背景・仕組みスプレッド構文はES2015(ES6)で配列向けに導入され、ES2018でオブジェクトにも拡張されました。内部的には配列の場合イテレータプロトコル(Symbol.iterator)を利用して要素を1つずつ取り出し、オブジェクトの場合は列挙可能な自身のプロパティをコピーします。// 配列のコピーとマージ const a = [1, 2, 3]; const b = [...a, 4, 5]; // [1, 2, 3, 4, 5] // オブジェクトのマージと上書き const defaults = { theme: 'light', lang: 'ja' }; const user = { lang: 'en' }; const config = { ...defaults, ...user }; // { theme: 'light', lang: 'en' } // 関数引数への展開 const nums = [3, 7, 1]; Math.max(...nums); // 7重要な点として、スプレッド構文によるコピーはシャローコピー(浅いコピー)です。つまりネストされたオブジェクトや配列は参照がコピーされるだけで、深い階層まで複製されるわけではありません。実務での活用例Reactの状態更新 — setState({ ...prevState, count: prevState.count + 1 })のように、既存のstateを展開しつつ一部だけ上書きするパターンは定番です。イミュータブル(不変)な更新が求められるReactと相性が良い構文です。配列操作の非破壊化 — [...arr].sort()のように、元の配列を変更せずにソートした新しい配列を得る手法は、バグの防止に役立ちます。関数の可変長引数への受け渡し — console.log(...args)のように、配列を個別の引数として渡す場面でも頻繁に使われます。