初心者が知るべきJavaScriptの演算子とその使い方✍️

公開日 : 2023.12.11 最終更新日 : 2024.03.21

コーディング

こんにちは、AndHAコーディング部です。

前回は、JavaScriptにおけるデータ型とリテラルをマスターしよう🧙‍♂️と題し、基本的なデータ型とリテラルについて学びました。

今回は、初心者が知るべきJavaScriptの演算子とその使い方について更に深く掘り下げていきます。この知識は、効果的なコーディングとバグの少ないプログラム作成に不可欠です。一度で理解しきるのは難しいですが、何度も見返して学んでいきましょう！

初心者が知るべきJavaScriptの演算子とその使い方

JavaScriptの演算子はコードの「文法」のようなものであり、変数や値を操作するために使用されます。これらの演算子を理解することで、より効率的で読みやすいコードを書くことが可能になります。

今回は、演算子を解説するにあたり、4つのグループに分けて解説していきます。

1. 基本的な演算子グループ

基本的な演算子グループには、算術演算子、比較演算子、代入演算子があります。これらは日々のコーディングにおいて頻繁に使用される基本的なツールです。また、多くの演算子は「二項演算子」として機能し、2つの値（オペランド）を取り、特定の操作を行います。

それでは、各演算子の役割と使い方を詳しく見ていきましょう！

算術演算子

算術演算子は基本的な数学計算に使用されます。
これには加算(+), 減算(-), 乗算(*), 除算(/), 剰余(%)が含まれます。

加算演算子 (+)

加算演算子は、2つの数値を加えるために使用されます。

let addNum1 = 10;
let addNum2 = 5;
console.log(addNum1 + addNum2); // 15

減算演算子 (-)

減算演算子は、1つの数値から別の数値を引くために使います。

let subtractNum1 = 10;
let subtractNum2 = 5;
console.log(subtractNum1 - subtractNum2); // 5

乗算演算子 (*)

乗算演算子は、2つの数値を掛け合わせるために用いられます。

let multiplyNum1 = 10;
let multiplyNum2 = 5;
console.log(multiplyNum1 * multiplyNum2); // 50

除算演算子 (/)

除算演算子は、1つの数値を別の数値で割るために使用されます。

let divideNum1 = 10;
let divideNum2 = 5;
console.log(divideNum1 / divideNum2); // 2

剰余演算子 (%)

剰余演算子は、数値を別の数値で割った際の余りを求めるのに使用されます。

let remainderNum1 = 15;
let remainderNum2 = 4;
console.log(remainderNum1 % remainderNum2); // 3

これらの算術演算子を使用することで、JavaScriptでの数値計算を簡単に行うことができます。
次に進む前に、これらの基本的な演算に慣れることをお勧めします。

比較演算子

比較演算子は、2つの値を比較し、その結果として真偽値（true または false）を返します。
これには厳密等価演算子(===), 厳密不等価演算子(!==), 大小関係(>, <, >=, <=)などがあります。
===（厳密等価演算子）は値だけでなく型も比較し、JavaScriptにおけるベストプラクティスとされています。

なぜ等価演算子(==, !=)を使うべきではないのか🤔

等価演算子(==, !=)は型の強制変換を行います。
つまり、比較する値の型が異なる場合でも、型を変換してから比較を行います。
この自動的な型変換は予期しない結果を引き起こす可能性があり、バグの原因になります。
そのため、厳密等価演算子(===, !==)の使用が推奨されています。
これらは値と型の両方が一致する場合のみtrueを返し、より予測可能で安全なコードを書くことができます。

厳密等価演算子 (===)

値と型が完全に一致する場合にのみtrueを返します。型変換は行われません。

let num1 = 5;
let str1 = '5';
console.log(num1 === 5); // true
console.log(str1 === 5); // false

厳密不等価演算子 (!==)

値または型のいずれかが一致しない場合にtrueを返します。

let num2 = 5;
let num3 = 10;
console.log(num2 !== num3); // true
console.log(num2 !== 5); // false

大なり演算子 (>)

左側の値が右側の値より大きい場合にtrueを返します。

let num4 = 10;
let num5 = 5;
console.log(num4 > num5); // true
console.log(num5 > num4); // false

大なりイコール演算子 (>=)

左側の値が右側の値以上であればtrueを返します。

let num6 = 10;
console.log(num6 >= 10); // true
console.log(num6 >= 11); // false

小なり演算子 (<)

左側の値が右側の値より小さい場合にtrueを返します。

let num7 = 5;
let num8 = 10;
console.log(num7 < num8); // true
console.log(num8 < num7); // false

小なりイコール演算子 (<=)

左側の値が右側の値以下であればtrueを返します。

