JavaScriptの演算子の使い方と基礎知識 - 算術・比較・論理演算子を完全理解

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// 加算
console.log(10 + 5); // 15

// 減算
console.log(10 - 5); // 5

// 乗算
console.log(10 * 5); // 50

// 除算
console.log(10 / 4); // 2.5（整数同士でも小数点以下が返る）

// 剰余（余り）
console.log(10 % 3); // 1（10÷3の余り）

// べき乗（ES2016で追加）
console.log(2 ** 10); // 1024（2の10乗）

1
2
3

console.log(10 / 0);  // Infinity
console.log(-10 / 0); // -Infinity
console.log(0 / 0);   // NaN（Not a Number: 数値ではない）

1
2
3
4
5
6
7
8
9

let count = 5;

// インクリメント（1を加える）
count++;
console.log(count); // 6

// デクリメント（1を引く）
count--;
console.log(count); // 5

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let a = 5;
let b = 5;

// 後置インクリメント: 現在の値を返してから加算
console.log(a++); // 5（先に5を返す）
console.log(a);   // 6（その後1が加算されている）

// 前置インクリメント: 先に加算してから値を返す
console.log(++b); // 6（先に加算してから返す）
console.log(b);   // 6

1
2
3
4
5

const firstName = "太郎";
const lastName = "山田";
const fullName = lastName + firstName;

console.log(fullName); // "山田太郎"

1
2
3

console.log("価格: " + 1000 + "円"); // "価格: 1000円"
console.log(10 + 20 + "円");         // "30円"（左から評価されるため）
console.log("合計" + 10 + 20);       // "合計1020"（最初が文字列なので結合される）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let num = 10;

num += 5;  // num = num + 5 と同じ → 15
num -= 3;  // num = num - 3 と同じ → 12
num *= 2;  // num = num * 2 と同じ → 24
num /= 4;  // num = num / 4 と同じ → 6
num %= 4;  // num = num % 4 と同じ → 2
num **= 3; // num = num ** 3 と同じ → 8

console.log(num); // 8

1
2
3
4

console.log(5 == "5");     // true（文字列"5"が数値5に変換される）
console.log(0 == false);   // true（falseが0に変換される）
console.log(null == undefined); // true（特別なルール）
console.log("" == false);  // true（空文字列は0、falseも0に変換される）

1
2
3
4

console.log(5 === "5");    // false（型が異なる: number vs string）
console.log(0 === false);  // false（型が異なる: number vs boolean）
console.log(null === undefined); // false（型が異なる）
console.log(5 === 5);      // true（値も型も同じ）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 数値の比較
console.log(10 > 5);  // true
console.log(10 >= 10); // true
console.log(5 < 10);  // true
console.log(5 <= 5);  // true

// 文字列の比較（辞書順で比較される）
console.log("apple" < "banana"); // true
console.log("abc" < "abd");      // true
console.log("A" < "a");          // true（大文字は小文字より小さい）

1
2
3
4
5
6

console.log(NaN === NaN); // false
console.log(NaN == NaN);  // false

// NaNかどうかを判定するにはNumber.isNaN()を使用する
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN("hello")); // false

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const age = 25;
const hasLicense = true;

// 両方の条件が満たされているか確認
if (age >= 18 && hasLicense) {
  console.log("運転できます");
}

// 真偽値の組み合わせ
console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false); // false

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const isWeekend = true;
const isHoliday = false;

// どちらかの条件が満たされているか確認
if (isWeekend || isHoliday) {
  console.log("お休みです");
}

// 真偽値の組み合わせ
console.log(true || true);   // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false); // false

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("ログインしてください");
}

console.log(!true);  // false
console.log(!false); // true

// 二重否定で真偽値に変換
console.log(!!"hello"); // true（truthy値をtrueに変換）
console.log(!!"");      // false（空文字列はfalsy値）
console.log(!!0);       // false
console.log(!!1);       // true

1
2
3
4
5

// && の短絡評価: 左辺がfalsyなら右辺は評価されない
console.log(false && console.log("実行されない")); // false

// || の短絡評価: 左辺がtruthyなら右辺は評価されない
console.log(true || console.log("実行されない")); // true

