初心者向け！JavaScriptの演算子について解説！　byウェブカツ

JavaScriptに限らず、どのプログラミング言語でも共通する基礎には
**「演算子」「条件文」「繰り返し」「変数」「関数」**
などがあり、まずはこの基礎中の基礎の理解が必要となる。

今回はその中から「JavaScript」での**「演算子」**について解説します。



# 「演算子」とは？
演算子とは**主に「データの代入・計算・比較」を担当する様々な記号**のこと。





# 演算子の種類と解説
初心者は最初から全部を網羅する必要はないので、基本的な内容をピックアップしました。
## 代入演算子
### 「代入演算子」とは？
簡単に言うと、**データを変数に代入するためのもの**です。
最もよく使用されるのが「=」記号。

学生時代にやった算数や数学では、「=」は「**等しい**」という意味で使っていたので、慣れるまで違和感があると思うが、プログラミングでは「**等しい**」ではなく「**代入する**」という意味で使われます。



### 代入：（=）記号
さきほども説明したように、代入演算子は「代入」をします。
「=」の右側と左側にわけて見ていただきたいのですが、「**右側を左側に代入**」します。

```javascript

x=5;  //xに5を代入します。　この時点でxは5です。
y=x;  //yにxの値である5を代入します。　この時点でyは5です。
y=y+8; //（左側の）yには（右側の）yに8を加えた値を代入します。 この時点で（左側の）yは13となります。　

//2行目の時点でyは5でした。
//3行目の右辺「y+8」では、中身が5だったyに、さらに8を加えました。
//それを左辺のyに代入しなおしています。
//yの中身を上書きしているというイメージがわかりやすいでしょう。
//なので、3行目で（左側の）yは13になるのです。
```
繰り返しますが、「**等しい**」ではなく「**右側から左側への代入**」です。



### 加算代入：（+=）記号
加算代入では、**左側の変数に右側の値を加えた値で上書き**します。

先ほどの例で

```javascript
y=y+8;
```
と出てきましたが、これを省略する書き方ができるのが**加算代入**です。

```javascript
y=5;  //yに5を代入します。この時点でyは5です。 
y+=8; //y=y+8と同じことを意味します。　この時点でyは13となります。
```
プログラミングをする際には「元々の変数の値に何かの値を足して上書きしたい」ということが頻繁にでてきます。
その場合に少しでも簡潔にコードをかけるように作られたのがこの代入演算子ですね。
少しややこしいかもしれませんが、これが理解できると、この後に紹介する**減算代入・乗算代入・除算代入**も同じ理屈ですのですぐ理解できます。



### 減算代入：（-=）記号
減算代入では、**左側の変数に右側の値を引いた値で上書き**します。

```javascript
x=5;  //xに5を代入します。　この時点でxは5です。
x-=3; //x=x-3と同じことを意味します。　この時点でxは2となります。
```

### 乗算代入：（*=）記号
乗算代入では、**左側の変数に右側の値をかけ算した値で上書き**します。
（後ほどご紹介しますが「*」記号は「かける」を意味します。）

```javascript
x=8;  //xに8を代入します。　この時点でxは8です。
x*=6; //x=x*6と同じことを意味します。　この時点でxは48となります。
```
### 除算代入：（/=）記号
乗算代入では、**左側の変数に右側の値をかけ算した値で上書き**します。
（後ほどご紹介しますが「/」記号は「割る」を意味します。）

```javascript
x=20;  //xに20を代入します。　この時点でxは20です。
x/=5; //x=x/5と同じことを意味します。　この時点でxは4となります。
```

## 算術演算子
算術演算子は**数値を計算する**際に使用します。

### 加算：（+）記号
足し算です。

```javascript
x=y+z;  //「y+z」は「yにzを加える」という意味です。

//例
y=17;
x=y+8; //xは25となります。
```
 

### 減算：（-）記号
引き算です。

```javascript
x=y-z;  //「y-z」は「yからzを引く」という意味です。

//例
y=15;
x=y-8; //xは7となります。
```

### 乗算：（*）記号
かけ算です。

```javascript
x=y*z;  //「y*z」は「yにzをかける」という意味です。

//例
y=7;
x=y*8; //xは56となります。
```

### 除算：（/）記号
割り算です。

```javascript
x=y/z;  //「y/z」は「yをzで割る」という意味です。

//例
y=48;
x=y/6; //xは8となります。
```

### 剰余：（%）記号
割った際の余りです。

