JavaScriptの演算子をマスター！15のサンプルコードで初心者もプロ並みに

JavaScriptの演算子をマスターするためのサンプルコードと解説JS
2023.04.15
この記事は約8分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptの演算子をマスターすることができるようになります。

今回は、JavaScript初心者にも分かりやすいように、基本的な使い方から応用例、注意点、カスタマイズ方法まで徹底解説しています。

15のサンプルコードを活用して、あなたもJavaScriptの演算子を使いこなすプロになりましょう！

●JavaScriptの演算子とは

JavaScriptの演算子は、値や変数に対して様々な操作を行うための記号です。

加算、減算、乗算、除算などの算術演算や、比較、論理演算など、プログラムの中でよく使われる操作をサポートしています。

○基本的な演算子

下記はJavaScriptでよく使われる基本的な演算子です。

  1. 算術演算子：+, -, *, /, %（加算、減算、乗算、除算、剰余）
  2. 比較演算子：==, ===, !=, !==, <, >, <=, >=（等価、厳密等価、等価でない、厳密等価でない、より小さい、より大きい、以下、以上）
  3. 論理演算子：&&, ||, !（論理積（AND）、論理和（OR）、否定（NOT））

●演算子の使い方

それでは、サンプルコードを通して、基本的な演算子の使い方を学びましょう。

○サンプルコード1：算術演算子

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333333333333335
console.log(a % b); // 1

このサンプルコードでは、変数aとbに対して、加算、減算、乗算、除算、剰余の算術演算を行っています。

○サンプルコード2：比較演算子

let x = 5;
let y = "5";

console.log(x == y); // true
console.log(x === y); // false
console.log(x != y); // false
console.log(x !== y); // true
console.log(x < y); // false
console.log(x > y); // false
console.log(x <= y); // true
console.log(x >= y); // true

このサンプルコードでは、変数xとyに対して、比較演算子を用いて値の比較を行っています。

○サンプルコード3：論理演算子

let bool1 = true;
let bool2 = false;

console.log(bool1 && bool2); // false
console.log(bool1 || bool2); // true
console.log(!bool1); // false

このサンプルコードでは、変数bool1とbool2に対して、論理演算子を用いて論理演算を行っています。

●演算子の応用例

JavaScriptの演算子は基本的なものだけでなく、さまざまな応用例があります。

ここでは、条件演算子や代入演算子、文字列結合などの応用例を紹介します。

○サンプルコード4：条件演算子

let score = 85;
let result = score >= 80 ? '合格' : '不合格';
console.log(result); // "合格"

このサンプルコードでは、条件演算子（三項演算子）を使用して、scoreが80以上の場合は’合格’、そうでない場合は’不合格’をresultに代入しています。

○サンプルコード5：代入演算子

let num = 10;
num += 5;
console.log(num); // 15

このサンプルコードでは、代入演算子を使用して、numに5を加算しています。

○サンプルコード6：文字列結合

let firstName = "太郎";
let lastName = "山田";
let fullName = lastName + " " + firstName;
console.log(fullName); // "山田 太郎"

このサンプルコードでは、+演算子を使用して、文字列を結合しています。

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

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

ここでは、演算子の優先順位や型変換の注意点について説明します。

○演算子の優先順位

演算子には優先順位があり、計算の順序が変わることがあります。

優先順位が異なる演算子が混在する場合は、()を使用して明示的に計算の順序を指定しましょう。

○型変換の注意点

JavaScriptでは、異なる型同士の演算が行われる際に、暗黙的に型変換が行われることがあります。

型変換が意図しない結果をもたらすことがあるため、厳密等価演算子(===)を使用したり、明示的に型変換を行いましょう。

●演算子のカスタマイズ

JavaScriptの演算子は、独自の演算子を作成したり、ビット演算子を活用したり、オブジェクト操作に使用することができます。

ここでは、それぞれの応用例を紹介します。

○サンプルコード7：独自の演算子を作成する

JavaScriptでは、独自の演算子を作成することはできませんが、関数を定義することで同様の目的を達成することができます。

function add(x, y) {
  return x + y;
}

let result = add(3, 4);
console.log(result); // 7

このサンプルコードでは、add関数を定義して、2つの引数を加算する機能を実現しています。

○サンプルコード8：ビット演算子を活用する

let num1 = 5; // 二進数で 0101
let num2 = 3; // 二進数で 0011

console.log(num1 & num2); // 1
console.log(num1 | num2); // 7
console.log(num1 ^ num2); // 6
console.log(~num1); // -6

このサンプルコードでは、ビット演算子を用いて、ビット単位での論理演算を行っています。

○サンプルコード9：オブジェクト操作の演算子

let person = {
  firstName: "太郎",
  lastName: "山田"
};

console.log(person.firstName); // "太郎"
console.log(person["lastName"]); // "山田"

このサンプルコードでは、オブジェクト操作の演算子を使用して、オブジェクトのプロパティにアクセスしています。

●さらなる応用例

JavaScriptの演算子は、配列操作や関数操作、DOM操作、イベントハンドリング、例外処理、非同期処理など、さまざまな応用例があります。

ここでは、それぞれの応用例を紹介します。

○サンプルコード10：配列操作の演算子

let arr = [1, 2, 3];
console.log(arr[0]); // 1
arr[1] = 4;
console.log(arr); // [1, 4, 3]

このサンプルコードでは、配列操作の演算子を使用して、配列の要素にアクセスし、値を変更しています。

○サンプルコード11：関数操作の演算子

function greet() {
  console.log("こんにちは");
}

greet(); // "こんにちは"

このサンプルコードでは、関数操作の演算子を使用して、関数を呼び出しています。

○サンプルコード12：DOM操作の演算子

let title = document.querySelector("h1");
title.innerHTML = "新しいタイトル";

このサンプルコードでは、DOM操作の演算子を使用して、HTML要素を選択し、その内容を変更しています。

○サンプルコード13：イベントハンドリングの演算子

let button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log("ボタンがクリックされました");
});

このサンプルコードでは、イベントハンドリングの演算子を使用して、ボタンのクリックイベントを監視し、イベントが発生したときに処理を実行しています。

○サンプルコード14：例外処理の演算子

try {
  console.log(nonexistentVariable);
} catch (error) {
  console.log("エラーが発生しました:", error.message);
}

このサンプルコードでは、例外処理の演算子を使用して、エラーが発生した際に適切な処理を行っています。

○サンプルコード15：非同期処理の演算子

async function fetchData() {
  try {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("データの取得に失敗しました:", error.message);
  }
}

fetchData();

このサンプルコードでは、非同期処理の演算子を使用して、APIからデータを取得し、エラーが発生した場合に適切な処理を行っています。

まとめ

このガイドでは、JavaScriptの演算子の基本的な使い方から応用例までを紹介しました。

様々な演算子を理解し、適切に活用することで、効率的なプログラムを作成することができます。