JavaScript演算子一覧｜基本から最新の記法まで実例で学ぶ使い方と優先順位

JavaScriptでプログラミングを行う際、避けて通れないのが「演算子」の理解です。

演算子は数値計算だけでなく、変数の代入、値の比較、論理的な条件分岐など、あらゆる処理の基礎を支えています。

モダンなJavaScript開発では、古くからある基本的な演算子に加えて、コードを簡潔に記述するための新しい演算子も頻繁に活用されます。

この記事では、JavaScriptにおける演算子の種類を網羅的に解説し、それぞれの具体的な使い方や実例、そして予期せぬバグを防ぐために不可欠な優先順位の知識まで詳しくお伝えします。

初心者の方はもちろん、最新の記法を再確認したい中級者の方も、ぜひ参考にしてください。

算術演算子

算術演算子は、数値の計算を行うための最も基本的な演算子です。

加算や減算といった一般的な算術計算をカバーしています。

基本的な四則演算

加算、減算、乗算、除算は、他のプログラミング言語と同様の記号を使用します。

// 四則演算の例
const a = 10;
const b = 3;

const sum = a + b; // 加算
const difference = a - b; // 減算
const product = a * b; // 乗算
const quotient = a / b; // 除算

console.log(sum);
console.log(difference);
console.log(product);
console.log(quotient);

13
7
30
3.3333333333333335

JavaScriptの除算では、結果が整数にならない場合、自動的に浮動小数点数として計算される点に注意が必要です。

剰余とべき乗

割り算の余りを求める「剰余演算子」と、累乗を計算する「べき乗演算子」も頻繁に利用されます。

const x = 10;
const y = 3;

const remainder = x % y; // 10を3で割った余り
const power = x ** y; // 10の3乗

console.log(remainder);
console.log(power);

1
1000

% 演算子は、偶数・奇数の判定（n % 2 === 0）や、特定の範囲内で値をループさせたい場合に非常に便利です。

インクリメントとデクリメント

変数の値を1増やしたり1減らしたりするための演算子です。

記述する位置（前置・後置）によって挙動が変わるため、正確な理解が必要です。

let count = 5;

// 後置インクリメント
let post = count++; 
console.log(post); // 5
console.log(count); // 6

// 前置インクリメント
let pre = ++count;
console.log(pre); // 7
console.log(count); // 7

前置演算子は値を更新した後に式全体を評価し、後置演算子は評価した後に値を更新します。 混乱を避けるため、最近のコードスタイルでは単独の行で count += 1; と書くことも推奨されています。

代入演算子

代入演算子は、変数に値を格納するために使用します。

単なる代入だけでなく、計算と代入を同時に行う「複合代入演算子」も多く存在します。

基本代入と複合代入

最も基本的な = は、右辺の値を左辺の変数に代入します。

let score = 100;

// 複合代入
score += 50; // score = score + 50 と同じ
score *= 2;  // score = score * 2 と同じ

console.log(score);

300

論理代入演算子

近年導入された非常に強力な演算子が、論理代入演算子です。

これは「条件を満たす場合のみ代入する」という処理を短く書くことができます。

// 論理和代入 (||=) : 左辺が偽値（falsy）なら代入
let title = "";
title ||= "デフォルトタイトル";

// Null合体代入 (??=) : 左辺が null または undefined なら代入
let config = null;
config ??= { theme: "dark" };

console.log(title);
console.log(config);

デフォルトタイトル
{ theme: "dark" }

特に ??= は、「0」や「false」を有効な値として保持しつつ、未設定の場合のみ初期値を入れたいシーンで極めて有用です。

比較演算子

比較演算子は、2つの値を比較し、結果を真（true）または偽（false）の論理値で返します。

厳密等価と抽象等価

JavaScriptには、==（等価）と ===（厳密等価）の2種類があります。

const num = 10;
const str = "10";

console.log(num == str);  // true (型変換が行われる)
console.log(num === str); // false (型が異なるため)

原則として、常に「===（厳密等価演算子）」を使用することが推奨されます。 == はJavaScript独自の複雑な型変換（Type Coercion）を伴うため、予期せぬバグの原因になりやすいからです。

大小比較

数値や文字列の大きさを比較します。

console.log(15 > 10);  // true
console.log(10 >= 10); // true
console.log(5 < 3);    // false

文字列同士を比較する場合、Unicodeのコードポイント順（辞書順に近い挙動）で比較されます。

