In 'n' Out

知識を取り込み、そして発信する

代入演算子

値を入れるだけではない代入

JavaScriptでは、変数に値を入れるために代入演算子を使います。
値を足しながら代入したり、引きながら代入したりといった処理も、専用の演算子で簡潔に表現できます。
これらの書き方を使うことで、同じ変数を使った計算や更新を分かりやすく記述できるようになります。
ここでは、代入演算子の使用頻度の高いものに絞り、それぞれの役割と使い方を整理します。

加算代入

加算代入演算子+=は、変数の現在の値に数値を足し、その結果を同じ変数に代入するための書き方です。
計算と代入を1行でまとめて書けるのが特徴です。

構文

変数 += 値;

この書き方が何を意味しているかというと、変数 = 変数 + 値;と同じです。
変数の中身を一度取り出し、値を足したあと、その結果を再び同じ変数に代入しています。

コード例

//assignmentOperator1.js
let total = 5;

for(let i = 0; i< 5; i++){
    total += 2;
}
       
alert(total);

動作例

※このボタンは動作確認用です

この例では、最初にtotalに5を代入しています。
totalには2が5回足され、最終的に合計が表示されます。
加算代入を使うことで、処理の意図が分かりやすくなり、コードも短く書けるようになります。
++と何が違うかというと、++は1ずつ足されますが、+=を使うと値を自由に扱うことができます。

コード例

//assignmentOperator2.js
let total1 = 5;
let total2 = 5;

for(let i = 0; i< 5; i++){
    total1++;
    total2 += 2;
}
       
alert(total1);
alert(total2);

動作例

※このボタンは動作確認用です

total1・total2ともに5を代入して、それぞれ処理を変えてみました。
例で表示されるtotal1の合計は10に対し、total2の合計は15となります。
このように使い分けることも重要です。

減算代入

減算代入演算子-=は、変数の現在の値から数値を引き、その結果を同じ変数に代入するための書き方です。
値を減らしながら更新したい場合に使います。

構文

変数 -= 値;

加算代入とは逆で、変数 = 変数 - 値;と同じです。
変数の中身から指定した値を引き、その結果を再び同じ変数に代入しています。

コード例

//assignmentOperator3.js
let total = 20;

for(let i = 0; i< 5; i++){
    total -= 2;
}
       
alert(total);

動作例

※このボタンは動作確認用です

この例では、totalの初期値を20にしています。
total -= 2によって、20から2が5回引かれ、最終的に10が表示されます。
減算代入でも、処理の意図が分かりやすくなり、コードも短く書けるようになります。

乗算代入

乗算代入演算子「*=」は、変数の現在の値に数値を掛け、その結果を同じ変数に代入するための書き方です。
倍率をかけて値を更新したい場合に使われます。

構文

変数 *= 値;

この書き方は、変数 = 変数 * 値を省略したものです。
変数の中身に指定した値を掛け、その結果を再び同じ変数に代入しています。

コード例

//assignmentOperator4.js
let total = 2;

for(let i = 0; i< 5; i++){
    total *= 3;
}
       
alert(total);

動作例

※このボタンは動作確認用です

この例では、totalの初期値を2にしています。
total *= 3によって、3を5回かけて(2×3×3×3×3×3)、最終的に486が表示されます。

代入演算子は文字も扱える

代入演算子は数値だけでなく、文字列に対しても使用できます。
ただし、文字列では足し算ではなく結合として扱われるため、加算代入(+=)のみしか使用できません。

コード例

//assignmentOperator5.js
let str = 'a';

str += 'b';

alert(str);

動作例

※このボタンは動作確認用です

この例では、最初にstrにaという文字列を代入しています。
その後、str += 'b'によって、元の文字列の後ろに新しい文字列が追加されます。
結果として、alertにはabと表示されます。
文字列に対する加算代入は、数値の足し算ではなく、文字をつなげる処理として動作します。
表示用の文章を少しずつ組み立てたい場合に便利です。

ここで解説した代入演算子以外も複数あります。
解説しなかったものはWebでは使用頻度が低いのですが、これらの代入演算子はfor文内で使用頻度が高いため、覚えておきましょう。
また、これまで使ってきた=もその中の一つです。