【JavaScript】分割代入とは？使い方や活用例を初心者向けにわかりやすく解説

プログラミング言語•2025/2/15

はじめに

JavaScriptでは複数のデータをまとめて扱う場面が多くあります。
たとえばAPIから受け取るレスポンスや、関数が返す複数の値を整理して扱いたいときがそうです。
こうしたときに、分割代入はとても便利な書き方です。

分割代入は、配列やオブジェクトから必要な部分だけを取り出す構文で、コードをスッキリまとめながら可読性を高める効果があります。
実際の現場でも多用されるため、初心者のうちに覚えておくと後々とても助かるでしょう。

この文章では、分割代入がどのように役立つのか、配列やオブジェクトなどでどのように使えるのか、そして実際の開発でどのように活用できるのかを具体例を交えて説明します。
最終的に、読者の皆さんが「分割代入ってこういう書き方で、こんなところで使えるんだ」とイメージを持てるようになることを目指しています。

この記事を読むとわかること

分割代入の基本的な書き方
配列やオブジェクトでの具体的な利用例
実務でよくある使用シーンと注意点
関数の引数や返り値で分割代入を活用する方法

分割代入とは

分割代入は、JavaScriptの配列やオブジェクトから特定の値だけを取り出すための構文です。
従来の書き方であれば、配列の要素やオブジェクトのプロパティを1つずつ変数に格納するために何度も変数宣言しなくてはなりません。
しかし分割代入を使うと、まとまった形で変数宣言と代入が同時に行えます。

たとえば、配列の一番目と二番目の要素を順番に取り出したい場合、従来の書き方なら以下のように書いていたかもしれません。


const array = [10, 20, 30];

// 従来の書き方
const first = array[0];
const second = array[1];

console.log(first);  // 10
console.log(second); // 20

分割代入を使うと、次のようにまとめて宣言と代入を同時に行えます。


const array = [10, 20, 30];

// 分割代入を使った書き方
const [first, second] = array;

console.log(first);  // 10
console.log(second); // 20

オブジェクトの場合も同様に、プロパティ名に基づいて変数を宣言できます。
プロパティの順番ではなく、キーの名前を使うのがオブジェクトの分割代入の特徴です。

こうした分割代入によって、コードがより短く、意図が明確になります。
実際の現場でも、「取り出す値が明確に分かりやすい」という利点から、多くのエンジニアが採用しています。

配列の分割代入

配列に対する分割代入は、要素の並び順で取り出す位置が決まるのがポイントです。
ここでは、基本的な例から少し発展的な例まで見てみましょう。

基本的な配列の分割代入

先ほどの例と同様、配列の先頭から順番に変数を対応させる形になります。


const scores = [80, 90, 75];

const [math, english, science] = scores;

console.log(math);    // 80
console.log(english); // 90
console.log(science); // 75

ここでの注意点は、変数の数と配列の要素数が一致しない場合でもエラーにならないことです。
たとえば配列に4つ目、5つ目の要素があるのに変数を2つしか用意していない場合、不要な要素は無視されます。
逆に変数が多く、配列が要素を持っていない場合には undefined となります。

スキップと残余要素の取得

要素の一部をスキップしたい場合は、空のカンマで飛ばすことができます。


const items = ["apple", "banana", "grape", "orange"];

// 2番目の要素をスキップ
const [firstFruit, , thirdFruit] = items;

console.log(firstFruit); // "apple"
console.log(thirdFruit); // "grape"

また、配列の残りの要素をまとめて取り出す際には、レストパラメータを使う方法があります。


const items = ["apple", "banana", "grape", "orange"];

// 分割代入に...を使う
const [first, second, ...remaining] = items;

console.log(first);     // "apple"
console.log(second);    // "banana"
console.log(remaining); // ["grape", "orange"]

このようにして残りの要素をまとまりとして一つの配列に格納できるため、ループ処理などで活用しやすくなります。

デフォルト値の設定

配列の分割代入でも、要素が存在しない場合にデフォルト値を割り当てることが可能です。


const coords = [10];

// secondCoordには値が無いため、デフォルト値の20が入る
const [firstCoord, secondCoord = 20] = coords;

console.log(firstCoord);  // 10
console.log(secondCoord); // 20

