JavaScriptで他人が作成したソースコードを見ていると、「…」と記述された処理を見たこと1度はあると思います。
当時の私はこの…が何を指しているのか全く分からず、この処理は結局何をするのか理解できませんでした。昨今のJavaScriptを使った開発では使用される機会が増えているので、まだ理解できていない人はこちらの記事を参考に基本的な使い方を覚えましょう。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
スプレッド構文とレスト構文について
JavaScriptの「…」にはスプレッド構文とレスト構文の2つの意味があります。スプレッド構文とレスト構文の基本的な使い方や違いについて解説していきます。
スプレッド構文の基本的な使い方
MDNで記載されているスプレッド構文の内容は以下のとおりです。
スプレッド構文 (…) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。
引用元：MDN
MDNの解説の内容は要約すると、関数などで使用される引数や配列・オブジェクトなどに代入されている値をスプレッド構文(…)を使うことで、展開することができます。この「展開」がスプレッド構文の重要なポイントです。
下記のコードはスプレッド構文を使ったサンプルになります。
const name = ["田中","鈴木","山田"];
// 通常
console.log(name); // -> ['田中', '鈴木', '山田']
// スプレッド構文で配列を展開
console.log(...name); // -> 田中 鈴木 山田スプレッド構文を配列で使う
配列でスプレッド構文を使ったサンプルコードを紹介します。
配列のコピー
スプレッド構文を使って配列のコピーをする方法は以下のとおりです。
const originalFruits = ["Apple", "Banana"];
// 配列のコピー
const copyFruits = [...originalFruits];
console.log(copyFruits); // -> ["Apple", "Banana"]配列に値を追加
スプレッド構文を使って配列に値を追加する方法は以下のとおりです。
const originalFruits = ["Apple", "Banana"];
// 先頭に追加
const addFruits1 = ["Grape", ...originalFruits];
console.log(addFruits1); // -> ['Grape', 'Apple', 'Banana']
// 最後尾に追加
const addFruits2 = [...originalFruits, "Grape"];
console.log(addFruits2); // -> ['Apple', 'Banana', 'Grape']
// 真ん中に追加
const addFruits3 = ["Grape", ...originalFruits, "Strawberry"];
console.log(addFruits3); // -> ['Grape', 'Apple', 'Banana', 'Strawberry']配列のマージ
スプレッド構文を使って2つの配列同士をマージ(統合)する方法は以下のとおりです。
const fruitsArr1 = ["Apple", "Banana"];
const fruitsArr2 = ["Grape", "Strawberry"];
// 配列のマージ
const integArr1 = [...fruitsArr1, ...fruitsArr2];
console.log(integArr1); // -> ['Apple', 'Banana', 'Grape', 'Strawberry']
const integArr2 = [...fruitsArr2, ...fruitsArr1];
console.log(integArr2); // -> ['Grape', 'Strawberry', 'Apple', 'Banana']スプレッド構文をオブジェクトで使う
オブジェクトでスプレッド構文を使ったサンプルコードを紹介します。
オブジェクトのコピー
スプレッド構文を使ってオブジェクトのコピーをする方法は以下のとおりです。
const fruitsPrice = {
Apple: 100,
Banana: 150,
};
// オブジェクトのコピー
const fruitsPriceCopy = { ...fruitsPrice };
console.log(fruitsPriceCopy); // -> Apple: 100 Banana: 150オブジェクトの追加
スプレッド構文を使ってオブジェクトに値を追加する方法は以下のとおりです。
const fruitsPrice = {
Apple: 100,
Banana: 150,
};
// オブジェクトの追加
const fruitsPriceAdd1 = { Grape: 300, Strawberry: 400, ...fruitsPrice };
console.log(fruitsPriceAdd1); // -> {Grape: 300, Strawberry: 400, Apple: 100, Banana: 150}オブジェクトのマージ
スプレッド構文を使って2つのオブジェクト同士をマージ(統合)する方法は以下のとおりです。
const fruitsPriceObj1 = {
Apple: 100,
Banana: 150,
};
const fruitsPriceObj2 = {
Grape: 300,
Strawberry: 400,
};
// オブジェクトのマージ
const fruitsPriceInteg = { ...fruitsPriceObj1, ...fruitsPriceObj2 };
console.log(fruitsPriceInteg); // -> {Apple: 100, Banana: 150, Grape: 300, Strawberry: 400}レスト構文の基本的な使い方
MDNで記載されているレスト構文の内容は以下のとおりです。
関数の最後の引数に … の接頭辞を付けると、(ユーザーが提供した) その位置にある残りの引数を JavaScript の「標準の」配列の中に入れることができます。
引用元：MDN
MDNの解説の内容は要約すると、レスト構文(…)を引数の最後に設定すると残引数の値を配列の中に格納します。例えば、引数の数が2つで関数呼び出し時に渡される値が3つの場合、1つの値は引数に渡りません。この零された値を全て配列の中に格納します。
スプレッド構文は値を「展開」しますが、レスト構文は反対の値を「集約」します。
レスト構文を関数で使う
関数でレスト構文を使ったサンプルコードを紹介します。
残引数を取得
レスト構文を使って残引数を取得する方法は以下のとおりです。
function personalInfo(lastName, firstName, ...other) {
console.log(`lastName:${lastName}`); // -> lastName:鈴木
console.log(`firstName:${firstName}`); // -> firstName:一郎
console.log(`other:${other}`); // -> other:25歳,男性
}
personalInfo("鈴木", "一郎", "25歳", "男性");渡された値を全て取得
冒頭でレスト構文は残引数の値を配列に格納すると解説しましたが、引数を設定せずに全てレスト構文で値を配列に格納することも可能です。
レスト構文を使って関数呼び出し時に渡される全ての値を取得する方法は以下のとおりです。
function personalInfo(...info) {
console.log(info);
}
console.log(personalInfo("田中", "太郎", "20歳")); // -> ['田中', '太郎', '20歳']
console.log(personalInfo("鈴木", "一郎", "25歳", "男性")); // -> ['鈴木', '一郎', '25歳', '男性']
