【JavaScript入門】演算子とは

演算子

演算子（operator:オペレータ）とは、演算を行うために使用される記号や文字のことです。代表的な演算子には、「+」「-」「*」「/」などがあります。

オペランドとは、演算子に対して演算を行う値のことです。例えば、式「3 + 2」において、「3」と「2」がオペランドになります。

また、演算子によって必要とされるオペランドの数は異なります。一部の演算子は1つのオペランドだけを必要とし、また別の演算子は2つのオペランドを必要とします。演算子とオペランドを組み合わせることによって、複雑な演算を行うことができます。

演算子の優先順位

演算子の優先順位は、演算子が評価される順序を示すもので、優先順位が高い演算子から評価されます。例えば、「5 + 4 * 3」の場合、乗算演算子の優先順位が加算演算子よりも高いため、「4 * 3」が先に評価され、「5 + 12」となります。

優先順位はグループ化演算子「()」を使用することが変更できます。例えば、「(5 + 4) * 3」の場合、加算演算子がグループ化演算子で囲まれているため、「5 + 4」が先に評価され、「9 * 3」となります。

演算子の結合性

演算子には結合性という概念があります。演算子の結合性は、優先順位が同じ演算子が同時に使用された場合に、どの演算子が優先されるかを決定します。結合性には左結合、右結合があります。

左結合の演算子は、左から右へと順番に演算が行われます。例えば、「5 – 3 – 1」という式では、最初に「5 – 3」が計算されてから、「2 – 1」が計算されます。

右結合の演算子は、右から左へと順番に演算が行われます。例えば、「a = b = 1」という式では、まず右側の「b = 1」が評価されてから、「a = b」が評価されます。

以下が演算子の優先順位の一覧表です。

※MDNから引用

グループ演算子

グループ演算子は、括弧を使って複数の式をまとめることができます。この演算子を使用することで、優先順位を変更できます。以下は、グループ演算子を使用した例です。

 let result = (2 + 3) * 4;
 console.log(result); // 出力結果: 20

この例では、まず「2 + 3」が計算され、結果が「5」となります。その後、「5 * 4」が計算され、結果が「20」となります。グループ演算子を使用しなかった場合、掛け算が先に計算されるため、結果は「14」となってしまいます。

算術演算子

以下に、JavaScriptの算術演算子の例を示します。

 let a = 5;
 let b = 3;
 ​
 // 加算
 let sum = a + b;
 console.log(sum); // 出力結果: 8
 ​
 // 減算
 let difference = a - b;
 console.log(difference); // 出力結果: 2
 ​
 // 乗算
 let product = a * b;
 console.log(product); // 出力結果: 15
 ​
 // 除算
 let quotient = a / b;
 console.log(quotient); // 出力結果: 1.6666666666666667
 ​
 // 剰余
 let remainder = a % b;
 console.log(remainder); // 出力結果: 2
 ​
 // べき乗
 let power = a ** b;
 console.log(power); // 出力結果: 125
 ​
 // インクリメント
 a++;
 console.log(a); // 出力結果: 6
 ​
 // デクリメント
 b--;
 console.log(b); // 出力結果: 2

上記の例では、変数「a」には数値「5」、変数「b」には数値「3」が代入されています。加算、減算、乗算、除算、剰余、べき乗の演算子を使用して、それぞれ計算しています。また、インクリメント演算子とデクリメント演算子を使用して、変数「a」と「b」を1ずつ増減させています。

前置と後置の挙動の違い

インクリメント演算子「++」とデクリメント演算子「–」には、前置と後置の2つの方法があります。前置を使用する場合は、演算子を変数の前に置きます。この場合、変数の値が変更された後に式が評価されます。後置を使用する場合は、演算子を変数の後ろに置きます。この場合、式が評価された後に変数の値が変更されます。

 let a = 0;
 ​
 ++a // 前置パターン
 console.log(a) // 1
 --a
 console.log(a) // 0
 a++ // 後置パターン
 console.log(a) // 1
 a--
 console.log(a) // 0

前置インクリメント（とデクリメント）は、以下の2つの性質があります。

1. 元の変数の値に1足した値を、同じ変数の新しい値として代入

2. 元の変数の値に1足した値を、演算の結果として返す

 let a = 0;
 let b = ++a;
 console.log(a, b);  // 1, 1
 b = --a;
 console.log(a, b);  // 0, 0

