Reactを勉強し始めた時に躓いたコード記法【分割代入、スプレッド記法］

はじめに

普段はバックエンドエンジニアとしてPythonなどでコーディングすることが多いですが、
「フロントエンドも理解できるようになりたい」と思い、最近はReactを勉強しています。

Pythonに慣れている著者からすると初めはJavascriptやReact独特の記法に躓いていたため、今後ReactやJavascriptを勉強する方のために記事にしたいと思いました。

1.分割代入

使い所

オブジェクトや配列で格納されている値を取り出す時に、分割代入を用いるとシンプルにコーディングできます。

従来の書き方

オブジェクトはオブジェクト名.プロパティで値を取得するため、以下のように何回もオブジェクト名(下の例だとuserInfo)を書くことになります。

const userInfo = {
    name: "hoge",
    age: 20,
    location: "Osaka",
  };
console.log(`${userInfo.name}は${userInfo.age}歳であり、${userInfo.location}に住んでいます。`)

//出力は以下
//hogeは20歳であり、Osakaに住んでいます。

分割代入を用いた書き方

以下のconst { name, age, location } = userInfo;が分割代入です。
変数nameにuserInfo.name、変数ageにuserInfo.age、変数locationにuserInfo.locationを代入しています。

const userInfo = {
    name: "hoge",
    age: 20,
    location: "Osaka",
  };
const { name, age, location } = userInfo;
console.log(`${name}は${age}歳であり、${location}に住んでいます。`);
//hogeは20歳であり、Osakaに住んでいます。

注意点

オブジェクトのプロパティ名と変数名で一致するものを代入しているため、
オブジェクトのプロパティ順と、分割代入(const { name, age, location }の箇所)で宣言している変数の順番が異なっていても動きます。

const userInfo = {
    name: "hoge",
    age: 20,
    location: "Osaka",
  };
const { age, name, location } = userInfo;
console.log(`${name}は${age}歳であり、${location}に住んでいます。`);
//hogeは20歳であり、Osakaに住んでいます。

オブジェクトのプロパティ名と変数名で一致するものがない場合、undefinedになってしまうため、スペルミスにはお気をつけください。

const userInfo = {
    name: "hoge",
  };
const { Name } = userInfo;
console.log(`名前は${Name}です！`);

//出力：名前はundefinedです！

2.スプレッド記法

スプレッド記法は以下のように、...を使う記法です。
複数の用途があるため慣れていきましょう。

const newarr = [...arr1];

配列・オブジェクトの値のみコピー

配列の値のみをコピーしたいときにスプレッド記法が用いられます。
配列の値のみをコピーするため、コピー元の配列が変更されたとしても影響しません。

const arr1 = [1, 2];
// 以下のコードで配列の値のみコピーしています。
const newarr = [...arr1];
console.log(newarr);
arr1.push(3);
console.log(arr1);
console.log(newarr);

// 出力は以下
// [1,2]
// [1,2,3]
// [1,2]

オブジェクトも同様

配列としてまとめる

コード例を用いて説明します。
以下のコードの2行目は以下のような挙動をします。

• num1 に配列の最初の要素 1 が代入されます。
• num2 に配列の2番目の要素 2 が代入されます。
• ...newarr は残りの要素(3,4,5)を新しい配列 newarr に代入します。

const arr = [1, 2, 3, 4, 5];
const [num1, num2, ...newarr] = arr;
console.log(num1);
console.log(num2);
console.log(newarr);
// 出力は以下
// 1
// 2
// [3,4,5]

要素を追加し、新たな配列・オブジェクトを作成

const nums1 = [0, 1];
const num2 = 2;
const newNums = [...nums1, num2];
console.log(newNums);
// 出力： [0, 1, 2]

const obj1 = { a: 0, b: 1 };
const newObj = { ...obj1, c: 2 };
console.log(newObj);
// 出力：{a: 0, b: 1, c: 2}

配列・オブジェクト同士の結合

const nums1 = [0, 1];
const nums2 = [2, 3];
const newNums = [...nums1, ...nums2];
console.log(newNums);
// 出力：[0,1,2,3]

const obj1 = { a: 0, b: 1 };
const obj2 = { c: 2, d: 4 };
const newObj = { ...obj1, ...obj2 };
console.log(newObj);
//出力：{a: 0, b: 1, c: 2, d: 4}