2022年2月27日 React実践の教科書モダンJavaScriptの機能に触れる　分割代入~

分割代入

オブジェクトや配列から値を抽出する方法です。

オブジェクトの分割代入

const myProfile = {
    name: "ryuji",
    age: 36
}

const { name } = myProfile;

console.log(name); => ryuji

// 順番を変える

const { age, name } = myProfile;

console.log(age); => 36

分割代入する変数名に{}と書くオブジェクトリテラルをつけます。
順番は変えられます。(配列ではできません)

分割代入の後にテンプレートリテラルを用いる

const myProfile = {
    name: "ryuji",
    age: 36
}

const { name, age } = myProfile;

const message = `私の名前は${name}で年齢は${age}です。`

console.log(message); => 私の名前はryujiで年齢は36です。

分割代入をしていない場合、${myProfile.name} ${myProfile.age} と書く必要があり冗長です。
分割代入をする事で ${name} ${age} で出力できています。

分割代入時にプロパティ名に別名をつける

const myProfile = {
    name: "ryuji",
    age: 36
}

const { name: newName, age: newAge } = myProfile;

const message = `私の名前は${newName}で年齢は${newAge}です。`

console.log(message); => 私の名前はryujiで年齢は36です。

分割代入時に別名をつけて別名で出力しています。
コロンをつけて、別名を後に記述します。

配列の分割代入

オブジェクトとの相違点

配列リテラルを使用します。
順番は変えられません。
今回の例ですとnameだけ取り出すことはできますがageだけは不可能です。

デフォルト値=

引数や分割代入時に使用します。

引数のデフォルト値

const sayHello = (name) => console.log(`こんにちは${name}さん。`);

sayHello("ryuji"); => こんにちはryujiさん。

という、関数があった場合にデフォルト値がないと

関数の実引数を持たせなかった場合に${name}がundefinedになります。

const sayHello = (name) => console.log(`こんにちは${name}さん。`);

sayHello(); => こんにちはundefinedさん。

実引数を渡さなかった場合にデフォルトで出力する値を持たせるには以下のように仮引数を設定します。

const sayHello = (name = "yunosuke") => console.log(`こんにちは${name}さん。`);

sayHello(); => こんにちはyunosukeさん。
sayHello("yano"); =>  こんにちはyanoさん。

実引数を渡していませんが、${name}が出力されています。
実引数を渡した場合は、そちらが出力されます。
渡されない引数がある可能性がある場合に効果的です。

オブジェクト分割代入のデフォルト値

const myProfile = {
    name: "ryuji"
}

const { age = 36 } = myProfile;

console.log(age);　=> 36

ageはmyProfileに存在しませんが出力できています。
分割代入時の変数名にデフォルト値を設定します。

スプレッド構文 ...

配列やオブジェクトに使える構文で以下の使い道があります。

要素の展開
要素をまとめる
要素のコピー、結合

要素の展開

const arr1 = [1, 2];

console.log(arr1); => [1, 2]
console.log(...arr1); => 1 2

出力時に ... をつけています。(仮引数に書くとRest Parametersになります)
配列の要素が展開されています。

要素をまとめる

const arr2 = [1, 2, 3, 4, 5];

const [ num1, num2, ...arr3] = arr2;
console.log(num1); => 1
console.log(num2); => 2
console.log(arr3); => [ 3, 4, 5 ]

分割代入時に残りの要素をまとめています。
展開とは違うこういった使い方もできます。

要素のコピー、結合

コピーする例

const arr1 = [1, 2];
const arr2 = [4, 5];

const arr3 = [...arr1];

console.log(arr3); => [1, 2]

...で順番に展開して、配列リテラルで囲っているのでコピーできています。

結合はこちらの応用になります。

結合の例

const arr1 = [1, 2];
const arr2 = [4, 5];

const arr3 = [...arr1, ...arr2];

console.log(arr3);　=> [ 1, 2, 4, 5 ]

このように結合が表現できます。

オブジェクトでも行えます。

const obj1 = {value1: 10, value2: 20};
const obj2 = {value3: 40, value4: 50};

const obj3 = {...obj1, ...obj2};

console.log(obj3); => { value1: 10, value2: 20, value3: 40, value4: 50 }

オブジェクトでもスプレッド構文でコピー、結合が行えます。
オブジェクトリテラルを使い、プロパティ名を付けるだけです。

なぜイコール=でコピーしてはいけないのか

スプレッド構文でコピーを表現してきましたがイコールでも行えます。

const arr1 = [1, 2];

const arr2 = arr1;

console.log(arr2); => [1, 2]

しかし、イコール行うと問題があります。

参照値も引き継がれてしまうため予期せぬ挙動をしてしまうためです。

具体的には以下の例のようになります。

const arr1 = [1, 2];

const arr2 = arr1;

arr2[0] = 100;

console.log(arr1); => [ 100, 2 ]
console.log(arr2); => [ 100, 2 ]

コピー元のarr1の内容も書き換えられてしまっています。

破壊的メソッドのようです。

スプレッド構文ではどうでしょうか。

const arr1 = [1, 2];

const arr2 = [...arr1];

arr2[0] = 100;

console.log(arr1); => [ 1, 2 ]
console.log(arr2); => [ 100, 2 ]

コピー元の値はそのままです。

非破壊的メソッドと同様ですね。

Reactの開発においてコピーを行う際はスプレッド構文もしくはspliceを使って行います。

イコールではコピーをしないと覚えておくと良いでしょう。

オブジェクトの省略記法

オブジェクトのプロパティ名と設定する変数名が同じときに省略できます。

具体的にこのような場合です。

const name = "ryuji";
const age = 36;

const user = {
    name: name,
    age: age
};

console.log(user); => { name: 'ryuji', age: 36 }

省略すると

const name = "ryuji";
const age = 36;

const user = {
    name,
    age
};

console.log(user);

コロン以降を省略しています。この記法はよく使われるので覚えておきましょう。

オブジェクトの分割代入で別名を付けるときの逆のイメージなのでセットで記憶すると良いです。

最後に

Reactを学ぶためにはJavaScriptの基礎が重要なようでこの書籍ではまだJavaScriptの基礎が続いています。

それだけしっかり知識を定着させる必要があるという事なので、復習を重ねていきます。

最後まで読んでくださった方、ありがとうございます。

りゅうじの学習blog

学習したことをアウトプットしていきます。