しかし、後置インクリメント（とデクリメント）は、1の性質は同じですが、2が異なります。後置では演算の結果を返すのではなく、元の変数の値を返します。

 let a = 0;
 let b = a++;
 console.log(a, b);  // 1, 0
 b = a--;
 console.log(a, b);  // 0, 1

等価演算子

等価演算子は、値を比較する際に使う演算子で、戻り値をBoolean型の真偽値、つまりtrueまたはfalseで返します。以下は、JavaScriptにおける等価演算子の一覧です。

演算子	名称	説明
==	等価演算子	左右の値が等しい場合にtrueを返します。
===	厳密等価演算子	左右の値が厳密に等しい場合にtrueを返します。
!=	不等価演算子	左右の値が等しくない場合にtrueを返します。
!==	厳密不等価演算子	左右の値が厳密に等しくない場合にtrueを返します。

厳密等価演算子と等価演算子

JavaScriptには等価演算子として、厳密等価演算子「===」と等価演算子「==」があります。以下は、それぞれの使い方の例です。

厳密等価演算子「===」

厳密等価演算子「===」は、比較する2つの値が厳密に同じ型で、同じ値である場合にtrueを返します。型が異なる場合はfalseを返します。

 let a = 5;
 let b = "5";
 ​
 console.log(a === 5); // 出力結果: true
 console.log(a === b); // 出力結果: false

この例では、変数「a」に数値「5」が代入されています。変数「b」には文字列「”5″」が代入されています。「===」演算子を使用して、変数「a」が数値「5」と厳密に等しい場合にtrueを返し、変数「a」と「b」が厳密に等しくない場合にfalseを返します。

等価演算子「==」

等価演算子「==」は、比較する2つの値が同じ値である場合にtrueを返します。また、型が異なる場合には暗黙的な型変換を行って比較します。

 let a = 5;
 let b = "5";
 ​
 console.log(a == 5); // 出力結果: true
 console.log(a == b); // 出力結果: true

この例では、変数「a」に数値「5」が代入されています。変数「b」には文字列「”5″」が代入されています。「==」演算子を使用して、変数「a」と数値「5」が等しい場合にtrueを返し、変数「a」と「b」が暗黙的な型変換で比較されるため、文字列「”5″」を数値に変換してから比較し、trueを返します。

等価演算子「==」は、暗黙的な型変換を行うため、予期しない結果をもたらすことがあります。そのため、厳密等価演算子「===」が推奨されます。

オブジェクトの比較

等価演算子でオブジェクトを比較する場合、オブジェクトの参照（アドレス）を比較します。つまり、2つの異なるオブジェクトを作成し、同じ値を持たせた場合でも、それらは異なるオブジェクトとして扱われます。

例えば、以下のようなコードを考えてみます。

 const obj1 = { name: "Taro" };
 const obj2 = { name: "Taro" };
 console.log(obj1 === obj2); // false

これらの2つのオブジェクトは、同じ値を持っていますが、異なるオブジェクトとして扱われます。したがって、以下の式はfalseを返します。

しかし、同じオブジェクトを参照する変数を比較する場合、等価演算子はtrueを返します。例えば、以下のようなコードを考えます。

 const obj1 = { name: "Taro" };
 const obj2 = obj1;
 console.log(obj1 === obj2); // true

これは、obj2がobj1と同じオブジェクトを参照しているため、等価演算子はtrueを返します。

関係演算子

関係演算子は、2つの値の関係を比較し、Boolean型の真偽値を返します。以下は、関係演算子の種類とコードの例です。

演算子	説明
<	左辺の値が右辺の値より小さい場合にtrueを返します。
>	左辺の値が右辺の値より大きい場合にtrueを返します。
<=	左辺の値が右辺の値以下の場合にtrueを返します。
>=	左辺の値が右辺の値以上の場合にtrueを返します。

 const a = 5;
 const b = 10;
 ​
 console.log(a < b); // true
 console.log(a > b); // false
 console.log(a <= b); // true
 console.log(a >= b); // false

文字列の比較

関係演算子は、文字列の比較にも使用することができます。文字列の比較は、文字列のUnicodeコード値に基づいて行われます。

