0.はじめに
React の props, Hooks の動きがわからず、何度も調べては忘れてを繰り返していました。
これは、props や Hooks をわかっていないんじゃなくて、JavaScript の分割代入をわかっていないだけでした。
「分割代入まじわからん」
って状態だったので、思考を整理するためにこの記事を書きました。
なので、初学者向けの記事となっています。
間違って解釈している所ありましたら、ご指摘いただけますと幸いです。
1.この記事を読んだら、できるようになること
「分割代入まじわからん」を克服できます。
下記の分割代入を理解できます。
- オブジェクトの分割代入 ← 今回はここ
- 配列の分割代入
- 複雑な分割代入
最終的には、こんな分割代入を理解できるようになります。
const {
nickname: userName = '名無し',
age = 132,
programmingSkills: {
frontEnd: [
[firstFrontEndLanguage, ...otherFrontEndLanguage],
[firstFrontEndFW, ...otherFrontEndFW]
],
backEnd: [
[firstBackEndLanguage, ...otherBackEndLanguage],
[firstBackEndFW, ...otherBackEndFW]
],
infra
}
} = user;
記事が長くなりそうなので、分割代入の記事を分割して書きます😏
今回は、分割代入のオブジェクト編になります。
2.目次
0. はじめに
1. この記事を読んだら、できるようになること
2. 目次
3. 環境
4. 分割代入とは
5. オブジェクトの分割代入 ← ここまで
6. 配列の分割代入
7. 複雑な分割代入
3.環境
- TypeScript: 4.7.4
4.分割代入とは
オブジェクトや配列から値を取りだして変数に代入する操作を簡略化したものです。
下記のように書くことができます。
// オブジェクトの分割代入
const { name, age } = user;
// 配列の分割代入
const [firstSkill, secondSkill] = programmingSkills;
0.はじめ にも書きましたが、
私はこれがどういう動きをしているのかが理解できていませんでした。
これがどのような動きをしているのかを説明していきます。
5.オブジェクトの分割代入
5.1.オブジェクトの分割代入
下記が、オブジェクトの分割代入となります。
// オブジェクトの分割代入
const { name, age } = user;
これがどのような意味なのかを以下で説明していきます。
5.1.1.使用するオブジェクト
下記のオブジェクトを使用して、分割代入の挙動を確認したいと思います。
type User = {
nickname: string;
age: number;
}
const user: User = {
nickname: 'daishi',
age: 35,
};
5.1.2.分割代入で記述
下記のように、分割代入で記述すると、
複数の変数定義を１行で書くことができます。
const { nickname, age } = user;
// 実行
console.log(nickname); // daishi
console.log(age); // 35
ただ、nickname, age を実行するとなぜ、
daishi, 35 が返ってくるのか理解に苦しみました。
5.1.3.分割代入を使用しないで記述
これを分割代入を使用せずに記述してみます。
そうすると、どのような動きをするのかが理解できるかと思います。
const nickname = user.nickname;
const age = user.age;
// 実行
console.log(nickname); // daishi
console.log(age); // 35
これは、
-
nickname変数の中に、userオブジェクトのnicknameプロパティを入れる -
age変数の中に、userオブジェクトのageプロパティを入れる
という意味になりますよね。
つまり、
const { nickname, age } = user;
というのは、
const nickname = user.nickname;
const age = user.age;
を省略して記述していることになります。
オブジェクトの分割代入は
- 左辺に
｛｝の中に変数を、右辺に使用するオブジェクトを記述する
(※ 左辺の変数名と右辺のプロパティ名が同じでなければならない) - 複数のオブジェクトのプロパティの変数定義を省略できる
- 取りだしたいプロパティの記述を省略できる
理解できると、めちゃ便利だなと感じますねw
5.1.4.プロパティとは別名の変数にいれる
ただ上記の書き方だと、
変数名はプロパティ名と同じでないといけません。
プロパティ名とは別の変数名をつけたいときは、下記のようにします。
const { nickname: userName, age } = user;
// 実行
console.log(userName); // daishi
nickname: userName とすることで、userName という変数名をつけることができます。
const userName = user.nickname;
という意味になります。
nickname で実行するとコンパイルエラーとなるので注意して下さい。
5.2.オブジェクトの中にオブジェクトがネストした分割代入
次に、オブジェクトの中にオブジェクトがネストしている場合はどのような記述をするのかを見ていきたいと思います。
5.2.1.使用するオブジェクト
下記のオブジェクトを用いたいと思います。
type User = {
nickname: string;
age: number;
programmingSkills: {
frontEnd: string;
backEnd: string;
}
}
const user: User = {
nickname: 'daishi',
age: 35,
programmingSkills: {
frontEnd: 'JavaScript',
backEnd: 'PHP',
}
};
5.2.2.分割代入で記述
const { nickname, age, programmingSkills: { frontEnd, backEnd } } = user;
// 実行
console.log(nickname); // daishi
console.log(age); // 35
console.log(frontEnd); // JaveScript
console.log(backEnd); // PHP
ネストすると少し複雑に感じるかもしれませんが、
先程と同じように分割代入を用いずに記述してみるとわかりやすいかと思います。
5.2.3.分割代入を使用しないで記述
const nickname = user.nickname;
const age = user.age;
const frontEnd = user.programmingSkills.frontEnd;
const backEnd = user.programmingSkills.backEnd;
// 実行
console.log(nickname); // daishi
console.log(age); // 35
console.log(frontEnd); // JaveScript
console.log(backEnd); // PHP
オブジェクトがネストしたときは、
{ programmingSkills: { frontEnd, backEnd } } = user;
のように、
オブジェクトの中オブジェクトに、変数名（プロパティ名）を記述するだけです。
これも、分割代入を用いない方法と比較すると理解しやすいかと思います。
5.3.オブジェクトの中の一部のみ使用したいとき
ここまで、オブジェクトのプロパティの全てを分割代入で記述しましたが、
プロパティの一部分だけ代入したいということがあるかと思います。
（ほとんがこの使い方ですよね…）
そのときは、次のようにして使います。
const { nickname, programmingSkills: { frontEnd } } = user;
// 実行
console.log(nickname); // daishi
console.log(frontEnd); // JaveScript
単純に、使用したいプロパティのみ記述するだけです。
説明するまでもないかもですが…w
5.4.デフォルト値
分割代入には、デフォルト値を指定することができます。
5.4.1.使用するオブジェクト
下記のような 空のオブジェクト があったとします。
type User = {
nickname?: string;
age?: number;
programmingSkills?: {
frontEnd?: string;
backEnd?: string;
}
}
const user: User = {};
5.4.2.分割代入で記述
const { nickname, age, programmingSkills } = user;
// 実行
console.log(nickname); // undefined
console.log(age); // undefined
console.log(programmingSkills); // undefined
当たり前ですが、空のオブジェクトなので、各それぞれ、undefined という結果が返ってきます。
5.4.3.デフォルト値の設定
未定義のときに、デフォルト値が入っていると便利なときがあります。
例えば、nickname が空のときは、匿名 をデフォルトで入って欲しいなどです。
デフォルト値を設定したいときは、下記のように書くことができます。
const { nickname = '名無しの権兵衛', age, programmingSkills } = user;
// 実行
console.log(nickname); // 名無しの権兵衛
console.log(age); // undefined
console.log(programmingSkills); // undefined
nickname = '名無しの権兵衛' のように
{ 変数 = デフォルト値 } = オブジェクト;
と記述するとデフォルト値を設定することができます。
注意点
デフォルト値を設定するときは、undefined の定義が必要です。
これは、デフォルト値が入る前に、undefined で弾かれてしまうからです。
5.5.まとめ
分割代入で記述する方法と分割代入で記述しない方法で比較すると、分割代入を理解することができました。
併せて他の記事も読んでいただけると嬉しいです🙇♂️