JavaScriptのDestructuring Assignment(分割代入)をマスター！| アールエフェクト

JavaScriptのDestructuring Assignment(分割代入）の構文(const {name, email} = user)が出てきたけど何をしているのかわからない、使い方がわからないという人向けに複数の例を出しながらシンプルなコードのみを使って分割代入についてわかりやすく解説を行なっています。最後まで読み通せば Destructuring Assignment(分割代入)の基本的な使用方法を理解することができます。

分割代入が使いこなせると効率的にあコードを記述することができるのでぜひマスターしましょう！

Destructuring Assignmentは日本語では”分割代入”と訳されています。

1 これまでの方法
2 分割代入を使った方法

これまでの方法

分割代入を利用しないこれまでの方法で動作確認を行います。

userオブジェクトを作成し、userのnameとemailプロパティをそれぞれnameとemailに割り当てます。


const user = {
  name: 'John Doe',
  email: 'john@example.com'
}

const name = user.name
const email = user.email

console.log(name)
console.log(email)

実行すると下記のように表示されます。


John Doe
john@example.com

分割代入を使った方法

通常の方法

上記の例を元に分割代入を利用してみます。user.nameやuser.emailに慣れていると最初は戸惑うかもしれませんが、{ }を使ってuserオブジェクト内のnameとemailプロパティをnameとemailに割り当てることができます。その結果複数行を1行で実行することができます。


const user = {
  name: 'John Doe',
  email: 'john@example.com'
}

const { name, email } = user

console.log(name)
console.log(email)

実行すると先ほどと全く同じ結果になります。


John Doe
john@example.com

取り出す値が少ない場合

オブジェクトのプロパティの数と分割代入を利用して取り出す数が異なっても問題ありません。userオブジェクトの中から必要なプロパティの値のみ取り出すことができます。


const user = {
  name: 'John Doe',
  email: 'john@example.com',
  password: 'abcdefg'
}

const { name, email } = user

console.log(name)
console.log(email)

順番を変えた場合

nameとemailの順番を変えたらどうなるのかと疑問に思う人もいるかもしれません。実際に順番を変更してどのような変化があるか確認してみましょう。


const user = {
  name: 'John Doe',
  email: 'john@example.com'
}

const { email, name } = user　// nameとemailの順番を変更

console.log(name)
console.log(email)

結果は先ほどと同じになることがわかります。今回の動作確認で割り当てる際の名前の順番は関係ないことがわかりました。


John Doe
john@example.com

割り当ての文字列を変更した場合

次に文字列を変更したらどうなるのかと疑問に思うかと思います。


const user = {
  name: 'John Doe',
  email: 'john@example.com'
}

const { name, mail } = user　// emailではなくmailに変更

console.log(name)
console.log(mail)

結果は変更したmailはundefinedになり値が割り当てられません。今回の動作確認でuserオブジェクトのプロパティ名と同じ名前を付けなければならないということがわかります。


John Doe
undefined

割り当ての文字列を変更したい場合

先ほどの例ではuserのemailプロパティをmailで割り当てしようとすると割り当てができないことがわかりました。どうしても割り当ての文字列の名前を変更したい場合はemailプロパティの横に:(コロン)を設定して割り当てたい名前を設定することで変更することができます。これは頻繁に利用される方法です。


const user = {
  name: 'John Doe',
  email: 'john@example.com'
}

const { email: mail, name } = user　// emailをmailとして割り当て

console.log(name)
console.log(mail)

実行するとemailではなくmailとして割り当てができることが分かりました。


John Doe
john@example.com

オブジェクトを直接割り当て

ここまでは一度userオブジェクトを作成してその後に分割代入を使っていましたが、userオブジェクトの作成を省いても下記のように記述することができます。


const { name, email } = { name: 'John Doe', email: 'john@example.com ', password: 'abcdefg'}

console.log(name)
console.log(email)

実行した結果はこれまでと変わりません。


John Doe
john@example.com

関数が含まれている場合

JavaScriptでは関数もオブジェクトの中に含めることができるので関数を含めた場合の動作確認も行っておきましょう。

下記ではshowNameという関数を設定していますが、分割代入での割り当ての方法は同じです。その代わり関数を実行する場合はshowName()のように()が必要です。


const user  = {
  name: 'John Doe',
  showName() {
    console.log('Name is ' + name )
  }
}

const { name, showName } = user

console.log(name)
showName()

実行すると下記のように表示され関数も問題なく処理できることがわかります。


John Doe
Name is John Doe

restオブジェクトを利用

オブジェクトの一部のプロパティのみ指定して割り当て、それ以外のプロパティを…restとして割り当てることができます。


const user = {
  name: 'John Doe',
  email: 'john@example.com',
  age: 20,
};

const { name, ...rest } = user;

console.log(name);
console.log(rest);

実行するとnameで指定したプロパティとそれ以外のプロパティの値が下記のように表示されます。


John Doe
{ email: 'john@example.com', age: 20 }

…restで指定したrestは任意の名前を設定することができるので…aaaなどの名前を設定することも可能です。

シンプルな配列の展開

下記のように配列に名前を追加します。分割代入を利用してfirst, second, thirdという名前で取り出すことができます。取り出す際の名前は任意の名前をつけることができます。


const names = ['John', 'Janes', 'Kevin'];
const [first, second, third] = names;

console.log(first, second, third);


John Janes Kevin

配列で..restを利用した場合も確認します。


const names = ['John', 'Janes', 'Kevin'];
const [first, ...rest] = names;

console.log(first, rest);

…restで設定したrestは配列として取り出すことができます。


John [ 'Janes', 'Kevin' ]

配列の展開

下記のように配列の中のにユーザに関する複数の情報が含まれており、その中からemailだけ割り当てたい場合には下記のように行うことができます。


const users = [
  {
    name: 'John Doe',
    email: 'john@example.com',
    age: 20,
  },
  {
    name: 'Jane Doe',
    email: 'jane@example.com',
    age: 19,
  },
];

for (let { email } of users) {
  console.log(email);
}

実行するとメールアドレスのみ表示することができました。


john@example.com
jane@example.com

emailのみではなくnameも割り当てたい場合は下記のように実行することができます。


for (let { name, email } of users) {
  console.log(`${name}のメールアドレスは${email}`);
}


John Doeのメールアドレスはjohn@example.com
Jane Doeのメールアドレスはjane@example.com

ネスト化したオブジェクトでの利用

ネスト化したオブジェクトでの利用方法を確認します。下記のようなオブジェクトがある場合にaddressの情報を取得したい場合は下記のように行えることはこれまでの動作確認から理解できると思います。


const user = {
  name: 'John Doe',
  email: 'john@example.com',
  age: 20,
  address: {
    zipcode: '92101',
    state: 'CA',
    city: 'San Diego',
  },
};

const { address } = user;
console.log(address);

実行するとaddressの情報を取得することができます。


{ zipcode: '92101', state: 'CA', city: 'San Diego' }

addressの中のcityのみ取得したい場合は下記のよう記述することができます。


const {
  address: { city },
} = user;
console.log(city);

実行するとcityのみ取り出すことができました。


San Diego

nameプロパティも一緒に取り出したい場合は以下のように記述できます。


const {
  name,
  address: { city },
} = user;
console.log(`${name}は${city}に住んでいます`);

実行の結果は下記の通りです。


John DoeはSan Diegoに住んでいます

Destructuringを利用しない場合は下記のように記述できます。


console.log(user.address.city);
//結果
San Diego

ここまで読み終えば実際にDestructuring Assignmentの構文を見つけても戸惑うことなく何が行われているのか理解できるはずです。