JavaScriptの代入演算子を徹底解説！初心者にやさしい説明付き

●JavaScriptの代入演算子とは

プログラミング言語の学習を始めたばかりの頃でも、変数に値を代入する方法を知ることは非常に重要です。

JavaScriptにおいて、この役割を担っているのが「代入演算子」です。

代入演算子は、変数に値を割り当てるために使用されます。

右辺の値を左辺の変数に代入するという、シンプルだけど強力な機能を持っています。

JavaScriptを学ぶ上で、代入演算子の理解は欠かせません。

○代入演算子の基本的な使い方

代入演算子の中でも最も基本的なのが、単純代入演算子の「=」です。

次のような形式で使用します。

変数名 = 値;

右辺の「値」を、左辺の「変数名」に代入するという流れですね。

これにより、変数は指定された値を持つようになります。

○サンプルコード1：変数への代入

では、実際にコードを見てみましょう。

let name = "John";
let age = 25;
let isStudent = true;

このコードでは、nameという変数に”John”という文字列を、ageという変数に25という数値を、isStudentという変数にtrueというブール値を代入しています。

実行結果は次のようになります。

name: "John"
age: 25
isStudent: true

各変数に、指定した値が代入されていることがわかりますね。

このように、代入演算子を使って変数に値を割り当てることができます。

代入のタイミングとしては、変数を宣言する際に初期値を設定する場合や、変数の値を上書きする場合などが挙げられます。

●代入演算子の種類

JavaScriptには、代入演算子にもいくつかの種類があるんです。

それぞれの特徴を理解しておくと、コードの幅が広がりますよ。

○単純代入演算子(=)

まずは、もっともシンプルな単純代入演算子の「=」です。

これは、右辺の値を左辺の変数に代入するための演算子ですね。

先ほどのサンプルコードでも使用しました。

○サンプルコード2：値の上書き

単純代入演算子は、変数に初めて値を代入する場合だけでなく、既に値が代入されている変数に新しい値を上書きする場合にも使えます。

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

num = 20;
console.log(num); // 20

最初にnumという変数に10を代入し、その後で20を代入し直しています。

実行結果

10
20

このように、単純代入演算子を使うことで、変数の値を自由に上書きできるんです。

○算術代入演算子(+=, -=, *=, /=, %=)

次に、算術代入演算子について見ていきましょう。

以下らは、変数の値に対して算術操作を行いつつ、その結果を同じ変数に代入するための演算子です。

• +=：加算代入
• -=：減算代入
• *=：乗算代入
• /=：除算代入
• %=：剰余代入

○サンプルコード3：算術代入の例

算術代入演算子の使い方を、コードで確認してみましょう。

let count = 0;
count += 5;
console.log(count); // 5

count -= 2;
console.log(count); // 3

count *= 3;
console.log(count); // 9

count /= 2;
console.log(count); // 4.5

count %= 2;
console.log(count); // 0.5

実行結果

5
3
9
4.5
0.5

このように、算術代入演算子を使うと、変数の値を更新しつつ、その結果を同じ変数に代入することができます。

コードがスッキリしますね。

○ビット演算代入演算子(&=, |=, ^=, <<=, >>=, >>>=)

さらに、ビット演算代入演算子というものもあります。

これらは、ビット演算の結果を同じ変数に代入するための演算子です。

• &=：AND代入
• |=：OR代入
• ^=：XOR代入
• <<=：左シフト代入
• >>=：右シフト代入
• >>>=：ゼロ埋め右シフト代入

○サンプルコード4：ビット演算代入の例

ビット演算代入演算子の例を見てみましょう。

let x = 5;   // 101 in binary
let y = 3;   // 011 in binary

x &= y;
console.log(x); // 1 (001 in binary)

x |= y;
console.log(x); // 3 (011 in binary)

x ^= y;
console.log(x); // 0 (000 in binary)

x = 5;       // 101 in binary
x <<= 1;
console.log(x); // 10 (1010 in binary)

x = 5;       // 101 in binary
x >>= 1;
console.log(x); // 2 (10 in binary)

x = 5;       // 101 in binary
x >>>= 1;
console.log(x); // 2 (10 in binary)

実行結果

1
3
0
10
2 
2

ビット演算は、数値をビット（0と1）のレベルで操作するための演算です。

