【コードがとってもシンプルに！】スプレッド演算子の便利な使い方

最近の新技術により、JavaScriptはダイナミックに書ける言語となってきています。

特にスプレッド演算子には、3つのドットでJavaScriptの書き方を変えてしまうほどの可能性が秘められていると思っています。

 

この記事では、魅力的なスプレッド演算子の使い方についてご紹介します。

 

 

 

Applyなしで関数を呼び出す

Function.prototype.applyを使用することで配列をパースし、その中に含まれるパラメーターをセットしながら関数を呼び出すことができます。

 

 

スプレッド演算子を使えばapplyなしでシンプルに関数を呼び出すことができます。

 

 

コードが短く見やすくなりましたね。さらに、不要なnullを省くこともできるのです。

 

 

 

配列を結合する

配列を結合するにはいくつも方法がありますが、スプレッド演算子を使って結合することもできます。

 

 

配列の任意の位置に別の配列を挿入するように結合することもできます。次のようにしてください。

 

 

 

 

 

配列のコピー

配列のコピーは使う機会が多いでしょう。

これまではArray.prototype.sliceを使っていましたが、スプレッド演算子を利用して簡単に行えます。

 

 

ただし、配列中のオブジェクトは参照されているだけであり、全てがコピーされたわけではないことに注意してください。

 

 

 

引数やNodeListを配列に変換する

NodeListや引数のオブジェクトを配列に変換する時にも、これまではArray.Prototype.sliceを使ってきました。これからはスプレッド演算子を使ってみましょう。

 

 

シグネチャ中から引数を配列として取り出すこともできます。

 

 

 

 

 

Math関数を使う

スプレッド演算子は配列を異なる引数に展開することもできます。

スプレッド演算子が引数として使用されている関数であればどこでも、どんな数でも受け入れる関数として使用することができるのです。

 

 

分割する

私はReactプロジェクトやNode.jsアプリで、よく分割を使っています。分割と他のオペレーターは同時に使用することができ、情報を変数として扱えます。

 

 

スプレッド演算子より後ろの値をまとめて変数に与えることができるのです。

 

 

ES6によってJavaScriptは便利なだけでなく楽しい技術になりました。最近のブラウザはどれもサポートしていますので、ぜひ試してみるべきです。

特にスプレッド演算子は知っておいて損のない技ですよ！

 

 

 

※本稿は「6 Great Uses of the Spread Operator」を翻訳・再編集したものです。