カテゴリ: JavaScript 更新日: 2026/06/27

JavaScriptの代入演算子を徹底解説!初心者でもわかる「=」「+=」「-=」の使い方

JavaScriptの代入演算子(=, +=, -= など)の使い方を解説
JavaScriptの代入演算子(=, +=, -= など)の使い方を解説

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで変数に値を入れる方法ってどうやるんですか?」

先生

「それは代入演算子を使います。最も基本的なのは=です。変数に値をセットするための記号ですね。」

生徒

「えっと、他にも+=とか-=がありますよね?どう違うんですか?」

先生

「順番に見ていきましょう。基本的な=から応用の+=-=まで、簡単な例を交えて説明します!」

1. 代入演算子「=」とは?

1. 代入演算子「=」とは?
1. 代入演算子「=」とは?

JavaScriptの=は、右側の値を左側の変数に入れるための記号です。コンピューターに「この変数にこの値を持たせてね」と指示するイメージです。


let score = 10;
console.log(score); // 10

この例では、変数scoreに数字の10を代入しています。これでscoreという箱に10が入った状態になります。

2. 加算代入演算子「+=」の使い方

2. 加算代入演算子「+=」の使い方
2. 加算代入演算子「+=」の使い方

+=は「変数の値に足す」ための演算子です。例えば、スコアを加算したいときに便利です。


let score = 10;
score += 5; // score = score + 5と同じ意味
console.log(score); // 15

つまり、現在のscoreに5を足して更新しています。簡単に足し算と代入を一度に行える記号です。

3. 減算代入演算子「-=」の使い方

3. 減算代入演算子「-=」の使い方
3. 減算代入演算子「-=」の使い方

-=は「変数の値から引く」ための演算子です。例えば、ポイントを減らしたいときに使います。


let points = 20;
points -= 7; // points = points - 7と同じ意味
console.log(points); // 13

このように、減算と代入をまとめて書けるのでコードがすっきりします。

4. 乗算代入演算子「*=」と除算代入演算子「/=」

4. 乗算代入演算子「*=」と除算代入演算子「/=」
4. 乗算代入演算子「*=」と除算代入演算子「/=」

*=は「掛け算して代入」、/=は「割り算して代入」に使います。数値を効率よく更新するための記号です。


let num = 4;
num *= 3; // num = num * 3
console.log(num); // 12

num /= 2; // num = num / 2
console.log(num); // 6

掛け算や割り算を行ったあと、自動的に変数の値を更新してくれます。

5. 文字列での「+=」の応用

5. 文字列での「+=」の応用
5. 文字列での「+=」の応用

代入演算子は数値だけでなく、文字列にも使えます。文字列の結合を簡単に書くことができます。


let greeting = "Hello";
greeting += ", World!";
console.log(greeting); // Hello, World!

これで、文字列「Hello」に「, World!」を足して更新できます。長い文章を作るときに便利です。

6. 複数の代入演算子を組み合わせる

6. 複数の代入演算子を組み合わせる
6. 複数の代入演算子を組み合わせる

代入演算子は複数組み合わせて使うことも可能です。例えば、スコアを加算して減算する操作を連続して行えます。


let score = 50;
score += 20; // 70
score -= 10; // 60
score *= 2;  // 120
score /= 4;  // 30
console.log(score); // 30

このように、代入演算子を駆使することで、変数の値を効率的に更新できます。

7. 代入演算子の便利な使い方まとめ

7. 代入演算子の便利な使い方まとめ
7. 代入演算子の便利な使い方まとめ

JavaScriptでは、=で値を代入し、+=-=*=/=で効率よく計算と代入を同時に行えます。数値や文字列を操作する際にコードが短くなり、読みやすくなります。


let score = 10;
score += 5;   // 15
score -= 3;   // 12
score *= 2;   // 24
score /= 4;   // 6
console.log(score); // 6

変数の値を更新するときには、必ず代入演算子を意識して書くとコードがすっきりします。

8. 生徒と先生の会話で確認しよう

8. 生徒と先生の会話で確認しよう
8. 生徒と先生の会話で確認しよう

生徒

「なるほど、+=-=は足したり引いたりしながら変数を更新できるんですね!」

先生

「そうです。さらに*=/=を使えば掛け算や割り算も一度にできます。文字列も+=で結合できますよ。」

生徒

「コードがすごく短く書けて便利ですね!」

先生

「その通り。JavaScriptで変数を扱う基本中の基本なので、繰り返し練習して覚えましょう。」