特定のビット位置の値を取り出したり、変更したりする場合に使用します。

●代入演算子の注意点

代入演算子を使う際には、いくつか気をつけなければいけない点があります。

初心者の方は特に、これらの注意点をしっかりと理解しておくことが大切ですよ。

○代入演算子の優先順位

まず、代入演算子の優先順位について見ていきましょう。

JavaScriptでは、代入演算子は比較的優先順位が低いんです。

つまり、他の演算子と一緒に使う場合、代入演算子よりも先に他の演算子の処理が行われるということですね。

例えば、次のようなコードがあったとします。

let x = 10;
let y = 20;
let z = x + y * 2;

このコードでは、yに2を掛ける演算が先に行われ、その結果にxが加算されます。

そして、最後にzに代入されるという流れになります。

実行結果

z: 50

このように、代入演算子は他の演算子よりも後に評価されるので、注意が必要ですね。

○値渡しと参照渡し

次に、値渡しと参照渡しについて理解しておく必要があります。

JavaScriptでは、プリミティブ型（数値、文字列、ブール値など）は値渡しで、オブジェクト型（配列、関数、オブジェクトなど）は参照渡しで扱われます。

値渡しの場合、変数に代入された値そのものがコピーされます。

一方、参照渡しの場合は、変数にはオブジェクトへの参照（メモリ上の住所）がコピーされます。

○サンプルコード5：オブジェクトの代入

具体的なコードを見てみましょう。

let obj1 = { x: 10, y: 20 };
let obj2 = obj1;

console.log(obj1); // { x: 10, y: 20 }
console.log(obj2); // { x: 10, y: 20 }

obj2.x = 30;

console.log(obj1); // { x: 30, y: 20 }
console.log(obj2); // { x: 30, y: 20 }

obj1とobj2は同じオブジェクトを参照しているので、obj2のプロパティを変更すると、obj1のプロパティも変更されてしまうんです。

実行結果

{ x: 10, y: 20 }
{ x: 10, y: 20 }
{ x: 30, y: 20 }
{ x: 30, y: 20 }

このように、オブジェクトを代入する際は、参照先が同じになることを理解しておく必要があります。

●よくあるエラーと対処法

JavaScriptの代入演算子を使っていると、時々エラーに遭遇することがあります。

初心者の方は特に、このエラーにどう対処すればいいのか戸惑ってしまうかもしれません。

そこで、ここではよくあるエラーとその対処法について見ていきたいと思います。

エラーメッセージをしっかりと読み解き、原因を突き止められるようになることが大切ですよ。

○代入時の型不一致エラー

まずは、代入時の型不一致エラーについてです。

JavaScriptでは、変数に代入する値の型が期待されている型と異なる場合にエラーが発生します。

例えば、数値型の変数に文字列を代入しようとすると、次のようなエラーが表示されます。

let num = 10;
num = "hello";
// Uncaught TypeError: Assignment to constant variable.

このエラーは、変数numが数値型として宣言されているのに、文字列を代入しようとしたために発生しています。

エラーメッセージをよく読むと、”Assignment to constant variable.”（定数への代入）と書かれています。

これは、変数numがconstで宣言されている場合に表示されるメッセージですね。

型不一致エラーを避けるためには、変数に代入する値の型を揃えることが重要です。

数値型の変数には数値を、文字列型の変数には文字列を代入するようにしましょう。

○未定義の変数への代入

次に、未定義の変数への代入エラーを見てみましょう。

JavaScriptでは、宣言されていない変数を使用しようとするとエラーが発生します。

次のようなコードを実行すると、エラーが表示されます。

x = 10;
console.log(x);
// Uncaught ReferenceError: x is not defined

このコードでは、変数xを宣言せずに代入しようとしているため、エラーが発生しています。

エラーメッセージには、”x is not defined”（xは定義されていません）と表示されています。

つまり、変数xが存在しないということですね。

未定義の変数へ代入するエラーを防ぐには、変数を使用する前に必ず宣言しておくことが大切です。

letやconstを使って変数を宣言し、その後で値を代入するようにしましょう。

○constへの再代入エラー

最後に、constへの再代入エラーについて見ていきます。

constは、一度値を代入すると変更できない定数を宣言するためのキーワードです。

constで宣言された変数に対して、別の値を代入しようとすると、エラーが発生します。

