JavaScriptの演算子をマスター！わかりやすい解説と20のサンプルコード

はじめに
●JavaScript演算子の基本
●JavaScript演算子の使い方
●JavaScript演算子の応用例
●JavaScript演算子の注意点と対処法
●JavaScript演算子のカスタマイズ方法
- ○サンプルコード9：カスタム演算子の作成
- ○サンプルコード10：演算子を活用した関数のカスタマイズ
●JavaScript演算子を使ったプロジェクト例
●JavaScript演算子を活用したコーディングテクニック
まとめ

はじめに

JavaScriptの演算子は、プログラミングにおいて欠かせない要素です。

この記事では、JavaScriptの演算子について、基本から応用まで詳しく解説します。

実際のプロジェクトで活用できるよう、具体的なサンプルコードを交えながら、演算子の使い方や注意点を学んでいきましょう。

初心者の方にも分かりやすく説明し、経験者の方にとっても復習の機会となるよう心がけています。

●JavaScript演算子の基本

JavaScriptの演算子は、様々な種類があり、それぞれ特定の操作を行うために使用されます。

ここでは、主要な演算子のカテゴリーについて説明します。

○算術演算子

算術演算子は、数値を扱う上で最も基本的な演算子です。

加算、減算、乗算、除算、剰余など、日常生活でも使用する計算を行うために使われます。

例えば、買い物の合計金額を計算したり、割引後の価格を求めたりする際に活用できます。

○比較演算子

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

等価、不等価、大小関係などの比較を行います。

条件分岐やループの制御などで頻繁に使用されるため、プログラムの流れを制御する上で重要な役割を果たします。

○論理演算子

論理演算子は、真偽値を操作する演算子です。

論理積（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つの変数aとbに対して、加算、減算、乗算、除算、剰余の各演算を行っています。

結果はconsole.log()を使って出力されます。

○サンプルコード2：比較演算子を使った条件分岐

比較演算子を使用して、条件分岐を行う例を示します。

let age = 18;

if (age >= 20) {
  console.log("成人です。");
} else {
  console.log("未成年です。");
}

この例では、age変数の値が20以上かどうかを比較し、結果に応じて異なるメッセージを出力しています。

比較演算子>=（以上）を使用して条件を表現しています。

○サンプルコード3：論理演算子を使った条件式

論理演算子を使用して、複数の条件を組み合わせる例を示します。

let isAdult = true;
let hasLicense = false;

if (isAdult && hasLicense) {
  console.log("運転免許を持っています。");
} else {
  console.log("運転免許を持っていません。");
}

この例では、論理積（AND）演算子&&を使用して、「成人である」かつ「免許を持っている」という2つの条件を同時に満たすかどうかを判断しています。

○サンプルコード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);

この例では、複合代入演算子を使用してcount変数の値を段階的に変更しています。

各演算子は、通常の算術演算と代入を1つの操作で行うため、コードをより簡潔に書くことができます。

●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);

この例では、加算演算子+を使用して文字列を連結しています。

JavaScriptでは、文字列に対して+演算子を使用すると、文字列の連結として解釈されます。

○サンプルコード7：演算子を使った配列操作

配列の要素に対して演算子を使用する例を表します。

let numbers = [1, 2, 3, 4, 5];

let sum = numbers[0] + numbers[1] + numbers[2] + numbers[3] + numbers[4];
console.log(sum);

この例では、配列numbersの各要素に対して加算演算子を使用し、合計を計算しています。

配列のインデックスを使って各要素にアクセスしています。

○サンプルコード8：演算子を使ったオブジェクト操作

オブジェクトのプロパティに対して演算子を使用する例を示します。

let person = {
  name: "Taro",
  age: 25
};

person.age += 1;
console.log(person.age);

この例では、オブジェクトpersonのageプロパティに対して複合代入演算子+=を使用しています。

これにより、年齢を1増やしています。

●JavaScript演算子の注意点と対処法

JavaScriptの演算子を使用する際には、いくつかの注意点があります。

これを理解し、適切に対処することで、より信頼性の高いコードを書くことができます。

○型変換に関する注意点

JavaScriptは動的型付け言語であるため、演算子を使用する際に自動的な型変換が行われることがあります。

これが意図しない結果を招く場合があるので注意が必要です。

例えば、等価演算子==を使用すると、異なる型の値を比較する際に自動的な型変換が行われます。

これを避けるために、厳密等価演算子===や厳密不等価演算子!==を使用することをおすすめします。

console.log(5 == "5");  // true
console.log(5 === "5"); // false

○短絡評価に関する注意点

論理演算子は短絡評価と呼ばれる動作をします。

これは、論理演算子が左から右に評価され、結果が確定した時点で評価が終了することを意味します。

let a = true;
let b = false;
let c = true;

console.log(a || b || c); // true（bとcは評価されない）
console.log(a && b && c); // false（cは評価されない）

この特性を利用して、条件式の中で変数の代入などを行うことができますが、意図しない動作を引き起こす可能性もあるので注意が必要です。

○演算子の優先順位に関する注意点

演算子には優先順位があります。

複雑な式を扱う際には、カッコを使って演算の順序を明確にすることをおすすめします。

