JavaScript - オペレータ

こんにちは、将来のJavaScriptの魔法使いたち!この興奮するJavaScriptオペレータの世界への旅にあなた们的ガイドとして参加できることを嬉しく思います。プログラミングを教えてきた年数を振り返ると、オペレータを理解することはコードの世界の秘密の握手を学ぶことのようなものだと言えます。それでは、一緒にこれらの謎を解き明かしましょう!

JavaScript - Operators

オペレータとは?

本題に入る前に、基本的なことを説明しましょう。JavaScriptでは、オペレータはオペランド(値と変数)に操作を行うために使用される特殊なシンボルです。オペレータはプログラミング言語の動詞のように考えられます – 事物を動かすアクションです!

例えば、式 2 + 3 では、+ がオペレータで、23 がオペランドです。シンプルですね?

JavaScriptの算術オペレータ

それでは、算術オペレータについて話しましょう。これらはJavaScriptにおける数学的操作の基本です。昔の数学の授業を思い出してください。その知識を再び使う時が来ました!

以下に算術オペレータの表を示します:

オペレータ 説明
+ 加算 5 + 3 = 8
- 減算 5 - 3 = 2
* 掛け算 5 * 3 = 15
/ 除算 15 / 3 = 5
% 剰余(モジュラス) 5 % 2 = 1
++ 増加 Let x = 5; x++; (Now x is 6)
-- 減少 Let x = 5; x--; (Now x is 4)

これらを実際に見てみましょう:

let a = 10;
let b = 5;

console.log(a + b); // 出力: 15
console.log(a - b); // 出力: 5
console.log(a * b); // 出力: 50
console.log(a / b); // 出力: 2
console.log(a % b); // 出力: 0

a++; // a is now 11
console.log(a); // 出力: 11

b--; // b is now 4
console.log(b); // 出力: 4

このコードの各行は、これらのオペレータがどのように動作するかを示しています。モジュラスオペレータ(%)は一部の人にとって新しいかもしれません – これは除算後の余りを返します。数が偶数か奇数かをチェックする際に非常に便利です!

JavaScriptの比較オペレータ

次に、比較オペレータについてお話ししましょう。これらはプログラミングコンテストの審査員のように、値を比較してtrueまたはfalseを返します。これらはコード内で決定を行うために不可欠です。

以下に比較オペレータの表を示します:

オペレータ 説明
== 等しい 5 == 5 は true
=== 厳密に等しい(値と型) 5 === "5" は false
!= 等しくない 5 != 3 は true
!== 厳密に等しくない 5 !== "5" は true
> より大きい 5 > 3 は true
< より小さい 5 < 3 は false
>= より大きいか等しい 5 >= 5 は true
<= より小さいか等しい 5 <= 3 は false

これらを実際に見てみましょう:

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 > 3);   // 出力: true
console.log(x < 10);  // 出力: true
console.log(x >= 5);  // 出力: true
console.log(x <= 4);  // 出力: false

=====の違いに注意してください。三重等号(===)は値と型の両方をチェックしますが、二重等号(==)は値のみをチェックします。これは初心者がよく間違えるポイントですので、どちらを使用しているか常に注意してください!

JavaScriptの論理オペレータ

論理オペレータはJavaScriptの決定者です。これらは複数の条件を結合し、複雑な決定を行います。プログラミングの村の賢い老人のように、コードが正しい選択を行うように導きます。

以下に論理オペレータの表を示します:

オペレータ 説明
&& 論理AND (x > 0 && x < 10)
|| 論理OR (x === 5 || y === 5)
! 論理NOT !(x === y)

これらを実際に見てみましょう:

let a = 5;
let b = 10;

console.log(a > 0 && b < 20);  // 出力: true
console.log(a > 10 || b === 10);  // 出力: true
console.log(!(a === b));  // 出力: true

&&オペレータは、両方の条件がtrueの場合にのみtrueを返します。||オペレータは、少なくとも一方の条件がtrueの場合にtrueを返します。!オペレータはブール値を反転させます – trueをfalseに、falseをtrueにします。

JavaScriptのビットwiseオペレータ

ここで、整数のビット上で動作するビットwiseオペレータの領域に入ります。これらはプログラミングの世界の秘密工作員のように、頻繁には使用されませんが、必要なときには非常に強力です。

以下にビットwiseオペレータの表を示します:

オペレータ 説明
& ビットwise AND
| ビットwise OR
^ ビットwise XOR
~ ビットwise NOT
<< 左シフト
>> 符号 propagating 右シフト
>>> ゼロ fill 右シフト

これらのオペレータは少し進んだ内容ですので、初めは混乱するかもしれません。プログラミングの旅を進む中で、必要な状況に遭遇するでしょう。

JavaScriptの代入オペレータ

代入オペレータは変数に値を代入するために使用されます。これらはプログラミングの世界の運び屋のように、事物を適切な場所に配置します。

以下に代入オペレータの表を示します:

オペレータ 説明
= 代入 x = 5
+= 加算代入 x += 3 は x = x + 3 と同じ
-= 減算代入 x -= 3 は x = x - 3 と同じ
*= 掛け算代入 x = 3 は x = x 3 と同じ
/= 除算代入 x /= 3 は x = x / 3 と同じ
%= モジュラス代入 x %= 3 は x = x % 3 と同じ

これらを実際に見てみましょう:

let x = 5;
console.log(x); // 出力: 5

x += 3;
console.log(x); // 出力: 8

x -= 2;
console.log(x); // 出力: 6

x *= 4;
console.log(x); // 出力: 24

x /= 3;
console.log(x); // 出力: 8

x %= 3;
console.log(x); // 出力: 2

これらのオペレータは、コードを簡潔で読みやすいにするショートカットです。これらはプログラミングの世界のスイスアーミーナイフのように、多様で便利です!

JavaScriptの雑多なオペレータ

最後に、他のカテゴリに当てはまらないいくつかの雑多なオペレータを見てみましょう。

  1. 条件(terinary)オペレータ: これはif-elseステートメントの短形式です。
let age = 20;
let canVote = (age >= 18) ? "Yes" : "No";
console.log(canVote); // 出力: "Yes"

このオペレータは age >= 18 がtrueかどうかをチェックします。trueの場合、「Yes」を canVote に代入し、falseの場合、「No」を代入します。

  1. typeofオペレータ: これはオペランドの型を示す文字列を返します。
console.log(typeof 42);        // 出力: "number"
console.log(typeof 'blubber'); // 出力: "string"
console.log(typeof true);      // 出力: "boolean"
console.log(typeof [1, 2, 4]); // 出力: "object"
  1. deleteオペレータ: これはオブジェクトのプロパティまたは配列の要素を削除します。
let person = {name: "John", age: 30};
delete person.age;
console.log(person); // 出力: {name: "John"}

以上がJavaScriptのオペレータについてのすべてです。練習は完璧を生みます。ですので、これらのオペレータを自分のコードで実験してみてください。ハッピーコーディング!

Credits: Image by storyset