例えば、以下のような文字列比較のコードを考えます。

 const str1 = "apple";
 const str2 = "banana";
 ​
 console.log(str1 < str2); // true
 console.log(str1 > str2); // false

この場合、文字列”apple”と”banana”を比較しています。”a”は”b”よりもUnicodeコード値が小さいため、str1 < str2はtrueを返します。同様に、”a”は”b”よりもUnicodeコード値が小さいため、str1 > str2はfalseを返します。

ただし、文字列の場合は、大小文字の違いによって比較結果が異なる場合があります。例えば、以下のようなコードを考えます。

 const str1 = "apple";
 const str2 = "Apple";
 ​
 console.log(str1 < str2); // false
 console.log(str1 > str2); // true

上の例は、文字列”apple”と”Apple”を比較しています。大文字と小文字ではUnicodeコード値が異なるため、比較結果は異なります。

・アルファベット文字の比較はABC順に大きくなる

・アルファベットの大文字と小文字は、大文字の方が小さい

・数字や記号はアルファベットより小さい

・ひらがなとカタカナの比較はあいうえお順に大きくなる

・ひらがなはカタカナより小さい

代入演算子

JavaScriptには、代入演算子と自己代入演算子があります。代入演算子は、値を変数に代入するために使用されます。自己代入演算子は、変数の値を変更するために使用されます。

以下は、代入演算子の簡単な例です。

 let x = 5;
 let y = x;
 ​
 console.log(y); // 5

変数xに5を代入し、変数yに変数xの値を代入しています。

自己代入演算子の一覧が以下です。

演算子	説明	コード例	結果
+=	左オペランドに右オペランドを加え、その結果を左オペランドに代入します。	let x = 5; x += 3;	xの値は8になります。
-=	左オペランドから右オペランドを引き、その結果を左オペランドに代入します。	let x = 5; x -= 3;	xの値は2になります。
*=	左オペランドに右オペランドを乗じ、その結果を左オペランドに代入します。	let x = 5; x *= 3;	xの値は15になります。
/=	左オペランドを右オペランドで除し、その結果を左オペランドに代入します。	let x = 6; x /= 3;	xの値は2になります。
%=	左オペランドを右オペランドで除した余りを、左オペランドに代入します。	let x = 7; x %= 3;	xの値は1になります。
**=	左オペランドを右オペランドで累乗し、その結果を左オペランドに代入します。	let x = 2; x **= 3;	xの値は8になります。

以上のように、自己代入演算子は、変数に値を代入しながら演算を行うことができ、コードの簡潔さを向上させることができます。

論理演算子

JavaScriptの論理演算子には、以下の3つがあります。

1. 論理積（AND）演算子 && ：左辺と右辺が両方ともtrueの場合にtrueを返します。

2. 論理和（OR）演算子 || ：左辺と右辺のいずれかがtrueの場合にtrueを返します。

3. 否定（NOT）演算子 ! ：右辺がtrueならばfalseを、falseならばtrueを返します。

以下は、それぞれの演算子の使い方と例です。

論理積（AND）演算子 &&

 // 左辺と右辺が両方とも true なので、結果は true になる
 let x = (5 > 3) && (2 < 4);
 console.log(x); // true
 ​
 // 左辺が false なので、右辺の評価がされず結果は false になる
 let y = (5 < 3) && (2 < 4);
 console.log(y); // false

論理和（OR）演算子 ||

 // 左辺が true なので、右辺の評価がされず結果は true になる
 let x = (5 > 3) || (2 < 4);
 console.log(x); // true
 ​
 // 左辺と右辺が両方とも false なので、結果は false になる
 let y = (5 < 3) || (2 > 4);
 console.log(y); // false

否定（NOT）演算子 !

 // 右辺が true なので、結果は false になる
 let x = !(5 > 3);
 console.log(x); // false
 ​
 // 右辺が false なので、結果は true になる
 let y = !(5 < 3);
 console.log(y); // true

これらの論理演算子を使うことで、複雑な条件式を簡潔に書くことができます。

三項演算子

三項演算子は、条件式の真偽に応じて異なる値を返すために使用されます。基本的にはif-else文と同じような使い方をしますが、より簡潔に記述できます。

三項演算子は以下のように書きます。

 条件式 ? trueの場合の値 : falseの場合の値

