JavaScript の代入演算子をやさしく解説
はじめてのコードは「変数に値を入れる」ところから始まります。代入演算子はそのための基本の道具。ここをしっかり掴むと、後の学習がグッと楽になります。
基本の代入演算子
- 意味: 右側の値を左側の変数に入れる
- 読み方のコツ: 「イコール」じゃなく「代入する」と読む
let age = 18; // age に 18 を代入
let name;
name = "Mika"; // name に "Mika" を代入
- よくあるつまずき:
=は「等しい」ではありません。数学の「＝」と使い方が違うので、ここで切り替えましょう。
多重代入（いっぺんに入れる）
- 意味: 右から左へ順番に代入される
- 使いどころ: 同じ値を複数の変数に入れたいとき
let a, b, c;
a = b = c = 10; // c に 10、b に c（10）、a に b（10）
- 注意: 読みやすさが下がる場合は避ける。初学者は1行ずつ代入した方が混乱しません。
計算してから代入（複合代入）
- 意味: 「計算＋代入」を短く書く
- メリット: タイプ量が減る、意図が伝わりやすい
let score = 50;
// 足し算
score += 10; // score = score + 10; と同じ（60）
// 引き算
score -= 5; // score = score - 5; と同じ（55）
// 掛け算
score *= 2; // score = score * 2; と同じ（110）
// 割り算
score /= 5; // score = score / 5; と同じ（22）
// 余り（剰余）
score %= 4; // score = score % 4; と同じ（22 を 4 で割った余り = 2）
- 余りの直感: 5個ずつ袋に入れると、最後に2個余る → それが
% 5の結果。
文字列でも使える
- 意味: 文字をくっつける（連結）
let message = "Hello";
message += " World"; // "Hello World"
- 注意: 数字と文字を混ぜると文字列になります
let n = 10;
let s = " points";
let result = n + s; // "10 points"（文字列）
ちょっと進んだ代入（論理・Null合体）
- 論理AND代入
&&=: 左が真（truthy）なら右を代入
let title = "Guest";
let newTitle = "Member";
title &&= newTitle; // title は "Guest"（真）なので "Member" に
- 論理OR代入
||=: 左が偽（falsy）なら右を代入
let nickname = ""; // 空文字は偽
nickname ||= "No Name"; // "No Name" が入る
- Null合体代入
??=: 左が null/undefined のときだけ右を代入
let count = undefined;
count ??= 0; // count が undefined なので 0 を代入
let done = 0;
done ??= 1; // done は 0（null/undefined ではない）なので変わらない
- truthy/falsy の直感: 0、””（空文字）、null、undefined、NaN は「偽（falsy）」、それ以外はだいたい「真（truthy）」。
よくあるつまずきと回避方法
- ラベル:
=と==と===の違い=は代入==は「ゆるい」等価（型を無視）===は「厳密」等価（型も見る）- 初心者は比較に
===を使うのがおすすめ
- ラベル: 連鎖代入の読みやすさ
a = b = c = 1は一見便利でも、可読性が下がることがある- 初学者は1つずつ代入して明確にする
- ラベル: 文字列＋数字の罠
10 + "1"は"101"になる- 数値計算したいなら両方を数値にする
練習問題
練習 1: スコア管理
- 目的: 複合代入の基本を体で覚える
let score = 0;
// 1) 10点加算
score += 10;
// 2) 3点減算
score -= 3;
// 3) 倍にする
score *= 2;
// 4) 5で割る
score /= 5;
// 結果を表示（期待値は？）
console.log(score); // ？
- 答えの考え方: 0→10→7→14→2.8
練習 2: 文字列を組み立てる
- 目的: 文字列連結に慣れる
let msg = "こんにちは";
msg += "、";
msg += "世界";
console.log(msg); // ？
- 期待: 「こんにちは、世界」
練習 3: 初期値の設定（||= と ??=）
- 目的: 欠けている値だけを埋める
let username = ""; // 入ってるけど空
let displayName = undefined; // まだ不明
username ||= "Guest"; // 空なら"Guest"
displayName ??= "No Name"; // undefined/nullなら"No Name"
console.log(username); // ？
console.log(displayName); // ？
- 期待: username は “Guest”、displayName は “No Name”
練習 4: 剰余の直感
- 目的:
%を感覚で理解
let candies = 23;
// 4人に均等に配ると余りはいくつ？
let leftover = candies % 4;
console.log(leftover); // ？
- 期待: 3（4×5=20、23-20=3）
小さな実践課題
ミニ課題: ショッピングカートの合計
- ゴール: 合計金額を複合代入で更新
let total = 0;
const prices = [1200, 350, 980];
// ここに複合代入を使って合計を計算
total += prices[0];
total += prices[1];
total += prices[2];
console.log(`合計: ${total} 円`); // 2530 円
- 発展: 余りで「100円未満の端数」を計算してみる
let remainder = total % 100; // 端数
console.log(`端数: ${remainder} 円`); // 30 円
まとめ
- 基本:
=は「右を左に入れる」。 - 効率化:
+=,-=,*=,/=,%=で「計算＋代入」を短く。 - 文字列:
+=で文章を組み立てられる。 - 条件付き代入:
||=,&&=,??=で「必要なときだけ」上書き。 - まずは: 自分の手で毎日3分、上の練習を動かす。体感で覚えるのが近道。