```javascript
x=y%z;  //「y%z」は「yをzで割った際の余り」という意味です。

//例
y=7;
x=y%3; //xは1となります。
```

### インクリメント演算子：（++）記号
変数の値を1増やします。

```javascript
//例
y=7;
y++; //yは8となります。
```


### デクリメント演算子：（--）記号
変数の値を1減らします。

```javascript
//例
x=6;
x--; //xは5となります。
```

## 比較演算子
**比較演算子**は2つの値が比較して、true（真）もしくはfalse（偽）を返します。
通常これらはif分の条件判定で使います。


### 厳密等価演算子：3つのイコール記号（===）
記号の左側と右側の値が「**等しい、かつ、同じ型かどうか**」を判定します。

判定の結果、
等しい、かつ、同じ型であれば「true」を返します。
等しい、かつ、同じ型でなければ「false」を返します。

```javascript
//例
x=6;
y=6;
z="6";

result = x === y; //変数resultの中身は「true」
result = x === z; //変数resultの中身は「false」

//2行目、3行目の6は「数値型」として扱います。
//4行目の"6"は「""」で囲んでいるので、「文字列型」として扱います。
//7行目では、同じ6ですが型が異なると判定されます。
//変数の値には「型」があることを覚えておきましょう。
```

### 厳密不等価演算子：2つの等号の前にエクスクラメーション記号（!==）
記号の左側と右側の値が「**等しい、かつ、同じ型ではないどうか**」を判定します。

判定の結果、
等しい、かつ、同じ型でなければ「true」を返します。
等しい、かつ、同じ型であれば「false」を返します。

```javascript
//例
x=6;
y=6;
z="6";

result = x !== y; //変数resultの中身は「false」
result = x !== z; //変数resultの中身は「true」

//「厳密等価演算子（===）」とは真逆ですね。
```

### 等価演算子：2つのイコール記号（==）
記号の左側と右側の値が「**等しいかどうか**」を判定します。型は判定しません。

判定の結果、
等しければ「true」を返します。
等しくなければ「false」を返します。

```javascript
//例
x=6;
y=6;
z="6";

result = x == y; //変数resultの中身は「true」
result = x == z; //変数resultの中身は「true」

//「厳密等価演算子」とほぼ同じ例ですが、こちらは型が異なっても等しいと判定されます。
```
型が異なっても「等しい」と判定してしまうのは思わぬバグの原因となることがあります。ですので、特別な理由がない限り「等価演算子」ではなく「厳密等価演算子」を使用するようにするべきですね。



### 不等価演算子：等号の前にエクスクラメーション記号（!=）
記号の左側と右側の値が「**等しいかどうか**」を判定します。

判定の結果、
等しければ「false」を返します。
等しくなければ「true」を返します。

```javascript
//例
x=6;
y=8;
z="6";

result = x != y; //変数resultの中身は「true」
result = x != z; //変数resultの中身は「false」

//「等価演算子（==）」と逆ですね。
```
こちらも「等価演算子」と同じ理由ですが、特別な理由がない限り「厳密不等価演算子」を使用するようにしましょう。



### 小なり演算子（より小さい）：小なり記号（<）
記号の左側が右側の値よりも「**小さいどうか**」を判定します。
判定の結果、
小さければ「true」を返します。
そうでなければ「false」を返します。



### 小なりイコール演算子（より小さいまたは等しい）：小なりイコール記号（<=）
記号の左側が右側の値よりも「**小さい、もしくは等しいかどうか**」を判定します。

判定の結果、
小さい、もしくは等しければ「true」を返します。
そうでなければ「false」を返します。

### 大なり演算子（より大きい）：大なり記号（>）
記号の左側が右側の値よりも「**大きいどうか**」を判定します。

判定の結果、
大きければ「true」を返します。
そうでなければ「false」を返します。


### 大なりイコール演算子（より大きいまたは等しい）：大なりイコール記号（>=）
記号の左側が右側の値よりも「**大きい、もしくは等しいかどうか**」を判定します。

判定の結果、
大きい、もしくは等しければ「true」を返します。
そうでなければ「false」を返します。

# まとめ

JavaScriptの学習を始めたばかりの初心者であれば、まずはこの演算子をマスターしてください。
他にもいろいろありますが、それは後から少しずつ覚えればOKです。

---
#### かずきち
プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
[https://webukatu.com/](https://webukatu.com/?utm_source=blog&utm_medium=bl02&utm_campaign=blog_pr)