JavaScriptのカンマ演算子を初心者向けにやさしく解説
カンマ演算子は、ちょっとマニアックだけど知っておくと「for文」などで役立つテクニック。ポイントは「複数の式を書けるけれど、結果として残るのは最後の式の値だけ」ということです。例を交えながら、丁寧に説明します。
基本の考え方
- 働き: 複数の式を左から順番に評価して、最後の式の値だけを返す
- 書き方:
式1, 式2, 式3
- 結果:
- 式1が実行される → 式2が実行される → 式3が実行される
- 全体の評価結果は「式3の値」
具体例
let a = 1;
let b = 2;
let result = (a = a + 3, b = b * 2, b - a);
// a は 4（1+3）に、b は 4（2*2）に更新される
// 最後の式は b - a（4 - 4）なので、result は 0
console.log(result); // 0
どこで使うの？
- for文との相性が良い: 初期化や更新部分で、複数の処理をまとめて書ける
- 一時的な複合処理: 1つの場所で変数を更新して、最後に使いたい値を返すとき
for文の例（よく使うパターン）
for (let i = 0, j = 5; i < j; i++, j--) {
console.log(`i=${i}, j=${j}`);
}
// i と j を同時に動かして、だんだん中央に近づける
使い方のコツと注意
- 可読性: 多用すると読みづらくなる。基本は「for文の初期化・更新」で使う程度に
- 最後の値しか返らない: 途中の計算結果を使いたいなら、変数に代入しておく
- 括弧で明確に: カンマ演算子は優先順位が低いので、意図が伝わるように括弧で囲むと安全
よくあるつまずきと回避方法
- 「全部の結果が返る」と誤解しない: 返るのは最後の式だけ
- 副作用の見落とし: 中間の式で変数が更新される（副作用）。後続の処理に影響するので意識する
- 読みにくい一行書き: 無理に1行に詰め込まず、必要なところだけ使う
例題で身につける
例題1：最後の値が返ることを確認
- 目的: カンマ演算子の基本動作の理解
- コード:
let x = 2, y = 10;
const val = (x += 3, y -= 4, y * x);
// 手順:
// x += 3 → x=5
// y -= 4 → y=6
// y * x → 6 * 5 = 30（これが val）
console.log(x, y, val); // 5 6 30
- ポイント: 最後の式の値だけが返る（30）。途中の式で変数は更新され続ける。
例題2：for文で2つの変数を同時に更新
- 目的: 代表的な使い所を体験
- コード:
for (let left = 0, right = 4; left <= right; left++, right--) {
console.log(`left=${left}, right=${right}`);
}
- 動き: left は増え、right は減る。中央で交差するまでループ。
例題3：条件分岐の中でまとめて処理
- 目的: 複数の更新＋最終値の返却
- コード:
let score = 50;
let bonus = 10;
const display = (score < 60
? (score += 5, bonus += 5, `補点後: ${score} (bonus: ${bonus})`)
: `そのまま: ${score}`);
console.log(display);
- ポイント: 三項演算子の中でも使える。括弧で意図を明確に。
例題4：配列処理で一時的に使う
- 目的: 一度に更新して最後の値を返す癖を掴む
- コード:
let total = 0;
let count = 0;
const avg = (total += 10, count++, total / count);
console.log(avg); // 10
- 注意: 実務では可読性のため、通常は行を分けて書く方が好まれる。
練習問題（自分で手を動かす）
問題1：2つのカウンタを反対方向に動かす
- 指示: i は 1 ずつ増やし、j は 2 ずつ減らす。両方が 0〜10 の範囲にある間だけログ出力する。
- ヒント: for文の更新部分に
i++, j -= 2を使う - 模範解答:
for (let i = 0, j = 10; i <= 10 && j >= 0; i++, j -= 2) {
console.log(`i=${i}, j=${j}`);
}
問題2：最後の式の値だけが返ることを利用
- 指示: a と b を更新したあと、最後に a と b の合計だけを返す式を作る
- 模範解答:
let a = 3, b = 7;
const sum = (a *= 2, b += 5, a + b);
console.log(sum); // 3*2 + (7+5) = 6 + 12 = 18
問題3：条件によって更新内容を変える
- 指示: 変数 points が 80 未満なら 10 加算し、levels を 1 増やす。最後に「points/levels の比率」を返す。
- 模範解答:
let points = 75;
let levels = 2;
const ratio = (points < 80
? (points += 10, levels++, points / levels)
: (levels++, points / levels));
console.log(ratio);
まとめの指針
- 用途を絞る: 主に for文の初期化・更新で使えばOK
- 見通し重視: 迷ったら行を分けて書く。必要な場面だけカンマ演算子
- 最後の値に注意: 「返るのは最後の式」—ここが本質
