見やすい、メンテナンスしやすいJavaScriptのために。見やすい、メンテナンスしやすいJavaScriptのために。スプレッド構文をマスターしよう見やすい、メンテナンスしやすいJavaScriptのために。中津川篤司JavaScriptは昔から存在するプログラミング言語なので、昔からの書き方とモダンな書き方が混在しています。後方互換性が高い言語なので、昔からの書き方でも書けますが、新しい書き方の方がより効率的です。今回の記事では特にスプレッド構文と分割代入に注目して、よりモダンな書き方を実現する方法を解説します。以下のような関数を想定します。この関数は3つの引数を取ります。引数として渡したいとします。4];従来の書き方であれば、次のように引数を渡すでしょう。冗長的で面倒に感じる方も多いと思います。ary[2]);そこで使えるのが、スプレッド構文になります。使うことで、変数を展開して値を渡せます。先程の配列のindexを一つずつ指定することなく、シンプルに引数として指定できます。sum(...ary);配列の合成に使うスプレッド構文は変数を展開して、処理に渡せるという点がポイントになります。上述までの例では、配列を引数として渡すケースのみでしたが、これを使うと、次のように配列の合成にも使えます。メソッドでも書けます。concatは元の変数を変更しないので、受け取る形になってしまうのが注意点です。2].concat(ary1);配列をコピーするスプレッド構文は、配列のコピーでも活躍します。スプレッド構文利用の前に、JavaScriptでの変数が参照渡しとなる例を紹介します。下の例では、変数から新たな変数を作成しています。この場合、新しく作成した変数は、前の変数に与えた影響を受てしまいます。これは参照渡しのため発生する副作用です。4]このように変数をコピーすると、思わぬ変更が行われてしまう場合があります。それを防ぐために、スプレッド構文が利用できます。3]オブジェクトでも利用できますスプレッド構文は配列だけでなく、オブジェクトでも利用できます。'f'}同じキー名があった場合、後で指定したオブジェクトが優先されるので注意してください。キーの値が上書きされています。変数の値をシンプルに受け取れるようにする仕組みです。こちらも配列、オブジェクトに対して利用できます。3つに分ける場合を想定します。ary[2];この書き方を分割代入で書くと、次のようになります。ary;オブジェクトでも同じです。従来の場合は、次のようになるでしょう。obj.c;これを分割代入で書くと、次のようになります。オブジェクトのキーと、変数名が一致している必要がありますので注意が必要です。obj;キー名と変数名を分ける場合キー名に対して、別の変数名で受け取る場合は、次のように書きます。