こうしておくと、要素が未定義でも変数には希望する値が設定されます。
実務でも、「データが足りないときには何か適切な初期値を入れておきたい」ような状況で多用されます。

オブジェクトの分割代入

オブジェクトの分割代入は、配列とは違いキー (プロパティ名)で値が決まるのが特徴です。
この章では基本的なオブジェクト分割代入やプロパティ名変更の方法などを解説します。

基本的なオブジェクトの分割代入

オブジェクトから複数のプロパティをまとめて変数にする例を見てみましょう。


const user = {
  name: "Alice",
  age: 25,
  country: "Japan",
};

const { name, age, country } = user;

console.log(name);    // "Alice"
console.log(age);     // 25
console.log(country); // "Japan"

ポイントは、配列のように順番ではなくプロパティ名を一致させて取り出すことです。
順番を意識しなくて良いので、オブジェクトの構造が複雑でも読みやすいコードを維持しやすいと言えます。

プロパティ名の変更（エイリアス）

オブジェクトの分割代入では、変数名をプロパティ名と異なる名前に変えたい場合、次のように書きます。


const user = {
  fullName: "John Smith",
  age: 30,
};

const { fullName: userName, age: userAge } = user;

console.log(userName); // "John Smith"
console.log(userAge);  // 30

{ プロパティ名: 変数名 } の形で書くことにより、もともとのオブジェクトのキーは変えずに、手元の変数名だけ変更可能です。
分かりやすいネーミングを付け直せるため、プロジェクトで使われる用語に合わせて柔軟に命名できるという利点があります。

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

オブジェクトの中にさらにオブジェクトが入っているようなケースでも分割代入を使えます。
実務ではAPIレスポンスが多層のオブジェクトになっていることもあり、こうした書き方はよく登場します。


const product = {
  id: 101,
  info: {
    name: "Notebook",
    price: 500,
  },
};

const {
  id,
  info: { name, price },
} = product;

console.log(id);    // 101
console.log(name);  // "Notebook"
console.log(price); // 500

この例のように、infoオブジェクトの中身を直接取り出す形にすることで、不要な階層アクセスを省略できます。
ただし、ネストが深くなりすぎると可読性が下がる場合もあるので、状況に応じて適切に構造を分割しましょう。

オブジェクトのデフォルト値

オブジェクトの場合も、存在しないキーに対してデフォルト値を割り当てたい場面はよくあります。


const person = { name: "Bob" };

// ageプロパティが無いのでデフォルト値30が入る
const { name, age = 30 } = person;

console.log(name); // "Bob"
console.log(age);  // 30

このように、オブジェクト内にキーが無い、あるいは値が undefined の場合に代替値を設定できます。
実務ではサーバーから取得したデータが欠損している場合などを想定し、エラーを防ぐために活用することが多いです。

分割代入の活用シーン

分割代入は、コードをコンパクトにできるだけでなく、読みやすさや変更への強さを高める効果があります。
ここでは、実務の現場でよく見る活用シーンについて簡単に触れていきます。

複数の設定値を一度に取り出す

設定ファイルや設定オブジェクトから、必要なプロパティだけをピックアップすることは頻繁にあります。
分割代入を使えば、どの設定を使っているのか明確に書けます。


const config = {
  mode: "development",
  port: 3000,
  debug: true,
};

const { mode, port, debug } = config;

// mode, port, debug が明示的に変数として利用可能

設定の内容を把握しやすくなるため、「あとで別のプロパティも必要になった」ときにも読みやすい書き方を維持できます。

APIレスポンスや関数の戻り値処理

実際のAPI通信やライブラリの返すオブジェクトは多くのプロパティを含むことがあります。
とくに、必要なデータだけ切り出して変数にしたい場合に分割代入は有効です。


// 例: サーバーからユーザー情報を取得
const response = {
  status: 200,
  data: {
    userId: 123,
    userName: "Charlie",
    email: "charlie@example.com",
  },
};

// 必要な部分だけ取り出す
const {
  data: { userId, userName },
} = response;

console.log(userId);   // 123
console.log(userName); // "Charlie"

これは配列形式のレスポンスにも同様に活用できますし、ネスト構造が複雑なケースにおいても取り出しやすさは変わりません。
エラー処理や条件分岐と組み合わせれば、必要な情報だけを抜き出して素早く扱うことができます。

