[ JavaScript 基礎 ] スプレッド構文の使い方 & 注意点

配列・オブジェクト内の要素を用いて、様々な操作を行うことが出来る「スプレッド構文」ですが、私自身もJavaScriptやTypeScriptでコードを書く際に使ってましたが、React.jsを使うようになってからすごく頻繁に使うようになりました。

理由としては、参照する配列が同じだと、再レンダリングされない(再読み込みされない)からですね。変更があったとしても参照する配列が変わらないと再レンダリングしてくれないので、同じ結果が返ってくるのです。。

スプレッド構文を使うことで、既存の配列をベースに変更・もしくは追加したい値をセットしたうえで、新しい配列を生成出来ますので、無事に再レンダリングされるわけですね。

前置きが長くなりましたが、今回はそんな「スプレッド構文」の使い方をご紹介していけたらと思います。

スプレッド構文の基本的な書き方

仮に次のような配列があると仮定します。

let sample = ["ガスト", "サイゼリア"];

スプレッド構文では、この配列を次のように書いたりします。

...sample-> ... が配列名やオブジェクト前にくるのが特徴です。

分身を作る(複製する)

配列やオブジェクトの分身(クローン)を作成することが可能です。

配列

let str = ["one","two","three"];

// 配列の場合、[...配列名]とすると複製することが可能です。
let clone = [...str];
console.log(clone);

実行結果 👇

オブジェクト

let str = { name : "ウツボウ", age : 27 };

// オブジェクトの場合、{...オブジェクト名}とすると複製することが可能です。
let clone = {...str};
console.log(clone);

実行結果 👇

新しい配列・オブジェクトを作成

要素を追加しつつ、新しい配列・オブジェクトを作成することが可能です。

配列

let str = ["one","two","three"];

// [...配列名, 追加する要素]で新しい要素を追加した配列を生成することが出来ます。
let newArray = [...str, "four", "five"];
console.log(newArray);

実行結果 👇

オブジェクト

let str = { name : "ウツボウ", age : 27 };

// {...配列名, 追加する要素}で新しい要素を追加したオブジェクトを生成することが出来ます。
let newArray = {...str, gender : "男性"};
console.log(newArray);

実行結果 👇

配列・オブジェクト同士を連結させる

別々に定義した配列やオブジェクトを連結させることが可能です。

配列

// 配列①
let i = ["one","two","three"];

// 配列②
let j = ["four","five"];

// ①と②を連結させる : [...配列①, ...配列②] 
let newArray = [...i, ...j];
console.log(newArray);

実行結果 👇

オブジェクト

// オブジェクト①
let i = { name : "ウツボウ", age : 27 };

// オブジェクト②
let j = { gender : "男性" };

// // ①と②を連結させる : [...オブジェクト①, ...オブジェクト②] 
let newArray = { ...i, ...j };
console.log(newArray);

実行結果 👇

 分割代入

配列やオブジェクト内にある要素を別で準備した変数などに分けて代入することが可能です。

配列

配列内のone, two, threeを分けて取り出します。別で用意した変数の名前は任意で大丈夫です。

let i = ["one","two","three"];

// aでone, bでtwo, cでthreeを受け取る
let [a, b, c] = i;
console.log(`${a} & ${b} & ${c}`);

実行結果 👇

 オブジェクト

オブジェクト内のnameとageを取り出します。注意点としては、配列と違い、変数名をkey名と一致させる必要がある点です。let {n, a} = obj; のように書いてしまうとReferenceErrorが発生します。

let obj = { name : "ウツボウ", age : 27 };

// obj内のname, ageを分割する
let {name, age} = obj;
console.log(`名前:${name} 年齢:${age}歳`);

実行結果 👇

関数の引数で使用する場合

関数の引数へ配列・オブジェクト内の要素を渡すことが可能ではありますが、オブジェクトの場合は、注意しましょう。実行結果は、「分割代入」と一緒です。

配列

基本的には、分割代入を使うという認識で問題はないです。ただ、引数の数が一致しないとエラー(ReferenceError)になりますので注意しましょう。

// 配列を定義
let i = [10, 2, 7];

// 関数Funcを定義 : 引数を配列の要素分用意する -> 配列内の要素を分割して渡すことが可能
const Func = (a, b, c) => {
  // 受け取った値を足し合わせる
  console.log(a + b + c);
}

// 関数Funcの呼び出し
Func(...i);

オブジェクト

こちらも同様に分割代入で関数の引数へ要素を渡すことが出来ます。配列と同じく引数の数には注意しましょう。

// 配列を定義
let obj = { name : "ウツボウ", age : 27 }; 

// 関数Funcを定義 : オブジェクト内の要素名と一致させる。引数の数もオブジェクト内の要素の数と一致させる。
const Func = ( {name, age} ) => { 
  console.log(`名前:${name} 年齢:${age}歳`);
}; 

//関数Funcの呼び出し
Func(obj);

 注意点

反復可能なオブジェクトに対してのみスプレッド構文は、使うようにしましょう。例えば、極端な例にはなりますが、以下のような場合にスプレッド構文を使ってしまうとエラーが発生します。

const obj = 77;
console.log(...obj);

実際に発生するエラーはこちら 👇

まとめ

1. スプレッド構文を用いることで、配列・オブジェクト内の要素を用いて、様々な操作を行うことが出来る
2. JavaScript・TypeScript、どちらでも基本的な書き方は変わらない。
3. 関数の引数へ配列もしくはオブジェクト内の要素を渡す場合には、引数の数と要素の数が一致するようにする -> 一致していないと、ReferenceErrorが発生します。
4. 配列やオブジェクトなど反復可能なオブジェクトにのみスプレッド構文は使用する

最後に

ここまで読んで頂き、有り難う御座います。

プログラミングを学習している方やこれから始めようと考えている方にお知らせです。

⇩⇩⇩⇩⇩⇩

•  独学で学習を続けても中々、理解が定着しない..
•  エラーが出てしまい、想定した結果が得られない…
•  フリーランスとしてデビューしたいが何からやったらいいかわからない…

などの悩みがある方必見！

実は、以下の内容が全て月額定額のサブスクで利用できるサービスがあります。

最初から定額であると少し抵抗があるという方もフリープランからお試しが出来るので安心です。会員登録も無料！

詳しくは、以下のリンク先のページからチェック！