JavaScriptにおけるプログラム開発において、変数へ値を格納する「代入」は、最も頻繁に行われる操作の一つです。

2026年現在のモダンな開発環境では、単なる値のコピーに留まらず、論理演算や分割代入、Null合体演算子を組み合わせた高度な代入手法が一般的に使われています。

これらの演算子を正確に理解し、適切に使い分けることは、コードの可読性を高めるだけでなく、バグの混入を防ぎ、メンテナンス性を向上させるための必須スキルと言えるでしょう。

本記事では、基本から応用まで、現場で役立つ代入演算子のテクニックを詳しく解説します。

目次 [ close ]
  1. プログラミングの基本：JavaScriptの代入演算子とは
  2. 基本的な代入演算子（=）の仕組みと注意点
  3. 算術演算子と組み合わせた複合代入演算子
    1. 主要な算術複合代入演算子の一覧
    2. 算術複合代入の活用例
  4. 論理代入演算子：条件に応じたスマートな値の代入
    1. 論理代入演算子の種類
    2. Null合体代入演算子 (??=) の重要性
  5. 分割代入：配列やオブジェクトを効率的に扱う
    1. オブジェクトの分割代入
    2. 配列の分割代入
  6. ビット演算代入演算子の活用場面
  7. 代入演算子を使いこなすためのベストプラクティス
    1. 1. 意図を明確にする
    2. 2. 副作用を避ける
    3. 3. 分割代入で構造を分かりやすく
  8. まとめ

プログラミングの基本：JavaScriptの代入演算子とは

JavaScriptの代入演算子は、右辺にある式の評価結果を、左辺にある変数やプロパティに割り当てるための記号です。

最も基本的なものは = ですが、これ以外にも算術演算や論理演算を代入と同時に行う「複合代入演算子」が数多く存在します。

代入演算の本質は、「値をメモリ上の特定の場所に格納し、後で再利用できるようにすること」にあります。

しかし、JavaScriptには「プリミティブ型」と「オブジェクト型」という性質の異なるデータ型が存在するため、代入の挙動を正しく把握しておく必要があります。

プリミティブ型（数値や文字列など）は値そのものがコピーされますが、オブジェクト型（配列や連想配列など）は「参照（メモリ上の住所）」がコピーされるという点に注意が必要です。

基本的な代入演算子（=）の仕組みと注意点

最も多用される代入演算子は = です。

数学の「等しい」という意味ではなく、「右側の値を左側の変数に流し込む」という動作を指します。

JavaScript
// 基本的な代入の例
let message = "Hello, JavaScript!";
let count = 2026;

// 複数の変数への代入
let x, y;
x = y = 100; // 右から左へ評価される

console.log(message);
console.log(count);
console.log(x, y);
実行結果
Hello, JavaScript!
2026
100 100

上記の例のように、x = y = 100 と記述すると、まず y に 100 が代入され、その結果が x に代入されます。

これを「代入の連鎖」と呼びますが、コードの可読性が下がる場合があるため、チーム開発では慎重に利用すべきです。

また、const で宣言された定数に対して再代入を行うとエラーが発生します。

再代入が必要な場合は必ず let を使用してください。

算術演算子と組み合わせた複合代入演算子

計算結果をそのまま元の変数に反映させたい場合、複合代入演算子を使用すると記述を簡略化できます。

これにより、同じ変数名を二度書く必要がなくなり、コードがスッキリします。

主要な算術複合代入演算子の一覧

以下に、頻繁に使用される算術複合代入演算子をまとめました。

演算子記述例意味（等価な表現）
+=a += ba = a + b
-=a -= ba = a - b
*=a *= ba = a * b
/=a /= ba = a / b
%=a %= ba = a % b
**=a **= ba = a ** b

算術複合代入の活用例

具体的なコードで挙動を確認してみましょう。

JavaScript
let score = 100;

// 加算代入
score += 50; // score = 100 + 50
console.log("加算後:", score);

// べき乗代入 (ES2016以降)
let base = 2;
base **= 3; // base = 2の3乗
console.log("べき乗後:", base);

// 文字列の連結代入
let greeting = "こんにちは、";
greeting += "ゲストさん";
console.log(greeting);
実行結果
加算後: 150
べき乗後: 8
こんにちは、ゲストさん

特に += は、数値の加算だけでなく文字列の結合にも利用できるため、HTML要素を動的に生成して文字列として蓄積していくような処理で非常に役立ちます。

論理代入演算子：条件に応じたスマートな値の代入

JavaScriptの近年のアップデートで導入され、現在の開発現場で主流となっているのが「論理代入演算子」です。

これは、特定の条件を満たした場合にのみ代入を行う仕組みです。

論理代入演算子の種類

  1. 論理和代入 (||=): 左辺が「偽（Falsy）」である場合に右辺を代入します。
  2. 論理積代入 (&&=): 左辺が「真（Truthy）」である場合に右辺を代入します。
  3. Null合体代入 (??=): 左辺が null または undefined の場合にのみ右辺を代入します。

Null合体代入演算子 (??=) の重要性

以前はデフォルト値を設定する際に ||= が使われていましたが、これには「数値の0」や「空文字 “”」も偽と判定されて上書きされてしまうという弱点がありました。

??= を使うことで、値が未定義の場合のみ初期値を設定するという安全な処理が可能になります。

