JavaScript 入門

JavaScript 演算子

演算子 (Operators) は、変数や値に対して操作を実行し、データを処理したり比較したりすることを可能にします。

演算子を理解することは、効率的でダイナミックな JavaScript コードを書くための鍵となります。本章では、算術、代入、そして比較演算子について網羅し、より複雑なプログラミングタスクに取り組むための強固な基礎を築いていきます。

1. 算術演算子 (Arithmetic Operators)

算術演算子は数学的な計算を行うために使用されます。JavaScript は標準的な算術演算子のセットを提供しており、数学の授業で見覚えのあるものも多いでしょう。

1.1 基礎的な演算:加算・減算・乗算・除算

これらの演算子は、基本的な算術演算とまったく同じように動作します。

  • 加算 (+): 2つのオペランドを足し合わせます。
  • 減算 (-): 最初のオペランドから2番目のオペランドを引きます。
  • 乗算 (*): 2つのオペランドを掛け合わせます。
  • 除算 (/): 最初のオペランドを2番目のオペランドで割ります。
let x = 10;
let y = 5;

console.log(x + y); // 出力: 15
console.log(x - y); // 出力: 5
console.log(x * y); // 出力: 50
console.log(x / y); // 出力: 2

1.2 剰余(余り)演算子 (%)

剰余演算子 (%) は、除算の余りを返します。

これはプログラミングにおいて非常に有用で、数値が偶数か奇数かを判断したり(2で割った余りが0かどうかを確認)、数値を特定の範囲内に制限したりする際によく使われます。

console.log(10 % 3); // 出力: 1 (10を3で割ると商が3で余りが1)
console.log(12 % 2); // 出力: 0 (12を2で割ると商が6で余りが0、つまり偶数)

1.3 指数演算子 ()

指数演算子 () は、最初のオペランドを2番目のオペランドの累乗にします。

console.log(2 ** 3); // 出力: 8 (2の3乗、つまり 2 * 2 * 2)
console.log(5 ** 2); // 出力: 25 (5の2乗)

1.4 インクリメント (++) と デクリメント (--) 演算子

これら2つの演算子は、変数の値を 1 増やしたり、1 減らしたりするために使用されます。これらには「前置」と「後置」の2種類の書き方があり、ロジックにわずかな違いがあります。

  • 前置 (Prefix, 例: ++x): 変数の値が先に変更され、その後、その新しい値が式の中で評価されます。
  • 後置 (Postfix, 例: x++): 変数の現在の値が先に式の中で評価され、その後、値が変更されます。
let a = 5;
console.log(a++); // 出力: 5 (先に元の値5を表示し、その後に a が 6 になる)
console.log(a);   // 出力: 6 (現在の a は 6)

let b = 5;
console.log(++b); // 出力: 6 (先に 6 になり、その後 6 を表示)
console.log(b);   // 出力: 6

let c = 10;
console.log(c--); // 出力: 10 (先に元の値10を表示し、その後に c が 9 になる)

let d = 10;
console.log(--d); // 出力: 9 (先に 9 になり、その後 9 を表示)

1.5 演算子の優先順位

優先順位を理解することは重要です。これは式の中で演算が実行される順番を決定します。例えば、乗算と除算は加算や減算よりも優先順位が高いです。括弧 () を使うことで、デフォルトの優先順位を変更できます。

console.log(3 + 4 * 2);   // 出力: 11 (先に乗算 4*2=8 を行い、次に 3 を足す)
console.log((3 + 4) * 2); // 出力: 14 (括弧によって先に加算 3+4=7 を行い、次に 2 を掛ける)

2. 代入演算子

代入演算子は変数に値を代入するために使用されます。最も基本的なのはイコール (=) ですが、JavaScript は計算と代入を組み合わせた複合代入演算子も提供しています。

演算子説明同等の式
=代入x = yx = y
+=加算代入x += yx = x + y
-=減算代入x -= yx = x - y
*=乗算代入x *= yx = x * y
/=除算代入x /= yx = x / y
%=剰余代入x %= yx = x % y
let x = 10;

x += 5; // x = x + 5 と同等。 x は 15 になる
console.log(x); // 出力: 15

x -= 3; // x = x - 3 と同等。 x は 12 になる
console.log(x); // 出力: 12

x *= 2; // x = x * 2 と同等。 x は 24 になる
console.log(x); // 出力: 24

3. 比較演算子

比較演算子は2つの値を比較し、常にブーリアン値 (true または false) を返します。これは if 文などの意思決定ロジックにおいて極めて重要です。

3.1 等価演算子:== vs ===

ここは初心者が最も混乱しやすいポイントですので、必ず注意してください。

  • == (等価): 2つの値が等しいかどうかをチェックします。型が異なる場合、暗黙の型変換 (Type Coercion) を試み、同じ型に変換してから比較します。
  • === (厳密等価): 2つの値が等しく、かつ型も同じであることをチェックします。型変換は行いません。

同様に、不等価演算子にも2種類あります:

  • != (不等価): 値のみをチェックします(型変換あり)。
  • !== (厳密不等価): 値または型のいずれかが異なることをチェックします(型変換なし)。
console.log(5 == "5");  // 出力: true (文字列 "5" が数値 5 に変換される)
console.log(5 === "5"); // 出力: false (型が異なる:一方は Number、もう一方は String)

console.log(0 == false); // 出力: true (false が 0 に変換される)
console.log(0 === false); // 出力: false (型が異なる)

console.log(null == undefined); // 出力: true (緩い比較ではこれらは等しいと見なされる)
console.log(null === undefined); // 出力: false (型が異なる)

       ベストプラクティス: 暗黙の型変換による予期せぬバグを避けるため、99% のケースで 厳密等価 (===)厳密不等価 (!==) を使用することをお勧めします。

3.2 関係演算子:>、<、>=、<=

これらの演算子は、2つの数値の大小関係を比較するために使用されます。

  • > (より大きい)
  • < (より小さい)
  • >= (以上)
  • <= (以下)
let x = 10;
let y = 5;

console.log(x > y);  // 出力: true
console.log(x < y);  // 出力: false
console.log(x >= 10); // 出力: true
console.log(5 <= 5); // 出力: true