let num9 = 10;
console.log(num9 <= 10); // true
console.log(num9 <= 9); // false

これらの比較演算子を使用することで、条件分岐やデータの比較を正確に行うことができます。
特に厳密等価演算子(===)と厳密不等価演算子(!==)は、型変換による意図しない挙動を避けるために重要です。

代入演算子

代入演算子は、変数に値を割り当てる際に使用します。
最も基本的な代入演算子は=ですが、これに加えて加算代入(+=), 減算代入(-=), 乗算代入(*=), 除算代入(/=)などがあります。
これらは、特定の演算を行った結果を変数に代入する際に使うこともできます。

代入演算子 (=)

基本的な代入演算子=は、右辺の値を左辺の変数に割り当てます。
これは最も基本的で頻繁に使用される代入演算子です。

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

加算代入 (+=)

加算代入演算子+=は、変数の現在の値に右辺の値を加え、その結果を変数に再代入します。

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

減算代入 (-=)

減算代入演算子-=は、変数の現在の値から右辺の値を引き、その結果を変数に再代入します。

let num = 10;
num -= 5; // num = num - 5 と同じ
console.log(num); // 5

乗算代入 (*=)

乗算代入演算子*=は、変数の現在の値に右辺の値を掛け、その結果を変数に再代入します。

let num = 10;
num *= 5; // num = num * 5 と同じ
console.log(num); // 50

除算代入 (/=)

除算代入演算子/=は、変数の現在の値を右辺の値で割り、その結果を変数に再代入します。

let num = 10;
num /= 5; // num = num / 5 と同じ
console.log(num); // 2

これらの代入演算子を使用することで、コードを簡潔にし、可読性を高めることができます。
特に、反復的な計算を行う際にとても便利です。

2. 複合的な演算子グループ

複合的な演算子グループには、文字列結合演算子、条件（三項）演算子、そして論理演算子が含まれています。プログラム内でより複雑なロジックを簡潔に表現するための強力なツールになります。

文字列結合演算子：テキストの組み合わせやデータの整形に用いられる。
条件（三項）演算子：簡潔な条件分岐を可能にする。
論理演算子：複数の条件を効率的に組み合わせるのに役立つ。

これらの演算子を理解し、適切に使用することで、コードをより読みやすく、効果的にすることができます。

それでは、各演算子の特徴と使い方を詳しく見ていきましょう！

文字列結合演算子

文字列結合演算子+は、二つ以上の文字列を連結して新しい文字列を作成するために使用されます。これは非常に一般的な操作で、文字列のデータを組み合わせたり、動的なメッセージを生成したりする際に役立ちます。

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

条件 (三項) 演算子

条件（三項）演算子条件 ? 式1 : 式2は、短いif-else文を一行で書くことができる演算子です。
条件がtrueの場合は式1が、falseの場合は式2が評価されます。
コードを簡潔にし、可読性を高めるのに役立ちます。

let age = 20;
console.log(age >= 18 ? "成人" : "未成年"); // "成人"

論理演算子

論理演算子（&&, ||, !）は、真偽値を操作するための演算子です。
&&はAND演算子で、すべての条件がtrueの場合にtrueを返します。
||はOR演算子で、少なくとも一つの条件がtrueの場合にtrueを返します。
!はNOT演算子で、真偽値を反転させます。

let hasLicense = true;
let hasGoodVision = false;

console.log(hasLicense && hasGoodVision); // false (AND)
console.log(hasLicense || hasGoodVision); // true (OR)
console.log(!hasLicense); // false (NOT)

これらの複合的な演算子を使用することで、JavaScriptでより複雑なロジックを簡潔に表現することが可能になります。

3. 高度な演算子グループ

高度な演算子グループには、ビット演算子とNull合体演算子が含まれています。特定の高度な操作や条件を処理するための演算子を提供します。

ビット演算子：数値のビットレベルでの演算に使用され、特に性能が重視される場面や低レベルのデータ処理において重要です。
Null合体演算子：値がnullまたはundefinedの場合に代替の値を提供するのに用いられ、コードの安全性を高めるのに役立ちます。

これらの演算子を適切に使いこなすことで、より効率的で堅牢なプログラムを作成することが可能となります。

それでは、詳しく見ていきましょう！

ビット演算子

ビット演算子は数値をそのビットレベルで操作します。
これにはビットごとのAND(&), OR(|), XOR(^), NOT(~), 左シフト(<<), 右シフト(>>), 符号なし右シフト(>>>)が含まれます。低レベルのデータ操作、特に性能が要求される処理やアルゴリズムの実装において有用です。

let num1 = 5;        // 二進数で 0101
let num2 = 3;        // 二進数で 0011