const num = 10;
num = 20;
// Uncaught TypeError: Assignment to constant variable.

このコードでは、constで宣言された変数numに対して、別の値を代入しようとしているためエラーが発生しています。

エラーメッセージは、先ほどの型不一致エラーと同じ”Assignment to constant variable.”（定数への代入）ですね。

constへの再代入エラーを避けるには、値を変更する必要がある変数にはletを使って宣言するようにしましょう。

constは、値が変化しない定数を宣言する際に使用します。

●代入演算子の応用例

ここまで、代入演算子の基本的な使い方や注意点について見てきましたが、実際のプログラミングでは、もう少し応用的な使い方もあるんです。

ここからは、代入演算子のさまざまな応用例を見ていきましょう。

実践的なコードを通して、代入演算子の活用方法を学んでいきましょう。

○サンプルコード6：条件付き代入

まずは、条件付き代入の例を見てみましょう。

これは、条件演算子（三項演算子）と組み合わせることで、条件に応じて変数に値を代入するテクニックです。

let age = 20;
let canDrink = (age >= 20) ? "お酒を飲めます" : "お酒は20歳から";

console.log(canDrink);
// "お酒を飲めます"

このコードでは、ageが20以上の場合は”お酒を飲めます”を、そうでない場合は”お酒は20歳から”を、canDrinkに代入しています。

実行結果

"お酒を飲めます"

このように、条件演算子を使うことで、条件に応じた値を変数に代入することができます。

if文を使わずに、簡潔に条件分岐ができるのが利点ですね。

○サンプルコード7：分割代入

次に、分割代入（Destructuring assignment）の例を見てみましょう。

これは、配列やオブジェクトから値を取り出して、個別の変数に代入するための構文です。

let [a, b, c] = [1, 2, 3];

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

let { x, y } = { x: 10, y: 20 };

console.log(x); // 10
console.log(y); // 20

このコードでは、配列[1, 2, 3]の値を、変数a、b、cにそれぞれ代入しています。

また、オブジェクト{ x: 10, y: 20 }のプロパティx、yの値を、変数x、yに代入しています。

実行結果

1
2
3
10
20

分割代入を使うことで、配列やオブジェクトの値を簡単に変数に割り当てることができます。

コードの可読性が上がり、変数の宣言と初期化をまとめて行えるのが利点です。

○サンプルコード8：定数への代入

constを使った定数への代入の例も見てみましょう。

constは、一度値を代入すると変更できない変数（定数）を宣言するためのキーワードです。

const PI = 3.14;
console.log(PI); // 3.14

PI = 3.14159; // Error: Assignment to constant variable.

このコードでは、定数PIに3.14を代入しています。

その後、PIに別の値を代入しようとすると、エラーが発生します。

実行結果

3.14
Error: Assignment to constant variable.

定数は、値が変更されないことが保証されるので、安全にデータを扱うことができます。

定数を使うことで、コードの意図が明確になり、バグを防ぐことができますね。

○サンプルコード9：関数への代入

最後に、関数への代入の例を見てみましょう。

JavaScriptでは、関数を変数に代入することができます。

let greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet("John")); // "Hello, John!"

let sayHello = greet;

console.log(sayHello("Jane")); // "Hello, Jane!"

このコードでは、関数を変数greetに代入しています。

その後、greetを呼び出すことで、関数を実行しています。

また、greetを別の変数sayHelloに代入することで、同じ関数を別の名前で呼び出すこともできます。

実行結果

"Hello, John!"
"Hello, Jane!"

関数を変数に代入できるのは、JavaScriptの大きな特徴の一つです。

これを利用して、高階関数（関数を引数に取ったり、関数を返したりする関数）を実現することができます。

まとめ

JavaScriptの代入演算子は、変数に値を代入するための基本的な演算子です。

単純代入演算子、算術代入演算子、ビット演算代入演算子など、さまざまな種類があり、それぞれの特徴を理解することが大切ですね。

代入演算子を使う際は、優先順位や値渡しと参照渡しの違いに注意しましょう。

また、よくあるエラーとその対処法を身につけることで、バグを未然に防ぐことができます。

条件付き代入や分割代入、関数への代入など、応用的な使い方を学ぶことで、より柔軟なプログラミングが可能になります。

実際にコードを書いて試しながら、JavaScriptの理解を深めていきましょう。