まとめ

まとめ
まとめ

今回の記事では、JavaScriptにおける代入演算子の基本から応用までを詳しく解説しました。まず、最も基本的な=を使った単純な代入は、右側の値を左側の変数にセットする操作であることを確認しました。変数に数値や文字列を格納する際には、必ずこの=を使うことが重要です。さらに、加算代入演算子+=や減算代入演算子-=を使えば、現在の変数の値を簡単に更新できることがわかりました。例えば、スコアやポイントの増減、数値の調整などに非常に便利です。加えて、掛け算代入*=や割り算代入/=を使用すれば、計算と代入を同時に行えるため、コードがより簡潔で読みやすくなります。

また、代入演算子は数値だけでなく文字列にも活用できます。+=を使うことで文字列の結合が簡単になり、複雑な文章やメッセージを作成する際に非常に便利です。さらに、複数の代入演算子を組み合わせることで、スコア計算やポイント管理などの処理を短いコードで連続して行うことが可能です。このように、代入演算子を上手に使うことで、効率よく変数の値を管理でき、コードの可読性と保守性が向上します。

まとめると、JavaScriptの代入演算子は次のように活用できます。=で値を代入し、+=で加算、-=で減算、*=で掛け算、/=で割り算を同時に行うことができるため、数値や文字列の操作を効率化できます。コードが短くなることで読みやすくなり、バグも減らせます。特に初心者のうちは、まず=を使った基本の代入を理解し、その後+=-=などの複合演算子を段階的に使う練習をすることが効果的です。

以下は、複数の代入演算子を組み合わせたサンプルコードです。これにより変数の値を効率的に操作できることが実際に確認できます。


let score = 10;
score += 5;   // 15
score -= 3;   // 12
score *= 2;   // 24
score /= 4;   // 6
console.log(score); // 6

let message = "Hello";
message += ", JavaScript!";
console.log(message); // Hello, JavaScript!

このように、代入演算子を正しく理解して使いこなすことで、数値の計算や文字列の結合などが効率的になり、コード全体がすっきりと整理されます。特にゲームのスコア計算やポイント管理、テキスト生成などの場面で大活躍します。基本を押さえた上で、様々な演算子を組み合わせて活用することが、JavaScript上達の近道です。

先生と生徒の振り返り会話

生徒

「先生、代入演算子ってたくさん種類がありますけど、どう使い分ければいいんでしょうか?」

先生

「基本は=で代入することです。そこから、数値を足したり引いたりしたい場合は+=-=を使います。掛け算や割り算も同じ要領で*=/=を使えば簡単にできます。」

生徒

「文字列の結合もできるんですよね?+=で追加していく感じですか?」

先生

「その通りです。例えばメッセージや文章を作るときには、+=で順番に文字列を追加していけます。コードが長くならず、読みやすくなります。」

生徒

「なるほど、複数の演算子を組み合わせると一度に計算と代入ができて便利なんですね。」

先生

「そうです。実際のプログラムでもスコア計算やポイント調整などに活用できます。最初は一つずつ理解して、徐々に組み合わせて使うと上達が早いですよ。」

生徒

「わかりました。まずは=から練習して、次に+=-=を使いこなせるようにします!」

先生

「その意気です。代入演算子はJavaScriptの基礎中の基礎なので、繰り返し使って覚えることが大切です。」

カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptのスコープとは?ローカル変数・グローバル変数の違いと使い分け
New2
TypeScript
TypeScriptで型の合成時に発生する型エラーの対処法を徹底解説!初心者にもわかりやすく解説
New3
TypeScript
TypeScriptでAPI呼び出しをラップするユーティリティ関数の設計完全ガイド!初心者向けにAxiosやFetchの使い方を解説
New4
TypeScript
TypeScriptのMapped Typesとインターフェースの連携方法を徹底解説!初心者でも理解できる型変換の基本
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのループで無限ループが起きる原因と対策を初心者向けに徹底解説!
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptの文字列の長さを取得する(lengthプロパティ)
No.4
Java&Spring記事人気No4
TypeScript
TypeScriptのファイル分割とimport/exportの基本を徹底解説!初心者でも安心のやさしい入門
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.6
Java&Spring記事人気No6
TypeScript
TypeScriptの始め方:開発環境の構築手順【初心者向け】
No.7
Java&Spring記事人気No7
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのプリミティブ型と参照型の違いを初心者向けに解説