メインコンテンツまでスキップ

オブジェクトの分割代入 (destructuring assignment)

見かたに慣れていないと使いづらい機能ではありますが、分割代入という便利な代入方法があります。

分割代入のなかった時代はこうしていた#

あるタイプエイリアスWildがあったとします(上述のものと同一です)。

typescript
type Wild = {
  name: string;
  no: number;
  genre: string;
  height: number;
  weight: number;
};
typescript
type Wild = {
  name: string;
  no: number;
  genre: string;
  height: number;
  weight: number;
};

このWildを変数で受けたあとnameとnoとgenreだけを使いたい時、かつては次のようにする必要がありました。

typescript
const pokemon: Wild = safari();
const name: string = pokemon.name;
const no: number = pokemon.no;
const genre: string = pokemon.genre;
typescript
const pokemon: Wild = safari();
const name: string = pokemon.name;
const no: number = pokemon.no;
const genre: string = pokemon.genre;

これを簡素に代入まで済ませてしまおうというのが分割代入の目的です。

分割代入を使うとこうなる#

分割代入は、オブジェクトを返す関数などの戻り値に直接オブジェクト自体を書くような方式で使います。たとえば上記の例だとこのようになります。

typescript
const { name, no, genre }: Wild = safari();
typescript
const { name, no, genre }: Wild = safari();

もちろんheight, weightが必要なときは書き足せば定数として設定されます。このときは1行目の宣言(今回はconst)によって変数か定数かが決まるので、変数も定数も欲しい時は分けて書いてください。

ネストしたオブジェクトの分割代入#

オブジェクトの中のオブジェクト、つまりネストした状態でも問題なく使うことができます。先ほど出てきた次の例で考えます。

typescript
type Country = {
  name: string;
  capitalCity: string;
};
type Continent = {
  name: string;
  canada: Country;
  us: Country;
  mexico: Country;
};
typescript
type Country = {
  name: string;
  capitalCity: string;
};
type Continent = {
  name: string;
  canada: Country;
  us: Country;
  mexico: Country;
};

このような分割代入をすることができます。

typescript
const {
  name,
  canada: { name },
  us: { name },
  mexico: { name },
} = america();
typescript
const {
  name,
  canada: { name },
  us: { name },
  mexico: { name },
} = america();

しかしながら、この例ではnameという名前が重複してしまっているため、理論上は正しいのですが同じ名前の定数の多重定義となってしまっています。

分割代入しつつ名前を変更する#

分割代入はプロパティの名前をそのまま継ながなければならないかというとそうではありません。好きな名前に変更することができます。先ほどのnameが重複してしまった例は次のように書き直せます。

typescript
const {
  name: continentName,
  canada: { name: canadaName },
  us: { name: usName },
  mexico: { name: mexicoName },
} = america();
typescript
const {
  name: continentName,
  canada: { name: canadaName },
  us: { name: usName },
  mexico: { name: mexicoName },
} = america();

関連情報#