let result = 2 + 3 * 4; // 14
let resultWithParentheses = (2 + 3) * 4; // 20

カッコを使用することで、意図した順序で演算が行われることを保証できます。

●JavaScript演算子のカスタマイズ方法

JavaScriptには直接カスタム演算子を作成する機能はありませんが、関数を使ってカスタム演算子のような機能を実現することができます。

○サンプルコード9：カスタム演算子の作成

関数を使用して、カスタム演算子のような機能を実現する例を示します。

function power(base, exponent) {
  return Math.pow(base, exponent);
}

let result = power(2, 3);
console.log(result); // 8

この例では、power関数を定義して、べき乗計算を行っています。

これにより、通常の演算子では直接表現できない計算を、関数呼び出しの形で実現しています。

○サンプルコード10：演算子を活用した関数のカスタマイズ

既存の演算子を使用して、新しい機能を持つ関数を作成する例を示します。

function multiply(a, b) {
  return a * b;
}

function triple(value) {
  return multiply(value, 3);
}

let result = triple(5);
console.log(result); // 15

この例では、multiply関数を基にtriple関数を作成しています。

triple関数は、与えられた値を3倍にする機能を持ちます。

●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

この例では、配列cartに商品情報（名前、価格、数量）が格納されています。

for...ofループを使用して各商品を処理し、価格と数量を掛け合わせた結果をtotal変数に加算しています。

○サンプルコード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：条件に応じたクラスの付与と削除

DOM操作と条件分岐を組み合わせて、要素のクラスを動的に変更する例を紹介します。

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");
  }
});

このコードでは、ボタンがクリックされたときに、特定の要素の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";
      }
    }
  }
}

このfilterTable関数は、引数として受け取ったfilterTextを使用して、テーブルの各行をフィルタリングします。

テーブル内の各セルのテキスト内容とfilterTextを比較し、一致する場合はその行を表示し、一致しない場合は非表示にします。

この関数を実際に使用する場合、次のようなコードを追加して、ユーザーの入力に応じてフィルタリングを行うことができます。

let filterInput = document.querySelector("#filter-input");
filterInput.addEventListener("input", function() {
  filterTable(this.value);
});

このコードでは、入力フィールドの値が変更されるたびにfilterTable関数が呼び出され、テーブルの内容がリアルタイムでフィルタリングされます。

○サンプルコード15：簡単なアコーディオンメニューの作成

JavaScriptを使用して、クリックで開閉するアコーディオンメニューを作成する例を紹介します。

このような機能は、多くの情報を限られたスペースに効率的に表示したい場合に有用です。

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";
    }
  });
}

このコードは、.accordion-headerクラスを持つ全ての要素に対してイベントリスナーを設定します。

ヘッダーがクリックされると、その直後の要素（コンテンツ部分）の高さを切り替えることで、アコーディオンの開閉を実現しています。

アコーディオンメニューを実装する際は、次のようなHTML構造を想定しています。

<div class="accordion">
  <div class="accordion-header">Section 1</div>
  <div class="accordion-content">Content for section 1...</div>
  <div class="accordion-header">Section 2</div>
  <div class="accordion-content">Content for section 2...</div>
  <!-- 必要に応じて追加のセクション -->
</div>

このHTML構造と組み合わせることで、クリックするたびにコンテンツ部分が開閉する動的なアコーディオンメニューを作成できます。

●JavaScript演算子を活用したコーディングテクニック

これまで学んできた演算子の知識を活かして、より高度なコーディングテクニックを紹介します。

このテクニックを習得することで、より簡潔で効率的なコードを書くことができるようになります。

○サンプルコード16：三項演算子を使った簡潔なコード

条件分岐を簡潔に書くための三項演算子の使用例を紹介します。

let age = 18;
let message = age >= 20 ? "成人です。" : "未成年です。";
console.log(message);

この例では、三項演算子?:を使用して、ageの値に基づいてメッセージを決定しています。

これはif-else文を使用するよりも簡潔に書くことができます。

○サンプルコード17：Null合体演算子を使ったデフォルト値の設定

値がnullまたはundefinedの場合にデフォルト値を設定する例を示します。

let userInput = null;
let defaultValue = "default";
let result = userInput ?? defaultValue;
console.log(result); // "default"

Null合体演算子??は、左辺の値がnullまたはundefinedの場合に右辺の値を返します。

これにより、デフォルト値の設定を簡潔に記述できます。

○サンプルコード18：分割代入を使った変数の入れ替え

2つの変数の値を入れ替える例を紹介します。

let a = 10;
let b = 20;

[a, b] = [b, a];
console.log(a, b); // 20 10

この例では、配列の分割代入を使用して、aとbの値を簡単に入れ替えています。

一時変数を使用せずに値の交換ができるため、コードがシンプルになります。

○サンプルコード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();

この例では、position変数を使用して画像の位置を制御し、speed変数を使用して移動速度と方向を制御しています。

画面の端に達すると、speedの符号を反転させることで、往復運動を実現しています。

○サンプルコード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;

この例では、ビット演算子を使用してフラグの設定、チェック、リセットを行っています。

これで、複数のブール値を1つの数値で効率的に管理することができます。