1
2
3
4
5
6

// ||を使ったデフォルト値の設定（従来の方法）
const username = inputName || "ゲスト";

// &&を使った条件付き実行
const isAdmin = true;
isAdmin && console.log("管理者メニューを表示");

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// falsyな値の例
if (0) {
  console.log("実行されない");
}

if ("") {
  console.log("実行されない");
}

// truthyな値の例
if ("hello") {
  console.log("実行される");
}

if ([]) {
  console.log("空配列もtruthy"); // 実行される
}

if ({}) {
  console.log("空オブジェクトもtruthy"); // 実行される
}

1
2
3
4

const username = null;
const displayName = username ?? "ゲスト";

console.log(displayName); // "ゲスト"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// ||演算子の場合
console.log(0 || 100);       // 100（0はfalsyなので右辺が返る）
console.log("" || "default"); // "default"（空文字列はfalsyなので右辺が返る）
console.log(false || true);   // true

// ??演算子の場合
console.log(0 ?? 100);       // 0（0はnull/undefinedではないので左辺が返る）
console.log("" ?? "default"); // ""（空文字列はnull/undefinedではないので左辺が返る）
console.log(false ?? true);   // false

// nullとundefinedの場合は同じ挙動
console.log(null ?? "default");      // "default"
console.log(undefined ?? "default"); // "default"

1
2
3
4
5
6
7
8

// ユーザーの入力値が0の場合
const userInput = 0;

// ||を使うと0は無視されてしまう
const valueA = userInput || 10; // 10

// ??を使うと0も有効な値として扱われる
const valueB = userInput ?? 10; // 0

1
2
3
4
5
6
7
8
9

let value = null;
value ??= "default"; // valueがnull/undefinedの場合のみ代入

console.log(value); // "default"

let count = 0;
count ??= 100; // countは0なので代入されない

console.log(count); // 0

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

const user = {
  name: "太郎",
  address: {
    city: "東京"
  }
};

// 従来の書き方（エラーを防ぐための冗長なチェック）
const city = user && user.address && user.address.city;

// オプショナルチェーンを使用
const cityName = user?.address?.city;

console.log(cityName); // "東京"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

const user = {
  name: "太郎"
  // addressプロパティは存在しない
};

// 従来の方法: エラーが発生する
// console.log(user.address.city); // TypeError: Cannot read properties of undefined

// オプショナルチェーン: undefinedが返る
console.log(user?.address?.city); // undefined

// nullの場合も同様
const user2 = {
  name: "花子",
  address: null
};

console.log(user2?.address?.city); // undefined

1
2
3
4
5
6
7

const api = {
  getData: () => "データ"
};

// メソッドが存在すれば呼び出す
console.log(api.getData?.()); // "データ"
console.log(api.getUser?.()); // undefined（メソッドが存在しないためundefined）

1
2
3
4
5
6
7

const users = [
  { name: "太郎", age: 25 },
  { name: "花子", age: 30 }
];

console.log(users?.[0]?.name); // "太郎"
console.log(users?.[10]?.name); // undefined（インデックス10は存在しない）

1
2
3
4
5
6
7

const user = {
  name: "太郎"
};

const city = user?.address?.city ?? "住所未登録";

console.log(city); // "住所未登録"

1
2

// 構文: 条件 ? 真の場合の値 : 偽の場合の値
const result = condition ? valueIfTrue : valueIfFalse;

1
2
3
4
5
6
7

const age = 20;
const status = age >= 18 ? "成人" : "未成年";

console.log(status); // "成人"

// 変数への代入以外にも使用可能
console.log(age >= 20 ? "お酒を購入できます" : "お酒は購入できません");

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// 悪い例: ネストした三項演算子
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D";

// 良い例: if文を使用
let grade;
if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "D";
}

1
2
3
4
5
6
7
8
9

// 優先順位の例
const result = 2 + 3 * 4; // 14（乗算が先に評価される）
const result2 = (2 + 3) * 4; // 20（括弧で優先順位を変更）

// 論理演算子の優先順位
const a = true || false && false;
// &&が先に評価されるため: true || (false && false) → true || false → true

console.log(a); // true