JavaScript | 第6章「式と演算子」

javascrpit JavaScript
スポンサーリンク

JavaScript における 式 (expression)演算子 (operator) の概念を、できるだけやさしく、かつ実例を交えて説明します。


全体のイメージ

  • 式 (expression):値を「評価」して何らかの値になるコードの単位。
    例:3 + 4x = 7a > b ? a : b など。
  • 演算子 (operator):式内で使われ、値を操作・結合するための記号やキーワード。
    例:+, -, *, /, =, >, &&, || など。

つまり、演算子を使って式を構成し、式を評価すると値が得られます。


なぜ式・演算子が重要か?

式と演算子を理解すると、次のことができるようになります:

  • 変数に値を代入する(代入演算子)
  • 値を比較して条件分岐する(比較演算子)
  • 数値の計算をする(算術演算子)
  • 論理演算を使って複数条件を組み合わせる(論理演算子)
  • 文字列操作、ビット演算なども行える
  • 式の評価順序・優先順位を理解し、意図した動きをさせる

これらはプログラミングの基本なので、式と演算子は最初にしっかり押さえておきたいテーマです。

以下、主な演算子をカテゴリ別に、初心者にもわかるように解説します。

代入演算子(=系)

これは、右の値を左の変数(またはプロパティなど)に “代入” するための演算子です。
最も基本的なのは =

let x;
x = 5;  // 右辺 5 を左の変数 x に代入
JavaScript

複合代入演算子

加算代入、減算代入など、左辺にそのまま変形して代入できる形式もあります。

演算子意味
+=左辺に右辺を足して代入x += 3x = x + 3 と同じ
-=左辺から右辺を引いて代入x -= 2x = x - 2
*=掛けて代入x *= 4x = x * 4
/=割って代入x /= 5x = x / 5
%=剰余(余り)を代入x %= 3x = x % 3
**=べき乗代入x **= 2x = x ** 2
ほかに、ビット演算や論理演算(&=, `=, &&=, ??=` など)もあります。

代入演算子も式なので、代入した結果の値を使うことができます(ただし、可読性を保つため無闇に使うと混乱することもあります)。

たとえば:

let a;
let b = (a = 3);  // まず a に 3 を代入し、その結果(3)を b に代入
console.log(a, b);  // 両方 3
JavaScript

比較演算子

2 つの値を比較して、真 (true) か偽 (false) を返す演算子です。

演算子説明
==値が等しいか(型変換あり)3 == "3"true
!=値が等しくないか(型変換あり)4 != "3"true
===値・型ともに厳密に等しいか3 === "3"false
!==値か型が異なるか3 !== "3"true
>より大きいか5 > 3true
>=以上か5 >= 5true
<より小さいか2 < 7true
<=以下か2 <= 2true

注意点:

  • == / != は暗黙の型変換を行うため、思わぬ結果になることがあります。型も確認したいなら === / !== を使うのが安全です。
  • 文字列どうしの比較もできますが、辞書順(アルファベット順)での比較になります。

算術演算子(数値操作)

数値を使った基本的な計算を行うものです。

  • +:足し算
  • -:引き算
  • *:掛け算
  • /:割り算
  • %:剰余(割ったあとの余り)
  • **:べき乗
  • 単項プラス +x:数値化を試行(文字列 → 数値変換など)
  • 単項マイナス -x:符号を反転
  • インクリメント/デクリメント:++, --(1 を足す/引く)MDN Web Docs

例:

let x = 5;
x++;  // x = 6(後置インクリメント)
let y = ++x;  // 先に x が 7 になり、y に 7 を代入
let z = 2 ** 3;  // 8(2 の 3 乗)
JavaScript

また、0 で割ると Infinity-Infinity、あるいは NaN(Not-a-Number)が返ることがあるので注意が必要です。

論理演算子(真偽値操作)

