【JavaScript】演算子の使い方を解説｜Webの基礎

記事内には広告が含まれます

2026年9月2日

はじめに

前回の記事では、日付（Dateオブジェクト）の操作方法を解説しました。

今回は、値の計算や条件分岐に欠かせない演算子の使い方を解説します。算術演算子・比較演算子・論理演算子・三項演算子まで、実務でよく使う書き方と、つまずきやすい落とし穴を中心に紹介します。

算術演算子の基本（+・-・*・/・%・**）

数値の計算に使う基本的な演算子です。

const a = 10;
const b = 3;

console.log(a + b); // 13（足し算）
console.log(a - b); // 7（引き算）
console.log(a * b); // 30（掛け算）
console.log(a / b); // 3.3333333333333335（割り算）
console.log(a % b); // 1（割り算の余り）
console.log(a ** b); // 1000（べき乗。aのb乗）

%（剰余演算子）は「割り切れるかどうか」の判定によく使われます。たとえばnum % 2 === 0は偶数判定の定番です。

+演算子は文字列同士だと「連結」になる点に注意してください。"10" + 5は数値の15ではなく、文字列の"105"になります。フォームの入力値など文字列として渡ってきた数値を計算に使う場合は、Number()やparseInt()で数値に変換してから計算しましょう。

インクリメント・デクリメントと代入演算子

変数の値を1増減させる、または計算結果をそのまま代入する場合によく使う書き方です。

let count = 0;

count++; // count = count + 1 と同じ（1）
count--; // count = count - 1 と同じ（0）

let price = 1000;
price += 500; // price = price + 500 と同じ（1500）
price -= 200; // price = price - 200 と同じ（1300）
price *= 2; // price = price * 2 と同じ（2600）

count++と++countはどちらも1を加算しますが、式の中で使うと評価されるタイミングが異なります（count++は加算前の値を返し、++countは加算後の値を返します）。単独の行で使う分には結果は同じなので、まずはcount++の形を覚えておけば十分です。

比較演算子（== と === の違いに注意）

2つの値を比較してtrue・falseを返す演算子です。

console.log(5 > 3); // true
console.log(5 < 3); // false
console.log(5 >= 5); // true（以上）
console.log(5 <= 3); // false（以下）

console.log(5 == "5"); // true（型変換してから比較）
console.log(5 === "5"); // false（型まで含めて比較）

==は比較する前に型変換（文字列の”5″を数値の5に変換するなど）を行ってから比較するため、直感に反する結果になることがあります。一方===は型変換を行わず、値と型の両方が一致する場合のみtrueを返します。

比較には基本的に===（厳密等価演算子）を使うことをおすすめします。==は型変換によって意図しない一致が起きることがあり、バグの原因になりやすいためです。否定形も同様に、!=ではなく!==を使いましょう。

論理演算子（&&・||・!）と短絡評価

複数の条件を組み合わせたり、条件を反転させたりする演算子です。

const age = 20;
const hasTicket = true;

console.log(age >= 18 && hasTicket); // true（両方trueならtrue）
console.log(age >= 18 || hasTicket); // true（どちらかtrueならtrue）
console.log(!hasTicket); // false（trueとfalseを反転）

&&と||には、条件をすべて評価せずに結果が決まった時点で処理を打ち切る短絡評価という性質があります。この性質を使うと、値が存在するかどうかのチェックを短く書けます。

const userName = "";
const displayName = userName || "ゲスト"; // userNameが空文字（falseとみなされる）なら"ゲスト"

console.log(displayName); // "ゲスト"

0・""（空文字）・null・undefined・NaNはfalseとして扱われる（falsyな値と呼びます）ため、||で「値がなければデフォルト値」という書き方ができます。

三項演算子（条件によって値を出し分ける）

if文を使うほどでもない単純な条件分岐は、三項演算子を使うと1行で書けます。

const score = 75;
const result = score >= 60 ? "合格" : "不合格";

console.log(result); // "合格"

書き方は条件 ? 条件がtrueの場合の値 : 条件がfalseの場合の値です。値を変数にそのまま代入したい場合や、テンプレートリテラルの中に埋め込みたい場合に便利です。

const stock = 0;
console.log(`在庫：${stock > 0 ? "あり" : "なし"}`); // "在庫：なし"

実務サンプル（合計金額の計算と送料無料判定）

ここまで紹介した算術演算子・比較演算子・論理演算子・三項演算子をまとめて使い、カート内商品の合計金額と送料を自動計算するサンプルです。

HTML

<div id="cartSummary"></div>

JavaScript（main.js）

document.addEventListener("DOMContentLoaded", () => {
    const items = [
        { name: "商品A", price: 1200, quantity: 2 },
        { name: "商品B", price: 800, quantity: 1 },
    ];

    const FREE_SHIPPING_THRESHOLD = 3000; // 送料無料になる金額
    const SHIPPING_FEE = 500;

    // 算術演算子で小計を積み上げる
    let subtotal = 0;
    items.forEach((item) => {
        subtotal += item.price * item.quantity;
    });

    // 比較演算子・三項演算子で送料を判定
    const shippingFee = subtotal >= FREE_SHIPPING_THRESHOLD ? 0 : SHIPPING_FEE;
    const total = subtotal + shippingFee;

    // 論理演算子で「あと何円で送料無料か」を判定
    const remaining = FREE_SHIPPING_THRESHOLD - subtotal;
    const remainingText =
        remaining > 0 && shippingFee > 0
            ? `送料無料まであと${remaining}円です`
            : "送料無料です";

    const summary = document.getElementById("cartSummary");
    summary.textContent = `小計：${subtotal}円／送料：${shippingFee}円／合計：${total}円（${remainingText}）`;
});

subtotal += item.price * item.quantityで商品ごとの金額を積み上げ、subtotal >= FREE_SHIPPING_THRESHOLD ? 0 : SHIPPING_FEEの三項演算子で送料を0円にするか通常料金にするかを1行で判定しています。さらにremaining > 0 && shippingFee > 0のように論理演算子を組み合わせることで、「送料が発生していて、かつあといくらか不足している」場合だけ案内メッセージを出し分けています。

カートの小計・送料・合計・送料無料案内のモックアップ（実務サンプルのコード通り、小計3,200円で送料無料になるケース）

よくある質問・エラー対処

Q. ==と===はどちらを使えばよいですか？

→ 基本的には===（厳密等価演算子）を使ってください。==は型変換をしてから比較するため、0 == falseや"" == 0のように意図しない一致が起きることがあります。

Q. NaN === NaNがfalseになるのはなぜですか？

→ 仕様上、NaN（Not a Numberの略）はどんな値とも一致しないと定義されているためです。値がNaNかどうかを判定したい場合は、===ではなくNumber.isNaN(value)を使ってください。

Q. "10" - 5と"10" + 5で結果が異なるのはなぜですか？

→ -（引き算）には文字列連結の意味がないため、"10" - 5は自動的に数値に変換されて5になります。一方+は文字列連結としても使えるため、"10" + 5は"105"という文字列になります。計算結果が想定と違うときは、まず片方の値が文字列になっていないかを疑ってください。