こんにちは、かつコーチです。
前回はJavaScriptの主なデータ型について解説しました。
今回は、その値を使って計算したり比較したりするための「演算子」を扱います。
演算子は普段の生活で使う「＋」「－」のようなものから、プログラミング特有のものまでいろいろありますが、一つずつ整理していけば難しくありません。
算術演算子：計算のための演算子
基本の四則演算
まずは基本の計算からです。
console.log(5 + 3); // 出力: 8（足し算）
console.log(5 - 3); // 出力: 2（引き算）
console.log(5 * 3); // 出力: 15（掛け算）
console.log(5 / 3); // 出力: 1.6666666666666667（割り算）
+・-・*・/ は、算数で習うのと同じ感覚で使えます。
余りを求める「%」とべき乗の「**」
見慣れないかもしれない演算子として、割り算の余りを求める % があります。
console.log(7 % 3);
// 出力: 1（7を3で割った余り）
% は「偶数か奇数かを判定する」「一定間隔ごとに処理をする」といった場面でよく使われます。
べき乗を計算したいときは ** を使います。
console.log(2 ** 3);
// 出力: 8（2の3乗）
インクリメント・デクリメント
変数の値を1増やす・1減らす処理には、専用の書き方があります。
let count = 0;
count++; // count = count + 1 と同じ
console.log(count);
// 出力: 1
count--; // count = count - 1 と同じ
console.log(count);
// 出力: 0
繰り返し処理のカウンター用途で頻繁に登場するので、ここで覚えておくと後の記事がスムーズに読めます。
比較演算子：値を比べる演算子
大小を比べる演算子
数値の大小を比べるときは、算数と同じ記号を使います。
console.log(10 > 5); // 出力: true
console.log(10 < 5); // 出力: false
console.log(10 >= 10); // 出力: true
console.log(10 <= 9); // 出力: false
比較演算子の結果は、常に真偽値（true か false）で返ってきます。
等しいかを比べる「」と「=」
値が等しいかどうかを調べる演算子には、== と === の2種類があります。
❌ Before：== で比較して意図しない結果になる
const inputAge = "20"; // フォームから受け取った文字列
const requiredAge = 20; // こちらは数値
if (inputAge == requiredAge) {
console.log("年齢条件を満たしています");
}
// 出力: 年齢条件を満たしています（型が違っても一致してしまう）
== は型が違っても値だけを見て比較するため、"20"（文字列）と 20（数値）が一致したと判定されてしまいます。
私はこの挙動を知らずに書いていた頃、想定外のデータでも条件が通ってしまうバグを作ってしまい、原因を突き止めるのにかなり時間がかかった経験があります。
✅ After：=== で型まで含めて厳密に比較する
const inputAge = "20";
const requiredAge = 20;
if (Number(inputAge) === requiredAge) {
console.log("年齢条件を満たしています");
}
// 出力: 年齢条件を満たしています（型を揃えたうえで厳密に比較）
=== は値と型の両方が一致していないと true になりません。
比較する前に型を揃えておけば、意図した通りの判定になります。
迷ったときは基本的に === を使う、と覚えておくのがおすすめです。
論理演算子：条件を組み合わせる
かつ（&&）とまたは（||）
複数の条件を組み合わせたいときは、論理演算子を使います。
const age = 25;
const hasLicense = true;
console.log(age >= 18 && hasLicense);
// 出力: true（両方の条件を満たすとtrue）
console.log(age < 18 || hasLicense);
// 出力: true（どちらか一方でも満たせばtrue）
&&（かつ）は両方の条件がそろったときだけ true になります。
||（または）はどちらか一方でも条件を満たせば true になります。
否定（!）
条件を反転させたいときは ! を使います。
const isLoggedIn = false;
if (!isLoggedIn) {
console.log("ログインしてください");
}
// 出力: ログインしてください
!isLoggedIn は「isLoggedIn ではない」、つまり isLoggedIn が false のときに true になります。
論理演算子を組み合わせるときの注意点
条件が複雑になってくると、&& と || の優先順位を勘違いしてバグを埋め込みやすくなります。
❌ Before：カッコを使わずに書いて意図が伝わりにくい
const age = 16;
const hasParentConsent = true;
const isMember = false;
if (age >= 18 || hasParentConsent && isMember) {
console.log("参加できます");
}
&& は || より優先して評価されるため、このコードは意図が読み取りづらく、読み手によって誤解が生まれやすい書き方です。
✅ After：カッコで優先順位を明示する
const age = 16;
const hasParentConsent = true;
const isMember = false;
if (age >= 18 || (hasParentConsent && isMember)) {
console.log("参加できます");
}
// 出力: 参加できます
( ) を使って条件のまとまりを明示することで、コードを書いた本人以外が読んでも意図が一目で分かるようになります。
条件を組み合わせるときは、多少冗長に見えてもカッコをつける習慣をつけておくと安心です。
まとめ
この記事のポイント
- 算術演算子（
+-*/%**）で基本的な計算ができる - 比較演算子は結果として真偽値を返し、
==より型まで厳密に比較する===を優先して使う - 論理演算子（
&&||!）を使うと複数の条件を組み合わせられる - 条件が複雑になるときは、カッコで優先順位を明示すると意図が伝わりやすい
次に読むべき記事
次回は、演算子を使った条件分岐「if文・switch文」について解説します。
→ 次の記事：if文・switch文で条件分岐