コードの可読性・保守性の向上

分割代入を使わない場合、いちいちオブジェクト名や配列名を書いてアクセスするため、コードが冗長になりやすいです。
また、どの変数がどこから来ているか分かりづらくなる恐れもあります。

一方で分割代入を使えば、どのプロパティをどの変数に割り当てているかがひと目で分かるため、後からコードを読んだときの理解がスムーズです。
現場では「可読性」を重視することが多いので、しっかりとした分割代入は喜ばれることが多いです。

関数やパラメータでの分割代入応用

分割代入は変数の宣言時だけでなく、関数の引数や戻り値として使うテクニックも多用されます。
ここでは関数にオブジェクトを渡すパターンや、戻り値が複数あるときの例を示します。

関数引数での分割代入

オブジェクトで多数のパラメータを渡す関数において、分割代入をそのまま引数のところで使う方法があります。


function createUser({ userName, age, country }) {
  return `${userName}は${age}歳で、${country}出身です`;
}

const result = createUser({
  userName: "Dave",
  age: 28,
  country: "Canada",
});

console.log(result); // "Daveは28歳で、Canada出身です"

関数を呼び出す際にオブジェクトを渡すことで、渡す側・受け取る側どちらも引数の意味が分かりやすくなります。
また順番を気にしなくてよい点も魅力です。

関数からの複数戻り値を受け取る

関数が複数の値を返す場合、配列やオブジェクトを使ってまとめることがあります。
これを分割代入で受け取れば、呼び出し側のコードがシンプルに整理できます。


function calculateRectangle(width, height) {
  const area = width * height;
  const perimeter = 2 * (width + height);

  return { area, perimeter };
}

const { area, perimeter } = calculateRectangle(5, 10);

console.log(area);     // 50
console.log(perimeter); // 30

たとえばこのように、戻り値をオブジェクトにすることで、呼び出し側も分割代入を使い、どの値がどの変数に格納されるかが明快になります。

分割代入を使う際の注意点

分割代入は便利な一方で、使い方を誤るとかえって可読性が落ちる場合があります。
この章では、分割代入を活用するうえで意識しておきたい注意点を紹介します。

ネストが深くなりすぎないようにする

前述のようにオブジェクトが多層になっている場合でも、分割代入で一気に値を取り出すことは可能です。
しかしネストがあまりにも深いと、分割代入の記述が複雑になり、どのプロパティがどの変数に対応しているか理解しづらくなります。

ネストが深い場合は、一度変数に格納したうえで必要な部分だけ分割代入するなど、コードを複数行に分けて整理する方が読みやすくなることがあります。

未定義のキーや要素へのアクセス

分割代入は、オブジェクトや配列に無いキー・要素に対してアクセスした場合は undefined になります。
それ自体はエラーではありませんが、意図せず undefined が入り込んで不具合が起きることがあるため注意しましょう。

このような場面では、オブジェクトを受け取る前に型チェックやキーが存在するかどうかを確認する仕組みを用意しておくと安心です。

コードの可読性を優先する

分割代入が使えるからといって、何でもかんでも分割代入を使えば良いわけではありません。
最終的に、コードを読む人がすぐに内容を理解できるかどうかが大切です。
明示的に object.property と書いたほうが分かりやすいケースもあります。

「この変数はどこから来ているのか？」を誰が見てもすぐに把握できるように、必要に応じて分割代入と従来のアクセス方法を使い分けるのがおすすめです。

まとめ

ここまで、JavaScriptの分割代入について解説してきました。

分割代入は、配列やオブジェクトから必要な情報を効率よく抜き出す仕組みです。
実務ではAPIレスポンスや設定オブジェクトなど、配列やオブジェクトを多用する場面が数多くあります。
そこに分割代入を組み込むと、コードが短く分かりやすくなり、メンテナンスもしやすくなるでしょう。

一方で、ネストが深くなりすぎると読みづらくなることや、存在しないキーを参照してしまうリスクもあるため、扱いには注意が必要です。
それでも、うまく活用すれば非常に便利なテクニックであることは間違いありません。

ぜひ自分の書くコードでも、配列やオブジェクトを取り扱う機会があれば、積極的に分割代入を使ってみてください。
初心者のうちから分割代入に慣れておけば、実務でもスムーズに活かせるはずです。