JavaScriptの分割代入入門【配列・オブジェクト】

JavaScript 分割代入とは？

分割代入（ぶんかつだいにゅう）は、配列やオブジェクトから値を取り出して変数に代入する、シンプルな書き方です。

従来の書き方より短く、読みやすいコードが書けます。

配列の分割代入

const fruits = ['りんご', 'バナナ', 'みかん'];

// 従来の書き方
const a = fruits[0];
const b = fruits[1];

// 分割代入
const [first, second, third] = fruits;
console.log(first);  // りんご
console.log(second); // バナナ

// 一部をスキップ
const [, , last] = fruits;
console.log(last); // みかん

// 残りをまとめる（レスト構文）
const [head, ...rest] = fruits;
console.log(head); // りんご
console.log(rest); // ['バナナ', 'みかん']

🔥 if文入門で実践してみましょう。

オブジェクトの分割代入

const user = { name: '田中', age: 15, email: '[email protected]' };

// 従来の書き方
const name1 = user.name;
const age1  = user.age;

// 分割代入
const { name, age } = user;
console.log(name); // 田中
console.log(age);  // 15

// 別名をつける
const { name: userName } = user;
console.log(userName); // 田中

// デフォルト値
const { score = 0 } = user;
console.log(score); // 0（userにscoreがないのでデフォルト値）

💡 文字列操作入門で基礎を確認できます。

関数の引数で使う

// オブジェクトを引数に取る関数
function greet({ name, age }) {
  console.log(\`\${name}さん（\${age}歳）、こんにちは！\`);
}

greet({ name: '田中', age: 15 });
// 田中さん（15歳）、こんにちは！

🔗 あわせてPromise入門もチェックしてみましょう。

分割代入の実践的な使い方

分割代入を使った実践的な例を紹介します。

オブジェクトの分割代入

APIからユーザー情報を取得したとき、オブジェクトの中から必要なプロパティだけを取り出せます。たとえばユーザーオブジェクトから名前とメールアドレスだけを取り出すとき、分割代入を使えば1行で書けます。

分割代入を使わない場合、user.nameやuser.emailのように毎回オブジェクト名を書く必要があります。分割代入を使えば、nameやemailだけで値にアクセスできるので、コードが短くなります。

デフォルト値を設定することもできます。プロパティが存在しない場合に使われる値を指定できます。たとえば年齢が未設定のとき「不明」と表示したい場合に便利です。

オブジェクトの基本を復習したい人は「JavaScriptオブジェクト入門」を読んでみてください。

配列の分割代入

配列の要素を順番に変数に入れることもできます。最初の要素を1つ目の変数に、2番目の要素を2つ目の変数に、というように対応します。

配列の分割代入が便利な場面を紹介します。

• 関数から複数の値を返すとき
• 座標（x, y）のペアを扱うとき
• 日付文字列を年・月・日に分けるとき

不要な要素はカンマだけ書いてスキップできます。たとえば2番目の要素だけ欲しいとき、1番目の位置にはカンマだけ書いて飛ばします。

配列の基本を復習したい人は「JavaScript配列入門」を読んでみてください。

関数の引数での分割代入

関数の引数にオブジェクトを渡すとき、分割代入を使うと必要なプロパティだけを受け取れます。引数の部分に波かっこを書いて、欲しいプロパティ名を列挙します。

この書き方のメリットは、関数の中で何を使っているかが一目でわかることです。また、引数の順番を気にする必要がなくなります。

分割代入でよくあるミス

ミス1：オブジェクトと配列の記号を間違える

オブジェクトの分割代入は波かっこ、配列の分割代入は角かっこ[]を使います。間違えるとエラーになるか、意図しない値が入ります。

ミス2：存在しないプロパティ名を書く

オブジェクトの分割代入で、存在しないプロパティ名を書くとundefinedが入ります。プロパティ名のスペルを正確に書きましょう。

ミス3：ネストされたオブジェクトの分割代入が複雑になる

オブジェクトの中にオブジェクトがある場合、分割代入を入れ子にできます。しかし、深くなりすぎると読みにくくなります。2段階以上のネストは避けて、一度変数に入れてから再度分割代入するほうが読みやすいです。

ミス4：constで宣言した変数に再代入しようとする

分割代入でconstを使って宣言した変数は、あとから値を変えられません。値を変える可能性があるならletを使いましょう。

分割代入は最初は不思議な書き方に見えるかもしれません。でも慣れると、コードが短く読みやすくなる便利な機能です。まずはオブジェクトから1〜2個のプロパティを取り出す簡単な例から始めてみましょう。

分割代入はモダンなJavaScriptでは当たり前のように使われています。React、Vue、Angularなどのフレームワークのコードを読むと、ほぼ必ず分割代入が登場します。今のうちに使い方を覚えておけば、将来フレームワークを学ぶときにスムーズに理解できます。また、APIから取得したJSONデータを処理するときにも、分割代入を使えば必要なデータだけを簡潔に取り出せます。実践的なコードを書くほど、分割代入のありがたみを実感するはずです。

まとめ

分割代入を使いこなすと、コードがシンプルになります。レッスンでさらに実践的な使い方を学んでみましょう。