【JavaScript】複合代入演算子でコードを短く書く！計算と代入の効率化ガイド

2026年1月23日

概要

変数の値を更新する際、「現在の値に数値を足して、その結果をまた同じ変数に戻す」という処理は頻繁に発生します。

JavaScriptの「複合代入演算子」を使用すると、こうした計算と代入のプロセスを短縮して記述でき、コードの可読性が向上します。

本記事では、足し算、引き算、掛け算などの基本演算に加え、文字列の結合にも使える複合代入演算子の活用法を解説します。

仕様（入出力）

入力: 数値または文字列が格納された変数
出力: 演算後の新しい値（コンソールログ）

基本の使い方

複合代入演算子は、演算（+, -, *など）と代入（=）を1つにまとめた記法です。

複合代入演算子一覧

演算子	構文	意味（展開形）	用途の例
`=`	`x = y`	`x = y`	通常の代入
`+=`	`x += y`	`x = x + y`	加算、文字列結合
`-=`	`x -= y`	`x = x - y`	減算（カウントダウンなど）
`*=`	`x *= y`	`x = x * y`	乗算（倍率計算など）
`/=`	`x /= y`	`x = x / y`	除算（分割など）
`%=`	`x %= y`	`x = x % y`	剰余（ループ処理など）
`**=`	`x **= y`	`x = x ** y`	べき乗

コード全文（HTML / JavaScript）

HTML (index.html)

結果確認用のHTMLです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>複合代入演算子デモ</title>
    <script src="assignment-demo.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Consoleを確認してください</h1>
        <p>計算結果が出力されています。</p>
    </div>
</body>
</html>

JavaScript (assignment-demo.js)

ゲームのステータス計算やメッセージ構築を例に、各演算子の挙動を確認します。

/**
 * 複合代入演算子の活用デモ
 */
const runAssignmentDemo = () => {
    console.log('--- 1. 数値の加算代入 (+=) ---');
    
    let currentScore = 100;
    let bonusPoint = 50;
    
    // currentScore = currentScore + bonusPoint と同じ
    currentScore += bonusPoint; 
    console.log(`スコア更新: ${currentScore}`); // 150


    console.log('--- 2. 文字列の結合代入 (+=) ---');
    
    let greeting = "こんにちは、";
    let userName = "ゲストさん";
    
    // greeting = greeting + userName と同じ
    // 文字列の場合は後ろに連結されます
    greeting += userName; 
    console.log(`メッセージ: ${greeting}`); // "こんにちは、ゲストさん"


    console.log('--- 3. 乗算代入 (*=) ---');
    
    let attackPower = 20;
    let multiplier = 3; // 3倍界王拳
    
    // attackPower = attackPower * multiplier と同じ
    attackPower *= multiplier;
    console.log(`攻撃力: ${attackPower}`); // 60


    console.log('--- 4. その他の演算子 (/=, %=, **=) ---');
    
    let totalPizza = 8;
    // 半分にする
    totalPizza /= 2; 
    console.log(`ピザの残り: ${totalPizza}`); // 4

    let loopCounter = 10;
    // 3で割った余りに更新
    loopCounter %= 3; 
    console.log(`余り: ${loopCounter}`); // 1

    let baseNumber = 2;
    // 3乗する (2 * 2 * 2)
    baseNumber **= 3;
    console.log(`2の3乗: ${baseNumber}`); // 8
};

// 実行
runAssignmentDemo();

カスタムポイント

変数の型:+= は元の変数が「数値」なら足し算、「文字列」なら文字連結として機能します。意図しない型変換（文字列 “10” に数値 5 を += して “105” になる等）に注意してください。
インクリメント:単に 1 だけ足したい場合は x += 1 よりも x++ （インクリメント演算子）を使うのが一般的です。

注意点

const変数は不可:複合代入演算子は変数の「再代入」を行うため、const で宣言された定数に対して使うとエラー（Assignment to constant variable）になります。必ず let を使用してください。
初期化忘れ:let x; x += 10; のように未定義（undefined）の変数に対して演算を行うと、結果は NaN（非数）になってしまいます。必ず初期値を設定してから使用してください。
副作用:代入演算子は「変数の値そのもの」を書き換えます。元の値を残しておきたい場合は、別の変数を用意して通常の演算を行ってください。

応用

ループ処理でのHTML生成

配列データをループで回し、HTML文字列を次々と連結していく処理で += は頻繁に使用されます。

let htmlList = "<ul>";
const items = ["Item A", "Item B"];

items.forEach(item => {
    // 既存の文字列の後ろにリストタグを追加していく
    htmlList += `<li>${item}</li>`;
});

htmlList += "</ul>";
console.log(htmlList); 
// <ul><li>Item A</li><li>Item B</li></ul>