真 (true) / 偽 (false) を扱うときに使う演算子です。ただし JavaScript の場合、値そのものを返すことがあり得ます。

  • &&(論理積 / AND)
  • ||(論理和 / OR)
  • !(否定 / NOT)
  • ??(ヌル値合体演算子:null または undefined の場合に代替値を使う)

特徴:短絡評価(ショートサーキット)

  • expr1 && expr2expr1 が偽と評価できる(false に相当する)なら expr1 を返し、そうでなければ expr2 を評価して返す。
  • expr1 || expr2expr1 が真と評価できるなら expr1 を返し、そうでなければ expr2 を返す。
  • expr1 ?? expr2expr1null でも undefined でもない場合はそれを返し、そうでなければ expr2 を返す。

例:

let a = null;
let b = a ?? "default";  // "default"(a が null なので代替値を使う)

let x = 0;
let y = x || 10;  // 10(0 は false 相当とみなされる)

let p = "hello";
let q = p && 100;  // 100(p が真なので q を評価して返す)

let notTrue = !true;  // false
JavaScript

ビット演算子とシフト演算子

コンピュータ内部で扱う「ビット(0/1)」単位で演算をするものです。普通はあまり使わない場面もありますが、パフォーマンスや低レベル処理で使うことがあります。

  • &:ビット論理積
  • |:ビット論理和
  • ^:排他的論理和(XOR)
  • ~:ビット反転
  • <<:左シフト
  • >>:符号付き右シフト
  • >>>:符号なし右シフト

例:5 & 3 を 2 進数で考えると 101 & 011 = 001 → 結果は 1

シフト演算子は、ビットを左右に移動させて、2 倍 / 1/2 相当の演算を効率よく行う場合などに使われます。

条件(三項)演算子

JavaScript で唯一 “3 つのオペランド” を取る演算子です。ある条件に応じて 2 つのうちどちらかの値を選びます。

condition ? valueIfTrue : valueIfFalse
JavaScript

例:

let age = 20;
let status = (age >= 18) ? "adult" : "minor";
// age が 18 以上なら "adult",そうでなければ "minor"
JavaScript

このように、簡潔に条件分岐を書きたいときに便利です。

カンマ演算子

あまり使う機会は多くありませんが、複数の式を続けて書いて、そのうち最後の値だけを返す用途があります。

let x = (func1(), func2(), 3);
// func1 と func2 を順に評価し、最終的に 3 が x に入る
JavaScript

主に for ループの更新部分で複数の変数を操作したいときに使われることがあります。

単項演算子とその他

最後に、演算子の中で “1 つのオペランド(引数)だけ取るもの” を見ておきましょう。

  • delete:オブジェクトのプロパティを削除
  • typeof:オペランドの型を文字列で返す
  • void:式を実行するが、常に undefined を返す
  • 単項の + / -(上で触れた)
  • インクリメント/デクリメント(++, --)など

例:

let obj = { a: 1, b: 2 };
delete obj.a;  // obj は { b: 2 } になる

typeof obj.b;  // "number"

void someFunction();  // 常に undefined を返す
JavaScript

優先順位と結合規則

演算子には「どの演算を先に計算するか」を決める優先順位があります。

たとえば:

1 + 2 * 3  // → 1 + (2 * 3) = 7、* の方が + より優先
JavaScript

もし意図的に順序を変えたいなら、括弧 () を使うことで強制的に評価順を変えることができます。

演算子が同じ優先順位のとき、結合規則(左結合・右結合)で評価の順番が決まることもあります。代入演算子は右結合(= や += など)で結合する性質があります。

まとめ:初心者がまず押さえるべきポイント

  1. 演算子 の関係を理解する
  2. 代入 (= / += など)、比較 (=== / < / > など)、算術 (+, -, *, /) は最初に使う機会が多い
  3. 論理演算子(&&, ||, !)は条件分岐と組み合わせて非常によく使われる
  4. 条件演算子(三項演算子)は短く書きたいときに便利
  5. 優先順位・結合規則で意図しない評価順になることがあるので、複雑な式には括弧を使って明示する
タイトルとURLをコピーしました