📥

【JS】React・Next.jsでよく見る変数への代入方法

に公開
JavaScript
Next.js
React
tech

はじめに

  • ReactやNext.jsのソースコードを見ていると、中々見慣れない代入方法が多数存在しました。
  • 本記事では、これら高度な代入方法の紹介に焦点を当てています。

代入方法

1. 通常の代入方法

  • 通常の代入方法は、以下のように一行ずつ代入する方法だと思います。
  • 自分自身もプレーンなJSでコードを記載する際は、こちらを多用していました。
const name = 'kurage';
const age = 25;

2. 複数の変数を1行で宣言・代入

  • 複数の変数は、以下のように1行で宣言・代入することができます。
// 1行で宣言
let name, age;

// 1行で宣言と代入
const name = 'kurage', age = 25;

3. 分割代入

  • 配列やオブジェクトの値を、それぞれ別の変数に代入する方法です。

3-1. 配列の値を分割代入

  • 配列の最初の値から順に分割代入されます。
const rank = ['tigers', 'giants', 'baystars', 'carp', 'dragons', 'swallows'];
const [first, second, third] = rank;

console.log(first);  // 'tigers'
console.log(second); // 'giants'
console.log(third);  // 'baystars'
  • また、初期値を設定することも可能です。
  • 変数の数が配列の要素の数を上回って代入する値が無いとき（undefinedのときのみ）に、この初期値が適用されます。
const profile = ['kurage', 25];
const [name='guest', age=20, residence='Japan'] = profile;

console.log(name);      // 'kurage'
console.log(age);       // 25
console.log(residence); // 'Japan'

3-2. オブジェクトの値を分割代入

  • 代入する変数をオブジェクトのプロパティと同名にすることで、同名のプロパティ値が代入できます。
const profile = {
    name: 'kurage',
    age: 25,
    residence: 'Yokohama',
};
const {name, age} = profile;

console.log(name); // 'kurage'
console.log(age);  // 25
  • 代入する変数名とプロパティ名を異なるものにしたい場合は、以下のように記載できます。
const profile = {
  name: 'kurage',
  age: 25,
};
const { name: userName, age: userAge } = profile;

console.log(userName); // 'kurage'
console.log(userAge);  // 25

4. レスト構文・スプレッド構文を使った代入

  • どちらも...を記法として用いる構文ですが、役割は真逆です。
  • それぞれを一言で言い表すと、レスト構文は集約、スプレッド構文は展開といった形になります。詳しく見ていきましょう。

4-1. レスト構文を使った代入

  • レスト構文は、配列の要素やオブジェクトのプロパティを集約して別の配列やオブジェクトに代入したり、関数の引数に渡す機能です。

配列とレスト構文

const rank = ['tigers', 'giants', 'baystars', 'carp', 'dragons', 'swallows'];
const [first, second, third, ...bClass] = rank;

console.log(first);  // 'tigers'
console.log(second); // 'giants'
console.log(third);  // 'baystars'
console.log(bClass); // ['carp', 'dragons', 'swallows']

オブジェクトとレスト構文

const shopInfo = {
    name: 'Ms.Donuts',
    open: '10:00',
    close: '22:00',
};
const {name, ...time} = shopInfo;

console.log(name); // 'Ms.Donuts'
console.log(time); // {open: '10:00', close: '22:00'}

（備考）関数とレスト構文

const dispRank = (first, second, third, ...bClass) => {
    console.log(first);  
    console.log(second); 
    console.log(third); 
    console.log(bClass);
}

dispRank('tigers', 'giants', 'baystars', 'carp', 'dragons', 'swallows');
// 'tigers'
// 'giants'
// 'baystars'
// ['carp', 'dragons', 'swallows']

4-2. スプレッド構文を使った代入

  • レスト構文とは逆に配列やオブジェクトを展開して別の配列やオブジェクトに要素を追加したり、関数の引数に渡すなどの役割を持ちます。

配列とスプレッド構文

const aClass = ['tigers', 'giants', 'baystars'];
const bClass = ['carp', 'dragons', 'swallows'];
const allRank = [...aClass, ...bClass];

console.log(allRank); // ['tigers', 'giants', 'baystars', 'carp', 'dragons', 'swallows']

オブジェクトとスプレッド構文

const baseInfo = {
    name: 'Ms.Donuts',
    location: 'Tokyo',
};
const timeInfo = {
    open: '10:00',
    close: '22:00',
};
const shopInfo = {...baseInfo, ...timeInfo};

console.log(shopInfo); // {name: 'Ms.Donuts', location: 'Tokyo', open: '10:00', close: '22:00'}

（備考）関数とスプレッド構文

const dispARank = (first, second, third) => {
    console.log(first);  
    console.log(second); 
    console.log(third); 
}
const aClass = ['tigers', 'giants', 'baystars'];

dispARank(...aClass);
// 'tigers'
// 'giants'
// 'baystars'

おわりに

今回は高度な代入方法についてお話しました。
特に、オブジェクトの分割代入や、レスト構文・スプレッド構文はよく見かける印象ですので、使いこなせたらなと思います。

Discussion