JavaScript Spread Operator：ガイド

avaScript Spread演算子は、引数を受け入れる構文で配列を展開します。スプレッド演算子は通常、オブジェクトを複製したり、配列をマージしたり、リストの内容を関数に渡したりするために使用されます。

スプレッド演算子。いいえ、トーストとは何の関係もありません。 JavaScriptでは、spread演算子には特定の意味があります。これは、反復可能なオブジェクトのコンテンツにアクセスする方法です。これはトーストにスプレッドを貼り付けるほど楽しくは聞こえないかもしれませんが、知っておくと非常に便利なツールです。

このガイドでは、JavaScriptスプレッド演算子とその仕組みについて説明します。開始に役立つ一般的なユースケースの例をいくつか紹介します。

JavaScriptスプレッド演算子とは何ですか？

JavaScriptのスプレッド演算子を使用すると、反復可能なオブジェクトのコンテンツにアクセスできます。スプレッド演算子は、3つのドット（省略記号）の後に、アクセスするイテラブルの名前が続くセットです。この演算子はJavaScriptES6で導入されました。

反復可能なオブジェクトの3つのタイプは、配列、オブジェクトリテラル、および文字列です。 forループを使用すると、これらすべてのタイプのデータをループして、それらに対して共通のプロセスを実行できます。

反復可能なオブジェクトは、同じプロセスを複数回実行できるので便利です。文字列をループして、特定の文字を置き換えることができます。配列をループして、配列に格納されているすべての値の合計を作成できます。

スプレッド演算子の構文は次のとおりです。

var names = ["John", "Lisa", "Harry"];
var new_names = [...names, "Leslie"];
console.log(new_names);

この構文では、…namesを使用して、「names」リストの内容を「new_names」というリストに渡します。 「new_names」リストには、「names」リストのすべてのアイテムと、新しい名前、Leslieが含まれています。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

スプレッド演算子の3つの一般的な使用例は次のとおりです。

• 反復可能ファイルのコピーを作成します。
• 新しい反復可能オブジェクトにアイテムを追加します。
• 引数のリストを関数に渡します。

スプレッド構文は、リスト内のすべての個々の要素を表します。

Spread Operator JavaScript：Iterableのコピーを作成する

スプレッド演算子は、反復可能オブジェクトを複製する効果的な方法です。この問題に取り組む方法は他にもありますが、スプレッド演算子は本当に使いやすいです。反復可能ファイルのコピーを作成するには、3つのドットと、作成する配列の名前を指定します。

最後の例では、これが配列でどのように機能するかを示しました。スプレッド演算子を使用してJavaScriptオブジェクトを複製することもできます：

const lemon_drizzle = {
	name: "Lemon Drizzle",
	price: 1.95,
	vegan: true
}

const new_lemon_drizzle = {...lemon_drizzle};
console.log(new_lemon_drizzle);

このコードは、JavaScriptコンソールに次のように出力します。

{ name: "Lemon Drizzle", price: 1.95, vegan: true }

この例では、いくつかの重要な違いを示す必要があります。 JavaScriptオブジェクトのコピーを作成しています。これは、角かっこ（[]）の代わりに中かっこ（{}）を使用する必要があることを意味します。

次に、単一の配列を指定する代わりに、オブジェクトを指定しました。このオブジェクトには3つのキーと値が含まれており、それぞれが「レモンドリズル」カップケーキに関連しています。

JavaScriptの拡散：新しい反復可能オブジェクトにアイテムを追加

Spread演算子のユースケースは、反復可能オブジェクトのコピーにとどまりません。探索することがもっとあります。スプレッド演算子は通常、ある反復可能オブジェクトから次の反復可能オブジェクトにアイテムを追加するために使用されます。次の例を考えてみましょう：

const cupcakes = [
	'Lemon Drizzle',
	'Chocolate Chip',
	'Vanilla Iced'
];

const new_cupcakes = [...cupcakes, 'Red Velvet', 'Raspberry Dark Chocolate'];
console.log(new_cupcakes);

コードは次のようになります：

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

「new_カップケーキ」と呼ばれる元のJavaScript配列のコピーを作成しました。これには、作成したいくつかの追加の値も含まれています。

同じ構文を使用して、2つの反復可能オブジェクトをマージすることもできます。スプレッド演算子を使用して、角かっこ内の2つの反復可能オブジェクトを指定するだけです。

const old_menu = [
	'Lemon Drizzle',
	'Chocolate Chip',
	'Vanilla Iced'
];

const new_menu = [
	'Red Velvet',
	'Raspberry Dark Chocolate'
]

const final_menu = [...old_menu, ...new_menu];
console.log(final_menu);

コードは次のようになります：

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

以前と同じ結果が返されますが、今回は2つのアレイをマージしました。

JavaScriptの拡散：関数への引数の受け渡し

JavaScript関数に複数の引数を渡す場合は、spread演算子を使用すると便利な場合があります。この例を考えてみましょう：

function placeOrder(name, order, price) {
	console.log('Name: ' + name);
	console.log('Order: ' + order);
	console.log('Price: ' + price);
}

placeOrder('Geoff', 'Red Velvet', 1.85);

コードは次のようになります：

Name: Geoff
Order: Red Velvet
Price 1.85

placeOrderという関数を宣言しました （） これは3つの引数を取り、それらをコンソールに出力します。各値の前には、各引数の内容を説明するラベルが付いています。

このコードは機能しますが、配列で引数を指定し、spread演算子を使用してそれらを関数に渡すことができます。

function placeOrder(name, order, price) {
	console.log('Name: ' + name);
	console.log('Order: ' + order);
	console.log('Price: ' + price);
}

const order = ['Geoff', 'Red Velvet', 1.85];

placeOrder(...order);

コードは次のようになります：

Name: Geoff
Order: Red Velvet
Price 1.85

このコードの出力は同じですが、コードの動作方法が異なります。関数に直接値を渡す代わりに、リストでそれらの値を指定します。次に、spread演算子を使用して、これらの値を関数に渡します。

結論

Spread演算子は、JavaScript全体で広く使用されています。これにより、反復可能オブジェクトのコピー、新しい反復可能オブジェクトへの項目の追加、および関数への引数の受け渡しが簡単になります。スプレッド演算子の構文は3つのドットで、その後にアクセスする反復可能なオブジェクトが続きます。

これで、プロのようにJavaScriptスプレッド演算子を使い始める準備ができました！

JavaScriptの主要な学習リソース、書籍、コースに関するアドバイスについては、JavaScriptの学習方法に関する記事をご覧ください。