JavaScriptの+=演算子とは？加算代入演算子の使い方を実例付きで解説

JavaScriptの+=演算子は、2つの値を足し合わせて、その結果を変数に代入するための演算子です。「加算代入演算子（addition assignment operator）」とも呼ばれ、通常の「変数 = X + Y」という記述方法よりも簡潔にコードを書くことができます。

プラス記号（+）とイコール記号（=）が並んでいる？タイプミスではありません。JavaScriptにおいて、この2つの記号が隣り合うと特別な意味を持ちます。それが「加算代入演算子」です。

本記事では、JavaScriptの+=演算子が何であるか、どのように動作するのかを解説します。実際のコード例も交えながら、使い方をしっかり学んでいきましょう。

JavaScriptの+=演算子とは？

+=演算子は、演算子の右側にある値を左側の変数に加算し、その結果を左側の変数に代入します。この演算子は「加算代入演算子」と呼ばれています。

まずは基本的な構文を見てみましょう。

let welcome = "Hello there, ";
console.log(welcome += "Sophie.");

ここでは、「welcome」という変数を宣言し、値として「Hello there, 」を設定しています。その後、「Sophie.」という文字列を追加しています。加算代入演算子はこれら2つの値を連結し、結果を「welcome」変数に代入します。

このコードの出力結果は以下の通りです。

Hello there, Sophie.

+=演算子には主に2つの用途があります。1つは数値同士を加算すること、もう1つは文字列同士を連結することです。

また、+=演算子は以下の記述を短縮したものでもあります。

x = x + y

加算代入演算子を使うことで、コードが読みやすくなります。「variable = x + y」と書くよりも、「A += B」の方がはるかにシンプルで明確です。

特に、ループ処理の中でカウンター変数の値を増やしていく場面などで、この演算子をよく目にするでしょう。

+=演算子で数値を加算する

加算代入演算子を使えば、2つの数値を簡単に足し合わせることができます。ここでは、リストの中に「The Count of Monte Cristo（モンテ・クリスト伯）」という書名が何回登場するかを数えるプログラムを作成してみましょう。このリストには、読書会の「年間最優秀書籍」アンケートの結果が格納されています。

まず、書籍名を格納した配列と、出現回数を追跡するための変数を定義します。

var books = ["The Count of Monte Cristo", "All My Sons", "Of Mice and Men", "The Count of Monte Cristo", "To Have and Have Not"];
var count = 0;

次に、forループを使ってリストを走査し、「The Count of Monte Cristo」の出現回数を数えます。

for (b in books) {
	if (books[b] === "The Count of Monte Cristo") {
		count += 1
	}
}

console.log(`The Count of Monte Cristo was voted Book of the Year ${count} times.`);

このforループは「books」配列の各要素を順番に取り出します。各要素について、書名が「The Count of Monte Cristo」と一致するかどうかをチェックし、一致していれば加算代入演算子を使って「count」の値を1増やします。一致しなければ何も行いません。

ループが完了すると、プログラムは書籍がリストに出現した回数を出力します。コードを実行してみましょう。

The Count of Monte Cristo was voted Book of the Year 2 times.

このように、コードはリスト内に書籍が出現した回数を正しくカウントできました。

+=演算子で文字列を連結する

JavaScriptの+=演算子は、2つの文字列を連結（マージ）することもできます。長い形式の「variable = x + y」よりも、はるかに便利です。

例えば、ユーザーの名（ファーストネーム）と姓（ラストネーム）が別々の文字列に格納されている場合、+=演算子を使えばこれらを1つの文字列にまとめられます。

ここでは、リストの中から「B」で始まるケーキを探し出すプログラムを作成してみましょう。「B」で始まるケーキが見つかったら新しい文字列に追加し、そうでなければ何もしません。

まず、リストと文字列を定義します。

var cakes = ["Babka", "Raspberry Ganache", "Strawberry Cheesecake", "Baked Alaska"];
var start_with_b = "| ";

変数「start_with_b」には、「B」で始まるすべてのケーキが格納されます。初期値は「| 」です。

次に、forループで各ケーキを走査し、「B」で始まるかどうかを判定します。

for (cake in cakes) {
	if (cakes[cake].startsWith("B")) {
		var message = cakes[cake] + " | ";
		start_with_b += message
	}
}

console.log(start_with_b);

ここでは、JavaScriptのstartsWith()メソッドを使って、リスト内の各ケーキが「B」で始まるかどうかを確認しています。

ケーキが「B」で始まる場合、if文の中の処理が実行されます。if文の中では「message」という変数を宣言し、ケーキ名の末尾に「 | 」を追加しています。こうすることで、各ケーキ名が文字列の中で区切られて表示されるようになります。

その後、加算代入演算子を使って「message」の内容を「start_with_b」変数の末尾に追加していきます。

コードを実行すると、以下の結果が得られます。

| Babka | Baked Alaska | 

このように、「B」で始まるすべてのケーキの一覧が出力されました。

なお、文字列を連結する別の方法としては、連結演算子（+）やconcat()メソッドを使用する方法もあります。これらのメソッドについて詳しく知りたい方は、JavaScriptの文字列連結に関するガイドを参照してください。

まとめ

加算代入演算子（+=）は、ある値に別の値を加算し、その結果を変数に代入するための演算子です。文字列の末尾に値を追加したり、数値を合計したりする際によく使われます。

JavaScriptについてさらに学びたい方は、オンライン書籍やおすすめの学習コースなどを紹介した「JavaScriptの学び方」ガイドもぜひ参考にしてください。