はじめに
この記事を読めば、JavaScriptの演算子に関する知識が身につき、実際にプロジェクトで活用することができるようになります。
さまざまな演算子の基本から応用までを解説し、具体的なサンプルコードを用いて、演算子の使い方や注意点を学ぶことができます。
●JavaScript演算子の基本
○算術演算子
算術演算子は、加算、減算、乗算、除算、剰余などの基本的な算術操作を行うために使用されます。
○比較演算子
比較演算子は、2つの値を比較し、その結果を真偽値で返す演算子です。
等価、不等価、より大きい、より小さいなどの比較を行います。
○論理演算子
論理演算子は、真偽値を操作する演算子です。
論理積(AND)、論理和(OR)、論理否定(NOT)などがあります。
○代入演算子
代入演算子は、変数に値を代入するための演算子です。
また、代入と同時に他の演算を行う複合代入演算子もあります。
○その他の演算子
その他の演算子には、条件(三項)演算子、Null合体演算子、ビット演算子などがあります。
●JavaScript演算子の使い方
○サンプルコード1：算術演算子を使った計算
let a = 10;
let b = 20;
let sum = a + b; // 加算
let difference = a - b; // 減算
let product = a * b; // 乗算
let quotient = a / b; // 除算
let remainder = a % b; // 剰余
console.log(sum, difference, product, quotient, remainder);○サンプルコード2：比較演算子を使った条件分岐
let age = 18;
if (age >= 20) {
console.log("成人です。");
} else {
console.log("未成年です。");
}○サンプルコード3：論理演算子を使った条件式
let isAdult = true;
let hasLicense = false;
if (isAdult && hasLicense) {
console.log("運転免許を持っています。");
} else {
console.log("運転免許を持っていません。");
}○サンプルコード4：代入演算子を使った変数の操作
let count = 0;
count += 5; // count = count + 5
count -= 2; // count = count - 2
count *= 3; // count = count * 3
count /= 2; // count = count / 2
console.log(count);●JavaScript演算子の応用例
○サンプルコード5：複数の演算子を組み合わせた計算
let x = 10;
let y = 20;
let result = (x + y) * (y - x) / x;
console.log(result);○サンプルコード6：演算子を使った文字列操作
let firstName = "Taro";
let lastName = "Yamada";
let fullName = firstName + " " + lastName;
console.log(fullName);○サンプルコード7：演算子を使った配
let numbers = [1, 2, 3, 4, 5];
let sum = numbers[0] + numbers[1] + numbers[2] + numbers[3] + numbers[4];
console.log(sum);○サンプルコード8：演算子を使ったオブジェクト操作
let person = {
name: "Taro",
age: 25
};
person.age += 1;
console.log(person.age);●JavaScript演算子の注意点と対処法
○型変換に関する注意点
JavaScriptは動的型付け言語であるため、型変換が自動的に行われる場合があります。
意図しない型変換を避けるために、厳密等価演算子(===)や厳密不等価演算子(!==)を使いましょう。
○短絡評価に関する注意点
論理演算子は短絡評価と呼ばれる動作をします。
これは、論理演算子が左から右に評価され、結果が確定した時点で評価が終了することを意味します。
これを利用して、条件式の中で変数の代入などを行うことができますが、意図しない動作に注意しましょう。
○演算子の優先順位に関する注意点
演算子には優先順位があります。
複雑な式を扱う際には、カッコを使って演算の順序を明確にしましょう。
●JavaScript演算子のカスタマイズ方法
○サンプルコード9：カスタム演算子の作成
JavaScriptにはカスタム演算子を直接作成する機能はありませんが、関数を使ってカスタム演算子のような機能を実現することができます。
function power(base, exponent) {
return Math.pow(base, exponent);
}
let result = power(2, 3);
console.log(result); // 8○サンプルコード10：演算子を活用した関数のカスタマイズ
function multiply(a, b) {
return a * b;
}
function triple(value) {
return multiply(value, 3);
}
let result = triple(5);
console.log(result); // 15●JavaScript演算子を使ったプロジェクト例
○サンプルコード11：ショッピングカートの合計金額計算
let cart = [
{ name: "Item 1", price: 1000, quantity: 2 },
{ name: "Item 2", price: 2000, quantity: 1 },
{ name: "Item 3", price: 1500, quantity: 3 },
];
let total = 0;
for (let item of cart) {
total += item.price * item.quantity;
}
console.log(total); // 8500○サンプルコード12：入力フォームのバリデーションチェック
function validateForm(name, age) {
if (!name || !age) {
return false;
}
if (age < 18) {
return false;
}
return true;
}
console.log(validateForm("Taro", 20)); // true
console.log(validateForm("Taro", 15)); // false
console.log(validateForm("", 20)); // false○サンプルコード13：条件に応じたクラスの付与と削除
let button = document.querySelector("button");
let element = document.querySelector(".element");
button.addEventListener("click", function () {
if (element.classList.contains("hidden")) {
element.classList.remove("hidden");
} else {
element.classList.add("hidden");
}
});○サンプルコード14：フィルタ機能を持ったテーブルの作成
// ...
// フィルタ条件に一致する行を表示し、それ以外を非表示にする関数
function filterTable(filterText) {
let rows = document.querySelectorAll("table tr");
for (let row of rows) {
let cell = row.querySelector("td");
if (cell) {
if (cell.textContent.includes(filterText)) {
row.style.display = "table-row";
} else {
row.style.display = "none";
}
}
}
}
// ...○サンプルコード15：簡単なアコーディオンメニューの作成
let headers = document.querySelectorAll(".accordion-header");
for (let header of headers) {
header.addEventListener("click", function () {
let content = header.nextElementSibling;
if (content.style.height) {
content.style.height = null;
} else {
content.style.height = content.scrollHeight + "px";
}
});
}●JavaScript演算子を活用したコーディングテクニック
○サンプルコード16：三項演算子を使った簡潔なコード
let age = 18;
let message = age >= 20 ? "成人です。" : "未成年です。";
console.log(message);○サンプルコード17：Null合体演算子を使ったデフォルト値の設定
let userInput = null;
let defaultValue = "default";
let result = userInput ?? defaultValue;
console.log(result); // "default"○サンプルコード18：分割代入を使った変数の入れ替え
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b); // 20 10○サンプルコード19：算術演算子を使った簡単なアニメーション
let position = 0;
let speed = 2;
function animate() {
position += speed;
// 画面の端に達したら、反対方向に移動する
if (position >= 300 || position <= 0) {
speed = -speed;
}
// 画像の位置を更新
let image = document.querySelector(".image");
image.style.left = position + "px";
requestAnimationFrame(animate);
}
animate();○サンプルコード20：ビット演算子を使ったフラグ操作
let flags = 0b0000;
const FLAG_A = 0b0001;
const FLAG_B = 0b0010;
const FLAG_C = 0b0100;
const FLAG_D = 0b1000;
// フラグAとフラグBをセット
flags |= FLAG_A | FLAG_B;
// フラグBがセットされているかチェック
if (flags & FLAG_B) {
console.log("Flag B is set.");
} else {
console.log("Flag B is not set.");
}
// フラグAをリセット
flags &= ~FLAG_A;まとめ
この記事では、JavaScript演算子の基本から応用までを紹介し、実用的なサンプルコードを20個提供しました。
これらのサンプルコードを通して、JavaScript演算子の使い方やカスタマイズ方法、注意点や対処法について理解を深めることができました。
これからあなたがJavaScript演算子を活用して、効率的で柔軟なコードを書くことができるようになることを期待しています。
最後までお読みいただきありがとうございました。
