いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【JavaScript】代入演算子の書き方と使い方の基本

JavaScriptで変数に値を設定する「代入演算子」の基本を初心者向けに解説します。数学の=とは違うプログラミングでの = の意味から、+= や -= といった計算処理を短く書ける複合代入演算子の使い方までを学習。サンプルコードを通して、実践的な書き方が身につきます。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • JavaScript: ES6以降

JavaScriptの代入演算子とは

代入演算子は、変数に値を設定（代入）するために使われる記号です。

最も基本的な代入演算子は = です。これは、= の右側にある値（右辺）を、左側にある変数（左辺）に格納する役割を持ちます。プログラミングにおける = は、数学の「等しい」という意味ではなく、「右の値を左に代入する」という命令であると覚えてください。

1// 変数priceを宣言し、数値の100を代入します。
2let price = 100;

この例では、price という名前の変数に 100 という値が代入されています。

また、代入演算子 = と他の演算子（+や-など）を組み合わせた複合代入演算子もあります。これは、左辺の変数が持つ現在の値に対して計算を行い、その結果を同じ変数に再度代入する処理を一行で簡潔に書くためのものです。

例えば、変数 price の値に 50 を足したい場合、複合代入演算子を使わないと以下のようになります。

1let price = 100;
2// priceが持つ値(100)に50を足し、その結果(150)をpriceに再代入します。
3price = price + 50;
4
5console.log(price);
6// 出力結果: 150

この price = price + 50; という処理を、加算代入演算子 += を使って書き換えると、次のようになります。

1let price = 100;
2// 上の例の price = price + 50; と全く同じ意味です。
3price += 50; 
4
5console.log(price);
6// 出力結果: 150

このように、複合代入演算子を使うと、自分自身の値を更新する処理をより短く記述できます。他にも以下のような種類があります。

  • -= (減算代入): x -= 5; は x = x - 5; と同じ意味です。
  • *= (乗算代入): x *= 2; は x = x * 2; と同じ意味です。
  • /= (除算代入): x /= 4; は x = x / 4; と同じ意味です。

サンプルコード

この章では、JavaScriptの「代入演算子」について学習します。代入演算子は、変数に値を設定したり、計算結果を元の変数に反映させたりする際に使用する、プログラミングの基本的な要素です。

javascript/chapter07/index.html

このHTMLファイルは、この章で学習する複数のJavaScriptファイルを読み込むためのものです。ブラウザでこのファイルを開くと、script01.jsからscript08.jsまでの各スクリプトが順番に実行され、その結果がブラウザの開発者ツール内のコンソールに表示されます。

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7  </head>
8
9  <body>
10    <h1>JavaScriptチュートリアル</h1>
11    <script src="./script01.js" defer></script>
12    <script src="./script02.js" defer></script>
13    <script src="./script03.js" defer></script>
14    <script src="./script04.js" defer></script>
15    <script src="./script05.js" defer></script>
16    <script src="./script06.js" defer></script>
17    <script src="./script07.js" defer></script>
18    <script src="./script08.js" defer></script>
19  </body>
20</html>
21

javascript/chapter07/script01.js

これは最も基本的な代入演算子 = の使用例です。プログラミングにおける = は、数学の「等しい」という意味ではなく、「右辺の値を左辺の変数に代入（格納）する」という命令を表します。このコードでは、変数 a に数値の 5 を代入しています。

1// 代入演算子の基本
2
3// 変数 a に 5 を代入
4a = 5;
5// 出力: 5
6console.log("a の値:", a);
7

javascript/chapter07/script02.js

加算代入演算子 += の使用例です。a += 3; は a = a + 3; と全く同じ意味になります。つまり、変数 a の現在の値に 3 を加算し、その結果を再び変数 a に代入します。コードを短く記述できるため、非常によく使われます。

1// 加算代入演算子（+=）
2
3// 変数 a に 5 を代入
4a = 5;
5// a に 3 を加算し、その結果を a に代入
6a += 3;
7// 出力: 8
8console.log("a += 3 の結果:", a);

javascript/chapter07/script03.js

減算代入演算子 -= の使用例です。a -= 2; は a = a - 2; と同じ意味です。変数 a の現在の値から 2 を減算し、その結果を再び変数 a に代入します。

