第4回 JavaScriptを学ぼう: 演算子

執筆・編集 板浪 雅樹2005年から WEB 業界一筋。500サイト超を手がける SEO・WordPress のエキスパート。「公開後こそ本番」を掲げ、データ分析とユーザー視点で成果を引き出す運用を提案。

2005年に制作会社へ入社後、プログラマーからキャリアをスタート。サーバー構築・データベース設計で培った技術を強みに、WordPress テーマ/プラグイン開発やサイト移行の難案件を多数担当してきました。
2010年以降は SEO エンジニアとしても活動領域を拡大。コンテンツ設計・内部リンク最適化・高速化チューニングにより、競合の激しいビッグキーワードで上位獲得を実現してきました。
現在は TREVO のウェブディレクターとして、要件定義から運用改善まで一気通貫でリード。AI ライティングや GA4/Looker Studio を活用したレポーティング手法を開発し、「数字で説明できるサイト運用」をポリシーにクライアントの ROI 最大化を支援しています。
趣味/強み:筋トレとランニングで日々の集中力をキープ。複雑な課題を“仕組み”で解決するのが得意。
モットー:「サイトは資産。改善を止めた瞬間から価値は目減りする」
SNS:x(旧 Twitter)@TREVO_WEB
演算子とは、プログラミングにおいて値や変数に対して特定の操作を行うための記号やキーワードのことです。演算子を使用することで、計算や比較、論理的な判断など、さまざまな処理を簡潔に記述できます。JavaScriptでは、多種多様な演算子が用意されており、それぞれが異なる機能を持っています。
算術演算子
算術演算子は、数値の計算を行うための基本的な演算子です。
加算(+):二つの数値を加算します。
let sum = 5 + 3; // sumは8になります減算(-):一つ目の数値から二つ目の数値を減算します。
let difference = 10 - 2; // differenceは8になります乗算(*):二つの数値を乗算します。
let product = 4 * 2; // productは8になります除算(/):一つ目の数値を二つ目の数値で除算します。
let quotient = 16 / 2; // quotientは8になります剰余(%):一つ目の数値を二つ目の数値で割った余りを求めます。
let remainder = 17 % 9; // remainderは8になりますインクリメント(++):変数の値を1増やします。
let a = 7;
a++; // aは8になりますデクリメント(--):変数の値を1減らします。
let b = 9;
b--; // bは8になります代入演算子
代入演算子は、変数に値を代入するために使用します。
単純代入(=):右側の値を左側の変数に代入します。
let c = 8; // cに8を代入複合代入:演算と代入を同時に行います。
+=
c += 2; // cは10になります-=
c -= 2; // cは6になります*=
c *= 2; // cは16になります/=
c /= 2; // cは4になります%=
c %= 3; // cは1になります比較演算子
比較演算子は、二つの値を比較し、真(true)または偽(false)を返します。
等価(==)と厳密等価(===)
==
値が等しければ真。ただし、型の変換が行われます。
5 == '5'; // true===
値と型が等しければ真。型の変換は行われません。
5 === '5'; // false不等価(!=)と厳密不等価(!==)
!=
値が等しくなければ真。型の変換が行われます。
5 != '6'; // true!==
値または型が等しくなければ真。型の変換は行われません。
5 !== '5'; // true大なり・小なり(>, <, >=, <=)
7 > 5; // true
7 < 5; // false
7 >= 7; // true
7 <= 7; // true論理演算子
論理演算子は、ブール値(trueまたはfalse)の論理演算を行います。
論理AND
(&&):両方が真の場合に真を返します。
true && true; // true
true && false; // false論理OR
(||):どちらか一方が真の場合に真を返します。
true || false; // true
false || false; // false論理NOT
(!):真を偽に、偽を真に反転させます。
!true; // false
!false; // trueビット演算子
ビット演算子は、数値のビットレベルでの操作を行います。
ビットAND(&)
5 & 3; // 1(二進数で0101 & 0011 = 0001)ビットOR(|)
5 | 3; // 7(二進数で0101 | 0011 = 0111)ビットXOR(^)
5 ^ 3; // 6(二進数で0101 ^ 0011 = 0110)ビットNOT(~)
~5; // -6(二進数で0101のビット反転で1010、二の補数表現で-6)左シフト(<<)
5 << 1; // 10(0101を左に1ビットシフト)右シフト(>>)
5 >> 1; // 2(0101を右に1ビットシフト)ゼロ埋め右シフト(>>>)
-5 >>> 1; // 大きな正の数(符号ビットもシフトされるため)三項演算子(条件演算子)
三項演算子は、簡潔な条件分岐を行うための演算子です。
構文
条件式 ? 真の場合の値 : 偽の場合の値;例
let age = 18;
let canVote = (age >= 18) ? '投票できます' : '投票できません';
console.log(canVote); // "投票できます"型演算子
型演算子は、値の型を確認するために使用します。
typeof演算子
typeof 123; // "number"
typeof 'Hello'; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object"(特殊なケース)instanceof演算子
let arr = [];
arr instanceof Array; // true
arr instanceof Object; // trueその他の演算子
カンマ演算子
(,):複数の式を評価し、最後の式の値を返します。
let x = (1, 2, 3); // xは3になります削除演算子
(delete):オブジェクトのプロパティを削除します。
let obj = { a: 1, b: 2 };
delete obj.a; // objは{ b: 2 }になりますin演算子
オブジェクトに特定のプロパティが存在するかを確認します。
'b' in obj; // truevoid演算子
式を評価し、undefinedを返します。
void 0; // undefined演算子の優先順位
演算子には評価される順序(優先順位)が存在します。優先順位が高い演算子ほど先に評価されます。括弧 () を使用することで、優先順位を明示的に指定できます。
let result = 5 + 3 * 2; // resultは11になります(乗算が先)
let resultWithParentheses = (5 + 3) * 2; // resultは16になります(括弧内が先)演算子の活用例
条件付きで値を設定する
let score = 85;
let grade = (score >= 90) ? 'A' :
(score >= 80) ? 'B' :
(score >= 70) ? 'C' : 'D';
console.log(grade); // "B"デフォルト値の設定
let name;
let displayName = name || 'ゲスト';
console.log(displayName); // "ゲスト"値の入れ替え
let a = 5, b = 3;
[a, b] = [b, a]; // aは3、bは5になりますまとめ
今回は、JavaScriptにおけるさまざまな演算子について学びました。演算子を正しく理解することで、コードの可読性や効率性が向上します。特に、演算子の優先順位や型の違いによる挙動に注意が必要です。次回は、これらの演算子を活用した**条件文(if, else, switch)**について詳しく解説します。
関連記事
大阪のホームページ制作会社TREVOでは、最短2日で仮サイトを公開できるスピード対応や、SEO対策に強いオリジナルデザインの制作サービスを提供しています。










