DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるJavaScript入門
  4. 演算子 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.4】

演算子 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.4】

今回は基本となる演算子をまとめていきます。演算子はデータに対して処理をおこなう記号です。講座の中でもすでに「=」、「typeof」、「===」が登場しました。

今回は基本となる演算子を最小限に絞って紹介します。

算術演算子

Google ChromeのJavaScriptコンソールで試していきましょう。
>は入力欄、<-は出力結果を表しています。入力する必要はありません。

> 1 + 1
<- 2
> 1 * 3
<- 3
> 3 - 2
<- 1
> 4 / 2
<- 2
> 4 % 3
<- 1

*は掛け算、/は割り算、%は割り算の余りです。

足し算と掛け算が混ざった場合、掛け算が優先されて先に演算されます。

> 1 + 3 * 2
<- 7

ただ上記の場合は、()にくるみ演算の優先を明確にすることがほとんどです。

> 1 + (3 * 2)
<- 7

算術演算子の暗黙の型変換

算術演算子はデータ型を変換する副作用があります。データ型が「データ型(基本型) ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.3】」をご覧ください。

> "1" + 2
<- "12"

+演算子は足し算ですが、演算対象となる両方の値が、数値型のときだけです。片方が文字列型ですと、文字列の結合になります。2は数値型から文字列型に暗黙の型変換をされて演算されます

> true + 1
<- 2

trueは真偽値型というデータ型です。1は数値型です。この場合は、真偽値型が数値型に変換されます。trueは、1に変換されて演算されます。

> false + 2
<- 2

falseも真偽値型というデータ型です。2は数値型です。この場合も、真偽値型が数値型に変換されます。falseは、0に変換されて演算されます。

浮動小数点数の計算の落とし穴

プログラミング言語「Python」の入門講座「変数とデータ型 ー ゼロから始めるPython入門【Vol.4】」でも触れた問題です。

> 0.1 + 0.2
<- 0.30000000000000004

浮動小数点数の計算はこのように誤差がでる場合があります。これはJavaScriptの問題だけでなく、コンピューターが内部で数字を2進数で表すということからおこる問題です。他の言語でも同様の誤差の問題がおこります。

代入演算子

JavaScriptコンソールで試していきましょう。

> var num = 4
<- undefined
> num
<- 4

代入演算子はいろいろポイントがあるのですが、いまの段階ではベーシックな内容におさえておきます。
=の右辺にリテラルか変数をおくと、左辺の変数に代入されます。

比較演算子

演算子の左辺と右辺を比較してtruefalseを返します。

> 5 === "5"
<- false
> 5 === 5
<- true
> 5 == "5"
<- true
> 5 == 5
<- true

===は同値演算子で、両辺の値がデータ型が等しく、値も等しい時にtrueを返し、そうでなければfalseを返します。

==は等価演算子で、両辺の値が等しければtrue、そうでなければfalseを返します。ただし、==は注意が必要で、暗黙の型変換の副作用があります。

開発では==はほぼ使わないのが原則です。

> 5 == "5"
<- true

この場合、"5"5に型変換され、同じ値かどうかを演算します。

他の比較演算子も試しておきましょう。

> 5 !== 5
<- false
> 5 !== 6
<- true
> 5 !== "6"
<- true
> 5 !== "5"
<- true
> 5 != "5"
<- false

!==は両辺のデータ型が異なるか、もしくは値が異なればtrue、そうでなければfalseを返します。

!=は両辺の値が異なればtrue、そうでなければfalseを返します。==と同様に暗黙の型変換があります。

5 != "5"
false

"5"5に変換され、両辺の値を比較します。この場合、等しいのでfalseを返します。

5 !== "5"
true

は両辺のデータ型が異なるので、trueを返します。

5 < 6
true
6 > 3
true
5 <= 5
true
5 <= 6
true
5 >= 6
false
7 >= 6
true

<は左辺が右辺より小さければtrueを返します。<=は左辺が右辺以下であれば、trueを返します。

論理演算子

> 50 === 50 && 40 > 30
<- true
> 50 === 50 && 40 > 50
<- false

&&は左辺と右辺の式が両方ともtrueのときに、trueを返します。

&&はもし左辺がfalseだと分かると、右辺は調べずに、falseを返します。

> 60 === 50 && alert("ok")
<- false

右辺に仕込んだalert("ok")が実行されるとアラートウインドウがでるのですが、実行されないのででません。

> 50 === 50 && alert("ok")
<- undefined

この場合、左辺がtrueなので、ようやく右辺が実行されます。アラートウインドウがでるはずです。

&&の怠惰さが伝わればOKです。プログラミングの世界では怠惰は美徳とされます。

> 50 === 50 || 40 < 50
<- true

||は左辺と右辺の式がどちらかがtrueのときに、trueを返します。

> 50 === 50 || alert()
<- true

||は左辺がtrueと分かった時点で、右辺は調べず、trueを返します。alert()は実行されません。

> 50 === 30 || alert()
<- undefined

左辺がfalseだと、ようやく右辺が実行されます。
||も怠惰なのです。

> !(10 > 3)
<- false
> !(10 < 3)
<- true

!は、truefalseを反転させる演算子です。
(10 > 3)trueです、ところが!があるので、真偽値が反転されfalseになります。

今回はごくごくベーシックなところだけをおさえました。
その他の演算子も多くありますが、必要に応じて解説していきます。

スポンサーリンク

プロフィール

DESIGNMAP
制作ディレクター。
お問い合わせ