三項演算子

# はじめに
新入社員教育でウェブ開発について学習しています。
今回はWEBページ作成中に混乱した、
演算子の種類や三項演算子についてまとめました。

# 演算子とは



:::note
<b>「1つ以上の値」から、（計算などの操作をして）「別の値」を生み出す</b>もの
:::
四則演算をする際に使用する`+（足す）` `-（引く）` `*（掛ける）` `/（割る）`などが演算子にあたります。
```js
$num = 4 + 7
```
`+`と`=`を使って、<b>4</b>・<b>7</b>という1つ以上の値を受け取り、<b>11</b>という別の値を生み出しています。


### オペレーター・オペランド
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632608/6f1d0ee0-705c-c3bf-b1ff-8a5b82ed2109.png)

:::note
演算子を<b>オペレーター</b>、演算の対象となる値や変数のことを<b>オペランド</b>という
:::

```js
$num = 4 + 7  //+,=はオペレーター、4,7,$numはオペランド
const hoge = 10  //=はオペレーター、hoge,10はオペランド
```
> 詳しくいうと、最初の式は
オペレーターである代数演算子「+」のオペランドが、4 と 7 で、
オペレーターである代入演算子「=」のオペランドが、変数 numと、部分式 4 + 7 です。
 


# 三項演算子とは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632608/4c87b96f-c82d-12b6-0ad6-d4cc19f5574f.png)


:::note
1. `if`文の省略形または代替手段として利用することが可能
2. 3つのオペランドを必要とする演算子
:::


## 1. `if`文の省略形または代替手段
### if文とは
IF文は「条件式」の結果に応じて、「True」「False」の処理を振り分けることができる構文です。
```js
if(条件式) {
    //Trueの処理
} else {
    //Falseの処理
}
```

これを「条件（三項）演算子」で記述すると、
```js
条件式 ? Trueの処理 : Falseの処理
```
となり、シンプルにすることができます。


### 使ってみる

```js:if文
if(5 > 2) {
    console.log( true );
} else {
    console.log( false );
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632608/b86b5cfe-9933-5280-a07c-6066ee3e4a01.png)



```js:三項演算子
console.log( 5 > 2 ? true : false );
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632608/50021028-07f1-2566-bfb5-845a83ba01c0.png)

このサンプルでは条件式が「5 > 2」となっており、正しい条件なのでtrueの処理が実行されて最終的には「true」が表示されているのが分かります。

最終的な結果を「戻り値」として変数に代入してみると

```js
const result = 5 > 2 ? true : false;
console.log( result );
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632608/cabd8d69-7b0b-33a2-9c50-0fecdfbe1bc6.png)

変数「result」へ条件式の結果を代入して出力しているのが分かります。

### 三項演算子とif文の使い分け
if文を何でもかんでも三項演算子に置き換えることはおすすめしません。

:::note
 if文を使ったほうがいい時
* 分岐が複雑な時
* ネストが深い時
:::   
三項演算子は、if文を一行にまとめたいとき、コードをシンプルにしたい時に使用できます。


## 2. 3つのオペランドを必要とする演算子
単項演算子、二項演算子、三項演算子の違いを説明します。

### 単項演算子

:::note
式を書いたときに、被演算子（変数とか値）が<b>１つ</b>だけ登場する演算子
:::
例）インクリメント演算子・デクリメント演算子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632608/3d744765-8f82-3800-45d0-1e8975665055.png)

| 演算子 | 名前 | 説明 |
|:----:|:----------------:|:--------------------------------:|
|++数値| 前置インクリメント | 数値 に 1 を加え、数値 を返します。 |
|数値++| 後置インクリメント | 数値 を返し、数値 に1を加えます。 |
|--数値| 前置デクリメント | 数値 から 1 を引き、数値 を返します。|
|数値--| 後置デクリメント | 数値 を返し、数値 から 1 を引きます。|


【前置インクリメント】
```js:前置インクリメント
let num = 5;
console.log(++num); 
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632608/d7971217-4978-3cbb-e231-4cc58a1a171e.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632608/9ab4efab-e0d2-de43-bf45-446112284c93.png)



### 二項演算子
:::note
式を書いたときに、被演算子（変数とか値）が<b>2つ</b>登場する演算子
:::

最初の演算子の説明で出てきた算術演算子は、二項演算子です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632608/6f1d0ee0-705c-c3bf-b1ff-8a5b82ed2109.png)

### 三項演算子
:::note
式を書いたときに、被演算子（変数とか値）が<b>3つ</b>登場する演算子
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632608/2ad5624a-57c0-6a30-2233-e77bf43c1476.png)

# まとめ
:::note
<b>演算子</b>とは
「1つ以上の値」から、（計算などの操作をして）「別の値」を生み出す</b>もの
演算子を<b>オペレーター</b>、演算の対象となる値や変数のことを<b>オペランド</b>という

<b>三項演算子</b>とは
1.`if`文の省略形または代替手段として利用することが可能
2.3つのオペランドを必要とする特殊な演算子
:::

# 参考
https://tagnote.net/javascript/language-operators-javascript/

https://jsprimer.net/basic/operator/