【JavaScript】分割代入とは何か？(変数名を変える方法(変更),必要なデータだけ取り出す, デフォルト値, 多次元/ネストしたデータ)

javascript-prograshi（プロぐらし）-kv JavaScript
記事内に広告が含まれていることがあります。

プロパティの値を取得するときに、obj.prop1、obj.prop2…と、オブジェクトからデータを取り出すたびに毎回ドット（.）を何度も使っていませんか？

本記事では「分割代入」を使って、必要なデータだけを簡単に取り出す方法を解説しています。

プロパティ名とは別の変数名で使いたい場合の変数名の変更方法や、値が存在しない場合の安全な処理（デフォルト値）、さらには多次元（ネスト）したデータを分割代入で取得する方法も実例を交えて解説しています。


分割代入とは何か？

JavaScriptの分割代入とは、配列やオブジェクトから、要素やプロパティを取り出して、個別の変数に代入する便利な構文です。

分割代入をすることで一つ一つ let や constで定義せずに、まとめて記述することができます。

補足

分割代入を英語で「Destructuring Assignment」と呼びます。


配列の分割代入

配列を分割代入する場合は、位置に基づいて変数に代入します。

const numbers = [10, 20, 30];

// 分割代入を使用
const [a, b, c] = numbers;

console.log(a); // 10
console.log(b); // 20
console.log(c); // 30


上記では、以下のようになり、a, b, cにそれぞれ該当する値が入ります。

[a, b, c] = [10, 20, 30];


なお、上記のコードは以下のように個別に定数を代入したものと同じです。

const numbers = [10, 20, 30];

const a = numbers[0];
const b = numbers[1];
const c = numbers[2];


オブジェクトの分割代入

プロパティ名で指定する

オブジェクトのプロパティを、そのプロパティ名に基づいて変数に代入します。

配列と異なり、順序は関係ありません。（プロパティ名で識別します！）

const user = { name: 'Alice', age: 30 };

// 分割代入を使用
const { age, name } = user;

console.log(name); // 'Alice'
console.log(age);  // 30

これは以下の処理と同じです。

const user = { name: 'Alice', age: 30 };

const name = user.name;
const age = user.age;


変数名を変える

基本はプロパティ名をそのまま変数名としますが、コロンを使って新しい変数名を指定することで、変数名を変更することができます。

{ プロパティ名: 新しい変数名 }


▼実例

const user = { name: 'Alice', age: 30 };

// 分割代入を使用
const { age:userAge, name:userName } = user;

console.log(userName); // 'Alice'
console.log(userAge);  // 30
注意点

新しい変数名をつけるときは必ず「新しい変数名が後ろ」です。

逆にすると、指定したプロパティが見つからないためundefinedが代入されます。※エラーにならないことも注意が必要です。

const user = { name: 'Alice', age: 30 };

// 間違い！
const { userAge: age, userName: name } = user;

console.log(age); // undefined
console.log(name); // undefined


必要なデータだけ取り出せる！

分割代入の便利なポイントに「必要なデータだけ取り出せる」という点があります。


配列の例

例えば、以下のように配列で複数のデータが渡されたとします。

このとき最初の２つだけが欲しければ２つだけ記述します。自動で該当しない値は無視されます。

const numbers = [10, 20, 30, 40, 50, 60, 70];

const [a, b] = numbers;

console.log(a); // 10
console.log(b); // 20


スキップしたい場合は, ,とします。

const numbers = [10, 20, 30, 40, 50, 60, 70];

const [a, ,c, , ,f] = numbers;

console.log(a); // 10
console.log(c); // 30
console.log(f); // 60


オブジェクトの場合

オブジェクトの場合は、欲しいプロパティ名だけを記述すればOKです。

const user = { name: 'Alice', age: 30, gender:'female', height:160, weight: 50, child:false };

const { age, name } = user;

console.log(name); // 'Alice'
console.log(age);  // 30


デフォルト値の指定

分割代入では代入元に該当のデータがない場合のためにデフォルト値を設定することができます。

const user = { name: 'Alice', age: 30 };

const { age=20, name, city='Tolyo' } = user;

console.log(name); // 'Alice'
console.log(age);  // 30
console.log(city); // 'Tokyo'

