Day 22：分割代入（前半）
「必要なデータだけ、スマートに取り出すテクニック」
Day 22では、配列やオブジェクトから 必要なデータだけを取り出すためのテクニック 「分割代入（ぶんかつだいにゅう）」を学びます。
学習内容は次の3つです。
- 配列の分割代入
- オブジェクトの分割代入
- 実践：必要なデータだけ取り出す
分割代入は、コードを短く・読みやすく・意図が伝わりやすくしてくれる、とても強力な書き方です。 ステップバイステップで、初心者の方にもわかりやすく解説していきます。
分割代入とは何か
「まとまりから、欲しい部分だけを取り出す」ための書き方
これまで、配列やオブジェクトから値を取り出すときは、 次のように書いてきました。
配列の場合
const colors = ['red', 'green', 'blue'];
const first = colors[0];
const second = colors[1];
const third = colors[2];
console.log(first, second, third); // 'red', 'green', 'blue'
オブジェクトの場合
const user = {
name: '山田太郎',
age: 25,
email: 'taro@example.com',
};
const userName = user.name;
const userAge = user.age;
console.log(userName, userAge); // '山田太郎', 25
これでも問題なく動きますが、 「取り出す変数が増えるほど、同じようなコードが増えていく」という欠点があります。
そこで登場するのが 分割代入 です。
配列の分割代入
基本形：配列の要素をまとめて変数に代入する
配列の分割代入は、次のように書きます。
const colors = ['red', 'green', 'blue'];
// 配列の要素を順番に変数に代入します
const [first, second, third] = colors;
console.log(first); // 'red'
console.log(second); // 'green'
console.log(third); // 'blue'
const [first, second, third] = colors;という1行で、colors[0],colors[1],colors[2]をそれぞれ変数に代入しています。- 左側の
[]が「配列の形」を表していて、 右側のcolorsの中身が、順番に対応して代入されます。
必要な要素だけ取り出す
すべての要素を使わず、必要なものだけ取り出すこともできます。
const colors = ['red', 'green', 'blue'];
// 1番目と3番目だけ取り出したい場合
const [first, , third] = colors;
console.log(first); // 'red'
console.log(third); // 'blue'
- 真ん中の
, ,のように、2番目の位置を「空欄」にすることでスキップできます。 - 「この位置はいらない」というときに使えるテクニックです。
初期値（デフォルト値）を設定する
配列の要素が足りない場合に備えて、初期値を設定することもできます。
const colors = ['red'];
// 2番目と3番目が存在しない場合に備えて、初期値を設定します
const [first, second = 'green', third = 'blue'] = colors;
console.log(first); // 'red'
console.log(second); // 'green'（初期値）
console.log(third); // 'blue'（初期値）
- 要素が存在しないときに、指定した初期値が使われます。
- 「値がないときはこの値を使いたい」という場面で便利です。
オブジェクトの分割代入
基本形：プロパティ名で必要な値を取り出す
オブジェクトの分割代入は、次のように書きます。
const user = {
name: '山田太郎',
age: 25,
email: 'taro@example.com',
};
// オブジェクトのプロパティを、同じ名前の変数に代入します
const { name, age } = user;
console.log(name); // '山田太郎'
console.log(age); // 25
const { name, age } = user;という1行で、user.nameとuser.ageをそれぞれ変数に代入しています。- 左側の
{}が「オブジェクトの形」を表していて、 中のname,ageが「プロパティ名」と対応します。
変数名を変えたい場合（別名をつける）
そのままのプロパティ名ではなく、 別の変数名で受け取りたい場合は、次のように書きます。
const user = {
name: '山田太郎',
age: 25,
email: 'taro@example.com',
};
// nameプロパティをuserNameという変数名で受け取ります
const { name: userName, age: userAge } = user;
console.log(userName); // '山田太郎'
console.log(userAge); // 25
name: userNameのように書くことで、 「オブジェクトのプロパティ名：変数名」という対応関係を作れます。- 変数名をわかりやすくしたいときに便利です。
初期値（デフォルト値）を設定する
オブジェクトにプロパティが存在しない場合に備えて、初期値を設定することもできます。
const user = {
name: '山田太郎',
email: 'taro@example.com',
};
// ageが存在しない場合に備えて、初期値を設定します
const { name, age = 20 } = user;
console.log(name); // '山田太郎'
console.log(age); // 20（初期値）
- プロパティがないときに、指定した初期値が使われます。
- 「値が未設定なら、この値を使う」という場面で役立ちます。
実践：必要なデータだけ取り出す
ここからは、実務に近い形で「必要なデータだけ取り出す」練習をしていきます。
商品データから必要な情報だけ取り出す（オブジェクトの分割代入）
const product = {
id: 1,
name: 'ノート',
price: 100,
stock: 10,
category: '文房具',
};
// 表示に必要なのは「商品名」と「価格」だけだとします
const { name, price } = product;
console.log(`商品名：${name}／価格：${price}円`);
productにはいろいろな情報がありますが、 表示に必要なnameとpriceだけを分割代入で取り出しています。- 「必要なものだけ取り出す」という分割代入のメリットがよく出ている例です。
ユーザー一覧から、1人分の情報を分割代入で取り出す
const users = [
{ id: 101, name: '佐藤花子', email: 'hanako@example.com', isPremium: false },
{ id: 102, name: '山田太郎', email: 'taro@example.com', isPremium: true },
];
const firstUser = users[0];
// 1人目のユーザーから、名前とメールだけ取り出します
const { name, email } = firstUser;
console.log(`ユーザー名：${name}／メール：${email}`);
- 配列から1件取り出し、そのオブジェクトに対して分割代入を使っています。
- 「配列 × オブジェクト × 分割代入」という組み合わせは、実務で非常によく使われます。
ToDoデータから、タイトルと状態だけ取り出す
const todo = {
id: 1,
title: 'JavaScriptの勉強',
done: false,
createdAt: '2026-08-26',
};
// 表示に必要なのは「タイトル」と「完了状態」だけだとします
const { title, done } = todo;
const status = done ? '完了' : '未完了';
console.log(`タスク：${title}／状態：${status}`);
createdAtなどの情報はありますが、 今回の表示には不要なので、分割代入で取り出していません。- 「必要なものだけ取り出す」ことで、コードの意図がはっきりします。
Day 22 前半 練習テンプレート（ブラウザで実行可能）
以下のテンプレートをブラウザで開き、 コンソールを見ながら「配列の分割代入」「オブジェクトの分割代入」「必要なデータだけ取り出す」流れを確認してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 22 前半：分割代入 練習テンプレート</title>
</head>
<body>
<h1>Day 22 前半：分割代入（配列・オブジェクト／必要なデータだけ取り出す）</h1>
<p>ブラウザのコンソールを開いて、ログを確認してください。</p>
<script>
console.log('--- 配列の分割代入 基本 ---');
const colors = ['red', 'green', 'blue'];
// 配列の要素を順番に変数に代入します
const [first, second, third] = colors;
console.log('first：', first); // 'red'
console.log('second：', second); // 'green'
console.log('third：', third); // 'blue'
console.log('--- 配列の分割代入：必要な要素だけ取り出す ---');
const [onlyFirst, , onlyThird] = colors;
console.log('onlyFirst：', onlyFirst); // 'red'
console.log('onlyThird：', onlyThird); // 'blue'
console.log('--- オブジェクトの分割代入 基本 ---');
const user = {
name: '山田太郎',
age: 25,
email: 'taro@example.com',
};
const { name, age } = user;
console.log('name：', name); // '山田太郎'
console.log('age：', age); // 25
console.log('--- オブジェクトの分割代入：別名をつける ---');
const { name: userName, age: userAge } = user;
console.log('userName：', userName); // '山田太郎'
console.log('userAge：', userAge); // 25
console.log('--- 実践：商品オブジェクトから必要なデータだけ取り出す ---');
const product = {
id: 1,
name: 'ノート',
price: 100,
stock: 10,
category: '文房具',
};
const { name: productName, price: productPrice } = product;
console.log(`商品名：${productName}／価格：${productPrice}円`);
console.log('--- 実践：ユーザー一覧から1人分の情報を分割代入 ---');
const users = [
{ id: 101, name: '佐藤花子', email: 'hanako@example.com', isPremium: false },
{ id: 102, name: '山田太郎', email: 'taro@example.com', isPremium: true },
];
const firstUser = users[0];
const { name: firstUserName, email: firstUserEmail } = firstUser;
console.log(`ユーザー名：${firstUserName}／メール：${firstUserEmail}`);
console.log('--- 実践：ToDoデータからタイトルと状態だけ取り出す ---');
const todo = {
id: 1,
title: 'JavaScriptの勉強',
done: false,
createdAt: '2026-08-26',
};
const { title, done } = todo;
const status = done ? '完了' : '未完了';
console.log(`タスク：${title}／状態：${status}`);
console.log('--- Day 22 前半：分割代入の練習が完了しました ---');
</script>
</body>
</html>
Day 22 前半のまとめ
Day 22前半では、
- 配列の分割代入で、要素をまとめて変数に代入できること
- オブジェクトの分割代入で、プロパティをまとめて変数に代入できること
- 別名をつけたり、初期値を設定したりできること
- 「必要なデータだけ取り出す」ことで、コードの意図がはっきりし、読みやすくなること
を確認しました。
分割代入は、 「配列やオブジェクトから、欲しい部分だけをスマートに取り出す」ためのテクニックです。 これを使いこなせるようになると、 実務でよくある「データの受け渡し」「表示用の加工」が、ぐっと書きやすくなっていきます。
Day 22：分割代入（後半）
「“実務っぽいデータ”から、欲しい情報だけを抜き出す」
Day 22後半では、前半で学んだ
- 配列の分割代入
- オブジェクトの分割代入
を、より実務に近い形で使いこなしていきます。 テーマは一貫して 「必要なデータだけ取り出す」 です。
商品データ・ユーザーデータ・設定データなどを題材に、 分割代入を使うとコードがどうスッキリするのかを、ステップバイステップで見ていきます。
配列の分割代入を「実務データ」で使ってみる
商品価格リストから、先頭の2つだけ取り出す
まずはシンプルな配列からです。
const prices = [100, 200, 300, 400];
// 先頭2つだけ取り出したい場合
const [firstPrice, secondPrice] = prices;
console.log('1つ目の価格：', firstPrice); // 100
console.log('2つ目の価格：', secondPrice); // 200
prices[0]やprices[1]を個別に書く代わりに、 分割代入でまとめて取り出しています。- 「先頭から何個かだけ欲しい」という場面でよく使われます。
検索結果の配列から「最初の1件」と「残り」を分ける
検索結果などで、「最初の1件」と「残り」を分けたいことがあります。
const searchResults = ['ノート', 'ペン', '消しゴム', '定規'];
// 最初の1件と、それ以外を分けて取り出します
const [firstResult, ...otherResults] = searchResults;
console.log('最初の検索結果：', firstResult); // 'ノート'
console.log('その他の検索結果：', otherResults); // ['ペン', '消しゴム', '定規']
...otherResultsは「残り全部」をまとめて受け取る書き方です。- 「先頭だけ特別扱いしたい」「残りを別の処理に回したい」といった場面で便利です。
オブジェクトの分割代入を「実務データ」で使ってみる
商品オブジェクトから、表示に必要な情報だけ取り出す
const product = {
id: 1,
name: 'ノート',
price: 100,
stock: 10,
category: '文房具',
description: 'シンプルな無地ノートです。',
};
// 表示に必要なのは「商品名」と「価格」と「カテゴリ」だけだとします
const { name, price, category } = product;
console.log(`商品名：${name}／価格：${price}円／カテゴリ：${category}`);
productにはたくさんの情報がありますが、 今回の表示に必要なものだけ分割代入で取り出しています。- 「何が必要なのか」がコードから一目でわかるようになります。
ユーザーオブジェクトから、ログ用の情報だけ取り出す
const user = {
id: 101,
name: '佐藤花子',
email: 'hanako@example.com',
isPremium: false,
lastLoginAt: '2026-08-25T10:00:00Z',
};
// ログに残したいのは「id」と「name」と「email」だけだとします
const { id, name, email } = user;
console.log(`ログ：ユーザーID=${id}／名前=${name}／メール=${email}`);
- ログや監査用の情報など、「一部だけ取り出したい」場面で分割代入が活躍します。
設定オブジェクトから、よく使う設定だけ取り出す
const settings = {
theme: 'dark',
language: 'ja',
notifications: true,
autoSave: true,
fontSize: 16,
};
// よく使うのは「テーマ」と「言語」と「通知設定」だとします
const { theme, language, notifications } = settings;
console.log('テーマ：', theme);
console.log('言語：', language);
console.log('通知設定：', notifications);
- 「頻繁に使う設定だけ変数にしておく」という使い方もよくあります。
配列＋オブジェクト＋分割代入の組み合わせ
ここからが本番です。 「オブジェクトの配列」から、分割代入で必要な情報だけ取り出す」 という、実務で頻出のパターンを見ていきます。
商品一覧から、1件ずつ分割代入で取り出す
const products = [
{ id: 1, name: 'ノート', price: 100, stock: 10, category: '文房具' },
{ id: 2, name: 'ペン', price: 150, stock: 20, category: '文房具' },
{ id: 3, name: '消しゴム', price: 80, stock: 15, category: '文房具' },
];
// 1件ずつ取り出しながら、分割代入で必要なプロパティだけ抜き出します
for (const product of products) {
const { name, price, stock } = product;
console.log(`商品名：${name}／価格：${price}円／在庫：${stock}`);
}
for...ofで1件ずつ取り出し、 その中で分割代入を使って必要なプロパティだけ抜き出しています。- 「一覧表示」のコードがとても読みやすくなります。
ユーザー一覧から、プレミアムユーザーだけ表示する
const users = [
{ id: 101, name: '佐藤花子', email: 'hanako@example.com', isPremium: false },
{ id: 102, name: '山田太郎', email: 'taro@example.com', isPremium: true },
{ id: 103, name: '鈴木一郎', email: 'ichiro@example.com', isPremium: false },
];
for (const user of users) {
const { name, email, isPremium } = user;
if (!isPremium) {
// プレミアムユーザー以外はスキップします
continue;
}
console.log(`プレミアムユーザー：${name}／メール：${email}`);
}
- 分割代入で
isPremiumを取り出し、 条件分岐に使っています。 - 「条件チェック」と「表示用の値取り出し」を、分割代入でスッキリ書けます。
ToDo一覧から、未完了タスクだけ表示する
const todos = [
{ id: 1, title: 'JavaScriptの勉強', done: false },
{ id: 2, title: '買い物に行く', done: true },
{ id: 3, title: 'メールの返信', done: false },
];
for (const todo of todos) {
const { id, title, done } = todo;
if (done) {
// 完了済みは表示しない
continue;
}
console.log(`未完了タスク：ID=${id}／タイトル=${title}`);
}
- 分割代入で
doneを取り出し、 「未完了だけ表示する」というロジックに使っています。
関数の引数で分割代入を使う
分割代入は、関数の引数 でも使えます。 これが使えるようになると、コードの読みやすさが一段階上がります。
オブジェクトを受け取る関数で分割代入する
const product = {
id: 1,
name: 'ノート',
price: 100,
stock: 10,
category: '文房具',
};
// 商品情報を表示する関数
function printProduct({ name, price, stock }) {
// 引数のオブジェクトから、分割代入で必要なプロパティだけ受け取っています
console.log(`商品名：${name}／価格：${price}円／在庫：${stock}`);
}
printProduct(product);
- 関数の引数部分で
{ name, price, stock }と書くことで、 呼び出し側はproductを渡すだけで済みます。 - 関数の中では「何を使うのか」が明確になります。
ユーザー情報を受け取る関数で分割代入する
const user = {
id: 101,
name: '佐藤花子',
email: 'hanako@example.com',
isPremium: false,
};
function printUserSummary({ name, email, isPremium }) {
const premiumLabel = isPremium ? 'プレミアム' : '通常';
console.log(`${name}（${email}／${premiumLabel}会員）`);
}
printUserSummary(user);
- 関数の引数で分割代入を使うと、 「この関数は何の情報を使うのか」が一目でわかります。
Day 22 後半 練習テンプレート（ブラウザで実行可能）
以下のテンプレートをブラウザで開き、 コンソールで「必要なデータだけ取り出す」分割代入の動きを確認してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 22 後半：分割代入 実践テンプレート</title>
</head>
<body>
<h1>Day 22 後半：分割代入（必要なデータだけ取り出す実践）</h1>
<p>ブラウザのコンソールを開いて、ログを確認してください。</p>
<script>
console.log('--- 配列の分割代入：先頭2つだけ取り出す ---');
const prices = [100, 200, 300, 400];
const [firstPrice, secondPrice] = prices;
console.log('1つ目の価格：', firstPrice);
console.log('2つ目の価格：', secondPrice);
console.log('--- 配列の分割代入：最初の1件と残りを分ける ---');
const searchResults = ['ノート', 'ペン', '消しゴム', '定規'];
const [firstResult, ...otherResults] = searchResults;
console.log('最初の検索結果：', firstResult);
console.log('その他の検索結果：', otherResults);
console.log('--- オブジェクトの分割代入：商品から必要な情報だけ取り出す ---');
const product = {
id: 1,
name: 'ノート',
price: 100,
stock: 10,
category: '文房具',
description: 'シンプルな無地ノートです。',
};
const { name, price, category } = product;
console.log(`商品名：${name}／価格：${price}円／カテゴリ：${category}`);
console.log('--- オブジェクトの分割代入：ユーザーからログ用情報だけ取り出す ---');
const user = {
id: 101,
name: '佐藤花子',
email: 'hanako@example.com',
isPremium: false,
lastLoginAt: '2026-08-25T10:00:00Z',
};
const { id, name: userName, email } = user;
console.log(`ログ：ユーザーID=${id}／名前=${userName}／メール=${email}`);
console.log('--- オブジェクトの配列＋分割代入：商品一覧を表示 ---');
const products = [
{ id: 1, name: 'ノート', price: 100, stock: 10, category: '文房具' },
{ id: 2, name: 'ペン', price: 150, stock: 20, category: '文房具' },
{ id: 3, name: '消しゴム', price: 80, stock: 15, category: '文房具' },
];
for (const p of products) {
const { name: pName, price: pPrice, stock: pStock } = p;
console.log(`商品名：${pName}／価格：${pPrice}円／在庫：${pStock}`);
}
console.log('--- オブジェクトの配列＋分割代入：プレミアムユーザーだけ表示 ---');
const users = [
{ id: 101, name: '佐藤花子', email: 'hanako@example.com', isPremium: false },
{ id: 102, name: '山田太郎', email: 'taro@example.com', isPremium: true },
{ id: 103, name: '鈴木一郎', email: 'ichiro@example.com', isPremium: false },
];
for (const u of users) {
const { name: uName, email: uEmail, isPremium } = u;
if (!isPremium) continue;
console.log(`プレミアムユーザー：${uName}／メール：${uEmail}`);
}
console.log('--- 関数の引数で分割代入 ---');
function printProduct({ name, price, stock }) {
console.log(`商品名：${name}／価格：${price}円／在庫：${stock}`);
}
printProduct(product);
console.log('--- Day 22 後半：分割代入の実践が完了しました ---');
</script>
</body>
</html>
Day 22 後半のまとめ
Day 22後半では、
- 配列の分割代入で「先頭だけ」「残り全部」をスマートに取り出すこと
- オブジェクトの分割代入で「必要なプロパティだけ」を抜き出すこと
- オブジェクトの配列と組み合わせて、一覧データから必要な情報だけ取り出すこと
- 関数の引数で分割代入を使い、「この関数が何を使うのか」を明確にできること
を確認しました。
分割代入は、 「データの中から、欲しい部分だけをきれいに取り出す」ための技術 です。 これを使いこなせるようになると、 実務でよくある「データの受け渡し」「一覧表示」「ログ出力」などが、 驚くほど読みやすいコードで書けるようになっていきます。