🌟

あなたの知っているJavaScriptはもう古い(書き方編 -その2- )

2022/08/06に公開

JavaScript

React

Vue.js

tech

前回のおさらい

前回はJavaScriptの新しい書き方の基礎を学んでみました。
今回はさらに突っ込んだ新しい書き方を学んで行きます。

分割代入

昔の書き方ではobjectに対して要素をとり方出すときに、こんなやり方をしていたと思います。

var personObject = {
    name: "タロウ",
    age: 20,
};

// 私の名前はタロウです。年齢は20歳です。
var message = `私の名前は${personObject.name}です。年齢は${personObject.age}歳です`;

この書き方だと毎回personObjectを書かないといけないので効率がとても悪いです。
そこで、分割代入を使用します。

const personObject = {
    name: "タロウ",
    age: 20,
};

// 分割代入
const { name, age } = personObject;

// 私の名前はタロウです。年齢は20歳です。
const message = `私の名前は${name}です。年齢は${age}歳です`;

constで定義するときに、{}をつかうことでobjectから一致するものを取り出すことができます。
今回はnameとageを指定したので、personObject.nameとpersonObject.ageがそれぞれ取り出されて代入されました。もちろん存在しないプロパティを指定するとエラーになります。
ちなみに、一部を取り出すこともできるし、順番は関係なく取り出せます。

const personObject = {
    name: "タロウ",
    age: 20,
};

// 分割代入
const { name, age } = personObject;

//　nameだけ取り出すことができる
const { name } = personObject;

// 順番は関係ない
const { age, name } = personObject;

好きな名前で変数を取り出すこともできます。

const personObject = {
    name: "タロウ",
    age: 20,
};

// 好きな名前で分割代入をする
const { name: personName, age: personAge } = personObject;


// 私の名前はタロウです。年齢は20歳です。
const message = `私の名前は${personName}です。年齢は${personAge}歳です`;

配列の分割代入

objectと同様にararyに対しても分割代入ができます。
まずは昔の書き方をみていきましょう。

var personArray = ["タロウ", 20];


// 私の名前はタロウです。年齢は20歳です。
var message = `私の名前は${personArray[0]}です。年齢は${personArray[1]}歳です`;

これをArrayの分割代入で記述するとこんな感じになります。

const personArray = ["タロウ", 20];

// Arrayの分割代入
const [name, age] = personArray;

// 私の名前はタロウです。年齢は20歳です。
const message = `私の名前は${name}です。年齢は${age}歳です`;

※ただし、Arrayは0番目、1番目というふうに要素数と順番できまっているので、objectと違い、順番をかえることはできません

デフォルト値

関数（アロー演算子）を使うときに引数をとりますが、もしそれが代入されていなかったら？
たぶんこんな感じになるでしょう

const hello = (name) => {
    return `Hello! ${name}`;
}

hello() // Hello! undefined になる

デフォルト値は代入されない場合に使用される値を設けることができます

const hello = (name = "タロウ") => {
    return `Hello! ${name}`;
}

hello() // Hello! タロウ になる
hello("ハナコ") // Hello! ハナコ になる

デフォルト値を使うことで、意図しないエラーを防ぐことができます

また分割代入でも同様にデフォルト値を設けることができます。

const personObject = {
    name: "タロウ",
};

// 分割代入だけど存在しないageを取り出す
const { name, age } = personObject;

// 私の名前はタロウです。年齢はundefinedです。
const message = `私の名前は${name}です。年齢は${age}歳です`;

const personObject = {
    name: "タロウ",
};

// デフォルト値を使って分割代入する
const { name, age　= 20 } = personObject;

// 私の名前はタロウです。年齢は20歳です。
const message = `私の名前は${name}です。年齢は${age}歳です`;

スプレッド構文

スプレッド構文はobjectや配列に対して使えます。
スプレッド(Spread)＝広げる、なので内部の要素をひろげる（展開）してくれます。
...を使うことで要素を順番に展開できます

cosnt array_1 = [1, 2, 3];

array_1 // [1,2,3]
...array_1 // 1 2 3 というふうに順番に展開されていく

具体的にはこんな場面で使えます

const numbers  = [10, 20];

const add_numbers = (number_1, number_2) => {
    return number_1 + number_2 ; // これは大丈夫
}

//　従来はこう書いていた
add_numbers(numbers[0], numbers[1]);

// スプレッド構文を使えばこうかける
add_numbers(...numbers);

スプレッド構文をうまく使えば配列のコピーなどが簡単にできます

const array_1 = [10, 20];
const array_2 = [30, 40];

const array_1_copy = [...array_1]; // [10, 20]になる
const array_1_2_copy = [...array_1, array_2]; // [10, 20, 30, 40]になる

※arrayを=とかでそのままコピーすると、コピー元の方も影響をうけるのでこんな感じでコピーするほうがいいです

まとめ

デフォルト値は普段Ruby on Railsの開発をやっていることもあって、キーワード引数とかで馴染みがあったのですが、分割代入の概念ははじめてしりました。やっぱり昔の書き方とは大幅に違ってモダンな書き方は便利そう、、、！なれていくまで精進あるのみ。続きはその３へ、、、！