代入元のデータにデータが存在する場合は、デフォルト値は自動で上書きされます。


注意点

デフォルト値は元の値が「undefined」のときのみ機能します。nullの場合はnullが入ります。

const person = { job: undefined, hobby: null };

// job は undefined なので、デフォルト値が適用される
// hobby は null なので、デフォルト値は適用されない。
const { job = '不明', hobby = '不明' } = person;

console.log(job);   // '不明'
console.log(hobby); // null


多次元の分割代入（ネスト）

多次元配列の分割代入（ネストした配列）

多次元配列の場合、左辺にも配列と同じようにネストした記述をすることで、深い階層の要素を取り出すことができます。

const userData = [
  101, 
  'Kenji', 
  ['Reading', 'Coding', 'Hiking']
];

//分割代入
const [
  userId, 
  userName, 
  [hobby1, hobby2] // ネストした分割代入
] = userData;

console.log(userId);   // 101
console.log(userName); // 'Kenji'
console.log(hobby1);   // 'Reading'
console.log(hobby2);   // 'Coding'




多次元オブジェクトの分割代入（ネストしたオブジェクト）

オブジェクトの中にさらにオブジェクトがネストされている場合、左辺にもオブジェクトと同じようにネストした記述をすることで、深い階層のプロパティを取り出すことができます。

const companyInfo = {
  name: 'Tech Corp',
  founded: 2010,
  location: { 
    country: 'Japan',
    city: 'Tokyo',
    postalCode: '100-0001'
  }
};

// nameと、city、countryを取り出す
const {
  name,
　// locationプロパティ自体は変数として作成せず、内部だけを分割
  location: { city,　country　} 
} 
= companyInfo;

console.log(name); // 'Tech Corp'
console.log(city);        // 'Tokyo'
console.log(country);     // 'Japan'
// console.log(location); // エラー: location は変数として宣言されていません
注意点

ネストしたプロパティのデータを取得する場合に「プロパティ名: {}」としたときのプロパティ名は代入されません。


ネストしたデータも分割代入したい場合

ネストしたデータ自体も分割代入したい場合は、そのプロパティ単体も記載する必要があります。

const companyInfo = {
  name: 'Tech Corp',
  founded: 2010,
  location: { 
    country: 'Japan',
    city: 'Tokyo',
    postalCode: '100-0001'
  }
};

// nameと、city、country, locationを取り出す
const {
  name,
　location,
  location: { city,　country　} 
} 
= companyInfo;

console.log(name); // 'Tech Corp'
console.log(city);        // 'Tokyo'
console.log(country);     // 'Japan'
console.log(location);    // locationのオブジェクトを返す


ただし、上記の記述はlocationが2回でてきて冗長なため、以下のように記述することが推奨です。

const companyInfo = {
  name: 'Tech Corp',
  founded: 2010,
  location: { 
    country: 'Japan',
    city: 'Tokyo',
    postalCode: '100-0001'
  }
};

// nameと、city、country, locationを取り出す
const { name, location } = companyInfo;
const { city, country } = location


console.log(name); // 'Tech Corp'
console.log(city);        // 'Tokyo'
console.log(country);     // 'Japan'
console.log(location);    // locationのオブジェクトを返す


関数の引数で分割代入を使う

関数の引数で分割代入を使うことで、どんなデータを渡しているかを明確にすることができます。

例えば、分割代入を使わない場合は、関数内で使うプロパティを個別に代入する必要があります。

function renderUser(props) {
  const title = props.title || 'ユーザー情報';
  const name = props.user.name;
  const role = props.user.role;

  console.log(`${title}: ${name} (${role})`);
}

const data = { title: 'プロフィール', user: { name: 'Jiro', role: 'Engineer' } };
renderUser(data); 
// 出力: プロフィール: Jiro (Engineer)


分割代入を使うことで、引数内に｛｝で直接記述することができます。

function renderUser({ title = 'ユーザー情報', user: { name, role } }) {
  console.log(`${title}: ${name} (${role})`);
}


const data = { title: 'プロフィール', user: { name: 'Jiro', role: 'Engineer' } };
renderUser(data);
// 出力: プロフィール: Jiro (Engineer)
タイトルとURLをコピーしました