1// 減算代入演算子（-=）
2
3// 変数 a に 5 を代入
4a = 5;
5// a から 2 を減算し、その結果を a に代入
6a -= 2;
7// 出力: 3
8console.log("a -= 2 の結果:", a);

javascript/chapter07/script04.js

乗算代入演算子 *= の使用例です。a *= 4; は a = a * 4; と同じ意味です。変数 a の現在の値に 4 を乗算し、その結果を再び変数 a に代入します。

1// 乗算代入演算子（*=）
2
3// 変数 a に 5 を代入
4a = 5;
5// a に 4 を乗算し、その結果を a に代入
6a *= 4;
7// 出力: 20
8console.log("a *= 4 の結果:", a);
9

javascript/chapter07/script05.js

除算代入演算子 /= の使用例です。a /= 2; は a = a / 2; と同じ意味です。変数 a の現在の値を 2 で除算し、その結果を再び変数 a に代入します。

1// 除算代入演算子（/=）
2
3// 変数 a に 5 を代入
4a = 5;
5// a を 2 で除算し、その結果を a に代入
6a /= 2;
7// 出力: 2.5
8console.log("a /= 2 の結果:", a);
9

javascript/chapter07/script06.js

剰余代入演算子 %= の使用例です。% は剰余（割り算の余り）を求める演算子です。a %= 2; は a = a % 2; と同じ意味になります。変数 a の現在の値を 2 で割った余りを計算し、その結果を再び変数 a に代入します。5 を 2 で割ると商が 2 で余りが 1 になるため、結果は 1 となります。

1// 剰余代入演算子（%=）
2
3// 変数 a に 5 を代入
4a = 5;
5// a を 2 で割った余りを a に代入
6a %= 2;
7// 出力: 1
8console.log("a %= 2 の結果:", a);
9

javascript/chapter07/script07.js

べき乗代入演算子 **= の使用例です。** はべき乗（累乗）を計算する演算子です。a **= 3; は a = a ** 3; と同じ意味になります。これは変数 a の現在の値を 3 乗し、その結果を再び変数 a に代入します。5 の 3 乗は 5 * 5 * 5 で 125 となります。

1// べき乗代入演算子（**=）
2
3// 変数 a に 5 を代入
4a = 5;
5// a に 5 の 3 乗を代入（5*5*5）
6a **= 3;
7// 出力: 125
8console.log("a **= 3 の結果:", a);
9

javascript/chapter07/script08.js

これは、これまで学んだ加算代入演算子 += を使った実践的な練習問題です。ショッピングカートの合計金額を計算するような処理を想定しています。

  1. orders という配列（リストのようなもの）に、複数の商品の情報が格納されています。
  2. 合計金額を保存するための変数 total を 0 で初期化します。
  3. forEach という命令を使い、orders 配列の中身を一つずつ取り出して処理を繰り返します。
  4. ループの中で total += order.price; を実行しています。これにより、total に各商品の価格(order.price)が次々と加算されていきます。
  5. 全ての商品の価格を足し終わった後、最終的な合計金額がコンソールに出力されます。
1// 合計金額を算出する練習問題
2
3// 注文一覧の配列
4const orders = [
5  { item: "商品A", price: 1000 },
6  { item: "商品B", price: 1500 },
7  { item: "商品C", price: 2000 },
8  { item: "商品D", price: 2500 },
9];
10
11// 合計金額を格納する変数
12let total = 0;
13
14// forEach ループで各注文を回す
15orders.forEach((order) => {
16  // 各注文の金額を合計金額に加算
17  total += order.price;
18});
19
20// 合計金額を表示
21console.log("合計金額:", total, "円"); // 出力: 7000円
22

おわりに

JavaScriptの = は、数学の等号とは違い、右の値を左の変数に代入する命令であることをまず理解しましょう。次に、price += 50 のような複合代入演算子を使えば、変数が持つ現在の値を使った計算と再代入を一行で簡潔に書くことができます。合計金額を求めるサンプルコードのように、ループ処理で数値を足していく場面などで非常に役立つため、ぜひ使い方をマスターしてください。

【JavaScript】代入演算子の書き方と使い方の基本 | いっしー@Webエンジニア