大阪のホームページ制作会社 株式会社TREVO
スタッフブログ

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

2024.09.20.

ホームページ制作

JavaScriptを学ぼう

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

演算子とは、プログラミングにおいて値や変数に対して特定の操作を行うための記号やキーワードのことです。演算子を使用することで、計算や比較、論理的な判断など、さまざまな処理を簡潔に記述できます。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; // true

void演算子

式を評価し、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対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

経歴: 映像制作の専門学校を卒業後、映像制作(編集・撮影)でのアシスタント、カーナビゲーション用の3DCG制作、PS2用の3DCGゲーム背景制作、16ミリフィルムのデジタル変換業務等を経てWEB制作部門のある会社に就職。株式会社TREVOでディレクション、SEO対策、CMS開発、3DCG制作、映像制作を担当

twitter Facebook Pocket LINE はてブ

関連の記事

お見積もり