例えば、xという変数が10より大きければ”xは10より大きい”、そうでなければ”xは10以下”という文字列を返す場合は、以下のように記述できます。

 let x = 12;
 let result = (x > 10) ? "xは10より大きい" : "xは10以下";
 console.log(result); // "xは10より大きい"

また、三項演算子は入れ子にすることもできます。例えば、xが10より大きい場合は”xは10より大きい”を、xが5より大きい場合は”xは5より大きい”を、それ以外の場合は”xは5以下”を返すという条件式は以下のように記述できます。

 let x = 12;
 let result = (x > 10) ? "xは10より大きい" : (x > 5) ? "xは5より大きい" : "xは5以下";
 console.log(result); // "xは10より大きい"

三項演算子は、条件式が短くシンプルな場合には、if-else文よりもコードを簡潔に記述できます。ただし、条件式が複雑になると可読性が低下するため、使いどころに注意が必要です。

カンマ演算子

カンマ演算子は、複数の式を連結して1つの式にする演算子です。カンマ演算子を用いることで、複数の式を1行にまとめて書くことができます。

カンマ演算子の基本的な構文は以下の通りです。

 式1, 式2, 式3, ...

例えば、以下のようにカンマ演算子を使用することで、複数の変数を1行にまとめて宣言することができます。

 let x = 1, y = 2, z = 3;
 console.log(x, y, z); // 1 2 3

また、カンマ演算子を使って複数の式を1行にまとめることもできます。

 let x = 1, y = 2;
 x++, y++;
 console.log(x, y); // 2 3

この場合、x++とy++の2つの式が順番に実行され、その結果がカンマで連結されて1つの式となります。

カンマ演算子は可読性が低下しやすく、使いすぎや、適切な使いどころを注意する必要があります。

Null合体演算子

Null合体演算子は、左辺の式がnullまたはundefinedである場合、右辺の式を評価して返す演算子です。Null合体演算子は、??で表されます。

以下はNull合体演算子を使用した例です。

 const x = null;
 const y = 10;
 const z = x ?? y; // xがnullなのでyが代入される
 console.log(z); // 10

左辺の変数xがnullなので、Null合体演算子の右辺の値yが変数zに代入されます。もし左辺がnullでなければ、左辺の値が返されます。

Null合体演算子は、三項演算子と同様に条件式を簡潔に表現できます。以下はNull合体演算子と三項演算子を比較した例です。

 const x = null;
 const y = 10;
 const z = x !== null && x !== undefined ? x : y; // 三項演算子を使用
 const w = x ?? y; // Null合体演算子を使用
 console.log(z); // 10
 console.log(w); // 10

左辺がnullでない場合に限り、三項演算子とNull合体演算子は同じ結果を返します。しかし、コードが複雑になる場合や、複数の値を比較する場合には、Null合体演算子がより簡潔で見やすくなることがあります。

オプショナルチェイニング演算子

オプショナルチェイニング演算子は、オブジェクトのプロパティに安全にアクセスするための演算子です。もしオブジェクトがnullまたはundefinedである場合、エラーを発生させる代わりにundefinedを返します。オプショナルチェイニング演算子は、?.で表されます。

以下はオプショナルチェイニング演算子を使用した例です。

 const obj = {
   prop1: {
     prop2: 'value'
   }
 };
 ​
 const prop2Value = obj.prop1?.prop2;
 console.log(prop2Value); // 'value'
 ​
 const nonExistentValue = obj.prop1?.prop3;
 console.log(nonExistentValue); // undefined

例のように、オプショナルチェイニング演算子を使用することで、obj.prop1がnullまたはundefinedの場合でもエラーが発生せずに、undefinedが返されます。

オプショナルチェイニング演算子は、メソッドチェインにも使用できます。以下は、メソッドチェインにオプショナルチェイニング演算子を使用した例です。

 const obj = {
   prop1: {
     func1: function() {
       console.log('func1 called');
       return this;
     },
     prop2: 'value'
   }
 };
 ​
 obj.prop1.func1?.().prop2; // 'value'

例のように、メソッドチェインにオプショナルチェイニング演算子を使用することで、チェイン内のメソッドが存在しない場合でもエラーが発生せずに、undefinedが返されます。

オプショナルチェイニング演算子は、簡潔かつ安全なコードを書くために非常に役立ちます。しかし、過剰に使用するとコードが読みにくくなる場合があるため、適切なタイミングで使用するようにしましょう