JavaScript
let config = {
    timeout: 0,
    title: ""
};

// 論理和代入の場合 (0や""も上書きされる)
config.timeout ||= 1000; 
config.title ||= "Default Title";

console.log("論理和代入の結果:", config);

let settings = {
    timeout: 0,
    title: ""
};

// Null合体代入の場合 (null/undefinedのみ上書きされる)
settings.timeout ??= 1000;
settings.title ??= "Default Title";

console.log("Null合体代入の結果:", settings);
実行結果
論理和代入の結果: { timeout: 1000, title: 'Default Title' }
Null合体代入の結果: { timeout: 0, title: '' }

このように、??= は設定オブジェクトの初期化や、APIから取得したデータの補完において極めて強力なツールとなります。

分割代入：配列やオブジェクトを効率的に扱う

代入演算子の応用として欠かせないのが「分割代入」です。

これは配列やオブジェクトの要素を、個別の変数に一括で代入する手法です。

オブジェクトの分割代入

オブジェクトから必要なプロパティだけを抜き出す際に、何度も obj.prop と書く手間を省けます。

JavaScript
const user = {
    id: 1,
    name: "田中太郎",
    email: "tanaka@example.com"
};

// プロパティ名と同じ変数名で抽出
const { name, email } = user;

console.log(name);
console.log(email);

// 別の変数名を割り当てることも可能
const { name: userName } = user;
console.log(userName);
実行結果
田中太郎
tanaka@example.com
田中太郎

配列の分割代入

配列の要素を順番に変数に割り当てます。

JavaScript
const colors = ["赤", "青", "緑"];

// インデックス順に代入
const [firstColor, secondColor] = colors;

console.log(firstColor); // 赤
console.log(secondColor); // 青

// 特定の要素をスキップ
const [, , thirdColor] = colors;
console.log(thirdColor); // 緑
実行結果
赤
青
緑

分割代入は関数の引数でも利用できるため、大量の引数を持つ関数の可読性を劇的に改善することができます。

ビット演算代入演算子の活用場面

日常的なWebアプリケーション開発ではあまり目にしませんが、フラグ管理やバイナリデータの処理、低レイヤーのパフォーマンス最適化において「ビット演算代入演算子」が使用されることがあります。

演算子名称
&=ビット論理積代入
|=ビット論理和代入
^=ビット排他的論理和代入
<<=左シフト代入
>>=右シフト代入

例えば、ゲーム開発やグラフィック処理などで複数のステータス（権限、状態フラグなど）を1つの数値で管理している場合、これらの演算子を使って効率的にフラグを更新できます。

JavaScript
let permissions = 0; // 0000 (バイナリ)
const READ = 1;      // 0001
const WRITE = 2;     // 0010

// 読み取り権限を付与 (ビット論理和)
permissions |= READ; 
console.log("現在の権限:", permissions.toString(2));

// 書き込み権限を付与
permissions |= WRITE;
console.log("現在の権限:", permissions.toString(2));

// 読み取り権限を削除 (ビット論理積と否定の組み合わせ)
permissions &= ~READ;
console.log("権限削除後:", permissions.toString(2));
実行結果
現在の権限: 1
現在の権限: 11
権限削除後: 10

一般のビジネスロジックでは読みやすさを優先して Set オブジェクトなどを使うのが一般的ですが、実行速度やメモリ効率が極めて重視されるケースでは、ビット演算代入が有効な選択肢となります。

代入演算子を使いこなすためのベストプラクティス

多くの代入演算子がある中で、効率的かつ安全なコードを書くためのポイントを3つ紹介します。

1. 意図を明確にする

||= と ??= の使い分けは、意図を明確に示す重要なシグナルです。

「空文字や0も無効として扱いたいのか（論理和）」それとも「データが存在しない場合のみ補完したいのか（Null合体）」を常に意識してください。

後者のケースが圧倒的に多いため、迷ったらまずは ??= を検討するのが現代的なアプローチです。

2. 副作用を避ける

代入は変数の状態を変化させる（ミューテーション）操作です。

関数の内部で外部の変数を書き換えるような代入を繰り返すと、プログラムの挙動が予測しにくくなります。

可能な限り const を使い、再代入が必要な範囲を最小限に抑えることで、デバッグのしやすいコードになります。

3. 分割代入で構造を分かりやすく

ネストされた深いオブジェクトから値を抽出する場合、分割代入を活用しましょう。

コードの行数は増えるかもしれませんが、どのプロパティに依存しているかが一目でわかるようになり、保守性が向上します。

JavaScript
// Good: 何を使っているか明確
const { profile: { avatarUrl, bio } } = userSettings;

// Bad: 毎回長いパスを書く
console.log(userSettings.profile.avatarUrl);

まとめ

JavaScriptの代入演算子は、単に値を格納するだけの道具から、条件分岐やデータ構造の展開をスマートに行うための「ロジックの一部」へと進化してきました。

基礎となる = や算術複合代入をマスターした上で、現代的な ??= や分割代入を積極的に取り入れることで、あなたの書くコードはより洗練されたものになるはずです。

2026年のJavaScript開発においては、これらの演算子を適材適所で使い分け、短くも意図が明確に伝わるコードを目指しましょう。

この記事で紹介したテクニックを日々のコーディングに適用し、効率的でミスの少ないプログラミングを実現してください。