論理演算子

論理演算子は、複数の条件を組み合わせたり、条件を反転させたりするために使用します。

AND, OR, NOT

const isAdult = true;
const hasTicket = false;

// AND: 両方が真である必要がある
console.log(isAdult && hasTicket); // false

// OR: どちらかが真であればよい
console.log(isAdult || hasTicket); // true

// NOT: 反転
console.log(!isAdult); // false

短絡評価（ショートサーキット）

JavaScriptの論理演算子には、短絡評価という特徴があります。

• && は、左辺が false なら右辺を評価せずに false を返します。
• || は、左辺が true なら右辺を評価せずに true を返します。

これを利用して、「データが存在する場合のみ関数を実行する」といった記述が可能です。

const user = { name: "田中" };
user.name && console.log("ユーザー名が存在します");

モダンJavaScriptに欠かせない演算子

比較的新しく導入された演算子は、コードの可読性を劇的に向上させます。

Null合体演算子 (??)

?? は、左辺が null または undefined の場合のみ右辺の値を返します。

const inputSize = 0;
const size = inputSize ?? 100;

console.log(size); // 0

|| を使用すると、inputSize が 0 の場合でも 100 になってしまいますが、?? なら 「0」という数値を正しく維持できます。

オプショナルチェイニング (?. )

オブジェクトの深い階層にあるプロパティへ安全にアクセスするための演算子です。

途中のパスが null や undefined であってもエラーにならず、undefined を返します。

const data = {
  user: {
    profile: null
  }
};

// エラーにならずに undefined が返る
const bio = data.user?.profile?.bio;
console.log(bio);

undefined

以前は if (data.user && data.user.profile) のように長いチェックが必要でしたが、現在はこれ一行でスマートに記述できます。

特殊な演算子

その他、知っておくと便利なJavaScript特有の演算子を紹介します。

条件演算子（三項演算子）

条件によって返す値を変えることができる唯一の「三項」演算子です。

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

簡単な条件分岐であれば、if 文を使うよりも簡潔に記述できます。

typeof 演算子

値のデータ型を文字列で返します。

console.log(typeof "Hello"); // "string"
console.log(typeof 123);     // "number"
console.log(typeof true);    // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null);    // "object" ※JSの仕様上の注意点

typeof null が “object” を返すのはJavaScriptの歴史的な仕様（バグに近い挙動）です。 型判定を行う際は、この点に注意しましょう。

スプレッド演算子とレスト演算子 (…)

配列やオブジェクトを展開、あるいは集約するために使用します。

// スプレッド（展開）
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

// レスト（集約）
const [first, ...rest] = [10, 20, 30];
console.log(rest); // [20, 30]

データの不変性（イミュータビリティ）を保ちながら新しい配列やオブジェクトを作成する際、現在のフロントエンド開発では必須のテクニックです。

演算子の優先順位

複数の演算子が組み合わさったとき、どの処理から実行されるかを決めるのが「優先順位」です。

優先順位一覧（主要なもの）

数値が高いほど先に実行されます。

優先順位による挙動の違い

例えば、以下のコードを見てみましょう。

const result = 10 + 5 * 2;
console.log(result); // 20

乗算（*）は加算（+）よりも優先順位が高いため、先に 5 * 2 が計算されます。

もし加算を先にしたい場合は、括弧 ( ) を使って明示的にグループ化する必要があります。

const result = (10 + 5) * 2;
console.log(result); // 30

可読性を高めるため、優先順位が微妙な場合は常に括弧を使うのが良いプラクティスです。

他のエンジニアがコードを読んだときに、意図が明確に伝わるようになります。

まとめ

JavaScriptの演算子は、単純な計算から高度なオブジェクト操作まで、非常に多岐にわたります。

• 算術演算子で基本的な数値を扱い、
• 厳密等価演算子 (===) で安全に比較を行い、
• Null合体演算子 (??) や オプショナルチェイニング (?. ) でモダンにエラーを防ぐ。

これらの演算子を使いこなすことで、コードはより短く、読みやすく、そして堅牢になります。

特に演算子の優先順位を意識することは、デバッグの時間を減らす大きな一歩となります。

今回紹介した一覧をリファレンスとして活用し、実際のコーディングに役立ててください。

JavaScriptの進化とともに新しい演算子が追加されることもあるため、常に言語仕様のアップデートに注目しておくことも大切です。