console.log(num1 & num2); // 0101 & 0011 = 0001 (1)
console.log(num1 | num2); // 0101 | 0011 = 0111 (7)
console.log(num1 ^ num2); // 0101 ^ 0011 = 0110 (6)
console.log(~num1);       // ~0101 = 1010 (-6)
console.log(num1 << 1);   // 0101 << 1 = 1010 (10)
console.log(num1 >> 1);   // 0101 >> 1 = 0010 (2)
console.log(num1 >>> 1);  // 0101 >>> 1 = 0010 (2)

Null合体演算子

ES2020で導入されたNull合体演算子(??)は、左辺の値がnullまたはundefinedの場合にのみ右辺の値を返します。
これは変数にデフォルト値を設定する際に特に有効で、短く明確なコードを書くことができます。

let userName = null;
let defaultName = "ゲスト";

console.log(userName ?? defaultName); // "ゲスト"

userName = "Alice";
console.log(userName ?? defaultName); // "Alice"

ビット演算子とNull合体演算子は、JavaScriptのより高度な側面を表しており、これらを使いこなすことで、より複雑な問題を効率的に解決することが可能になります。

4. 特殊な演算子グループ

特殊な演算子グループには、単項演算子、グループ化演算子、カンマ演算子が含まれています。コードの特定の側面や特定の挙動を制御するためのユニークな演算子を提供します。

単項演算子：単一のオペランド（例えば変数や値）に作用し、型変換や値の反転などの操作を行います。
グループ化演算子：式の評価順序を明示的に指定し、複数の演算子を組み合わせる際の優先順位を制御します。
カンマ演算子：複数の式を一連の操作としてグループ化し、左から右への順序で評価します。

これらの演算子は、JavaScriptプログラミングの柔軟性を高め、より洗練されたコードの記述を可能にします。詳しく見ていきましょう！

単項演算子

単項演算子は一つのオペランドに対して操作を行います。
これには、型変換を行う+（数値への変換）、-（符号の反転）、typeof（オペランドの型を返す）、!（ブール値の反転）などが含まれます。

let num = "5";
console.log(+num);  // 数値の5に変換

let flag = true;
console.log(!flag);  // false（ブール値の反転）

let variable = 5;
console.log(typeof variable);  // "number"（型の確認）

グループ化演算子

グループ化演算子()は、演算の優先順位を明示的に制御します。
これにより、複雑な式内でどの演算が最初に行われるかを指定でき、計算の結果に影響を与えることができます。

let result = (3 + 5) * 2;
console.log(result);  // 16（先に括弧内の加算が行われ、その後乗算）

カンマ演算子

カンマ演算子,は、複数の式を一つの文で評価し、最後の式の結果を返します。
この演算子は左から順に式を評価し、通常は複数の変数を一度に初期化する際などに使用されます。
一般にカンマ演算子を利用する機会は多くないですが、複数の式が連続して評価されることを理解しておくことは重要です。

const x = (1, 2, 3);
console.log(x); // 3

let a = 1, b = 2, c = (a + b);
console.log(c); // 3

これらの特殊な演算子を使いこなすことで、JavaScriptのコードをより効果的に、そして柔軟に書くことができます。

演算子の優先順位

JavaScriptでは、複数の演算子が組み合わさった式を評価する際に演算子の優先順位が重要な役割を果たします。この優先順位は、計算の順序を明確にし、コードの意図を正確に伝えるために必要です。

特に加算(+), 減算(-), 乗算(*), 除算(/), 剰余(%)などの演算子において、正しい優先順位の理解は不可欠です。

優先順位の概要

乗算(*), 除算(/), 剰余(%)は加算(+)や減算(-)よりも優先順位が高い。
同一の優先順位を持つ演算子（例：乗算、除算、剰余）は左から右へと順に評価される。

間違った順序で演算が行われると、予期しない結果やバグの原因になるため、優先順位の理解は非常に重要です。

// 乗算と加算の例
let result = 5 + 3 * 2; // 乗算が先: 3 * 2 が計算され、その後 5 が加算される
console.log(result); // 11

// グループ化演算子の使用例
result = (5 + 3) * 2; // グループ化演算子で加算が先: (5 + 3) * 2
console.log(result); // 16

// 乗算、除算、剰余の組み合わせの例
result = 10 * 5 / 2; // 左から順に評価: (10 * 5) / 2
console.log(result); // 25

result = 10 / 2 * 5; // 左から順に評価: (10 / 2) * 5
console.log(result); // 25

result = 10 % 3 * 2; // 左から順に評価: (10 % 3) * 2
console.log(result); // 2

このように、演算子の優先順位を理解し、必要に応じてグループ化演算子を使用することで、正確かつ意図した通りの結果を得ることが可能です。これにより、複雑な算術式や条件式を正しく計算し、バグを防ぐことができます。