MENU
知の森へ
  1. ホーム
  2. JavaScript樹林
  3. 【JavaScript】変数の値を一行で入れ替え！分割代入を使ったスマートな代入テクニック

【JavaScript】変数の値を一行で入れ替え！分割代入を使ったスマートな代入テクニック

JavaScript樹林
目次

概要

複数の変数に値をセットする場合、通常は一行ずつ代入を行いますが、ES2015で導入された「分割代入（Destructuring Assignment）」を使用すると、配列構造を保ったまま一括で値を代入できます。

特に強力なのが「値の入れ替え（スワップ）」です。従来必要だった一時変数（temp）を使わず、非常に直感的かつ短潔に記述できるようになりました。本記事では、この構文を使って「席替えシステム」の実装例を紹介します。

仕様（入出力）

配列の分割代入構文

構文意味
[a, b] = [値1, 値2]右辺の配列の要素を、左辺の変数 a, b に順番に代入する。
[a, b] = [b, a]スワップ（入れ替え）。変数 a と b の値を交換する。
一時変数は不要。
  • 入力: 代入したい値を持つ配列（右辺）
  • 出力: 値が代入された各変数（左辺）

基本の使い方

1. まとめて代入する

配列から値を取り出し、個別の変数に定義します。

let leader, subLeader;

// 配列の0番目をleaderに、1番目をsubLeaderに代入
[leader, subLeader] = ['森', '小林'];

console.log(leader);    // "森"
console.log(subLeader); // "小林"

2. 値を入れ替える（スワップ）

一時変数 temp を使わずに、左右の値を交換します。

let user1 = '森';
let user2 = '小林';

// 右辺で新しい配列 [user2, user1] を作り、それを左辺に代入することで入れ替わる
[user1, user2] = [user2, user1];

console.log(user1); // "小林"
console.log(user2); // "森"

コード全文（HTML / JavaScript）

会議室の「席替え」をシミュレーションするツールです。

現在の「右側の席」と「左側の席」に座っているメンバーを、分割代入を使って瞬時に入れ替えます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seat Swapper</title>
    <style>
        .seat-map {
            font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
            max-width: 500px;
            padding: 20px;
            border: 2px solid #333;
            background-color: #f0f0f0;
            text-align: center;
        }
        .desk-area {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
        }
        .seat {
            width: 120px;
            padding: 15px;
            border: 2px dashed #aaa;
            border-radius: 8px;
        }
        .seat-label {
            display: block;
            font-size: 0.8rem;
            color: #888;
            margin-bottom: 5px;
        }
        .member-name {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
        }
        .btn-swap {
            padding: 10px 25px;
            font-size: 1rem;
            background-color: #009688;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }
        .btn-swap:hover {
            background-color: #00796b;
        }
    </style>
</head>
<body>

<div class="seat-map">
    <h3>会議室 席配置</h3>
    
    <div class="desk-area">
        <div class="seat">
            <span class="seat-label">左側の席</span>
            <div id="seat-left" class="member-name">--</div>
        </div>
        
        <div class="seat">
            <span class="seat-label">右側の席</span>
            <div id="seat-right" class="member-name">--</div>
        </div>
    </div>

    <button id="btn-change" class="btn-swap">席を入れ替える (Swap)</button>
</div>

<script src="seat_swapper.js"></script>
</body>
</html>

JavaScript

/**
 * 席替えスクリプト
 * 分割代入を使用した配列要素のスワップ
 */

// 1. 現在の着席メンバー（配列）
// 配列のインデックス0を左席、1を右席として管理
const currentSeats = ['大森', '中林'];

// DOM要素
const leftSeatEl = document.getElementById('seat-left');
const rightSeatEl = document.getElementById('seat-right');
const swapButton = document.getElementById('btn-change');

/**
 * 画面を描画する関数
 */
const renderSeats = () => {
    // 配列から値を取り出して表示
    // これも分割代入で個別の変数に受け取ることが可能
    const [leftMember, rightMember] = currentSeats;

    leftSeatEl.textContent = leftMember;
    rightSeatEl.textContent = rightMember;
};

/**
 * 席を入れ替える関数
 */
const swapSeats = () => {
    console.log(`入れ替え前: ${currentSeats}`);

    // ★ 分割代入によるスワップ処理
    // 右辺: [右の人, 左の人] という新しい順序の配列を作る
    // 左辺: それを元の配列の [0番目, 1番目] に再代入する
    [currentSeats[0], currentSeats[1]] = [currentSeats[1], currentSeats[0]];

    console.log(`入れ替え後: ${currentSeats}`);
    
    // 画面更新
    renderSeats();
};

// 初期表示
renderSeats();

// イベントリスナー
swapButton.addEventListener('click', swapSeats);

カスタムポイント

  • 不要な値の無視:配列の一部だけを受け取りたい場合、カンマだけでスキップできます。const [first, , third] = ['森', '林', '木'];（first は “森”、third は “木” になり、間の “林” は無視されます）
  • 残余要素の取得:スプレッド構文 ... を組み合わせることで、「残り全て」を別の配列として受け取れます。const [leader, ...members] = ['森', '小林', '大木'];（leader は “森”、members は ['小林', '大木'] になります）

注意点

  1. セミコロンの重要性行頭が [ で始まるコード（[a, b] = ...）を書く際、その前の行末にセミコロンがないと、前の行と結合されて解釈されエラーになる場合があります。JavaScriptlet a = 1 [b] = [2] // エラーになる可能性がある 安全のため、行頭にセミコロンを置いて ;[a, b] = ... と書くスタイルもあります。
  2. 存在しない要素へのアクセス右辺の配列の要素数が足りない場合、代入されなかった変数は undefined になります。const [a, b] = [1]; // a=1, b=undefinedこれを防ぐには const [a, b = 0] = [1]; のようにデフォルト値を指定します。

応用

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

関数から配列を返し、呼び出し元で分割代入を使って受け取ることで、擬似的に「複数の戻り値」を実現できます。

function getPair() {
    return ['中森', '小木'];
}

// 戻り値を直接個別の変数に格納
const [partnerA, partnerB] = getPair();

console.log(partnerA); // "中森"

まとめ

分割代入 [a, b] = [b, a] は、値の交換（スワップ）において最もスマートな記述方法です。

一時変数の定義を排除できるため、コードの行数が減り、ロジックの意図（入れ替えたいということ）が明確になります。配列操作や変数定義の際に積極的に活用しましょう。

JavaScript樹林
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

moriのアバター mori

私が勉強したこと、実践したこと、してることを書いているブログです。
主に資産運用について書いていたのですが、
最近はプログラミングに興味があるので、今はそればっかりです。

関連記事

目次