演算子を知ろう！①｜1から始めるJavaScript#4

どうもRyokutyaです。
今回は演算子について学んでいきましょう。
すべてを紹介することはできませんが、よく使うものをいくつか紹介していきます。
演算子を知ることで、よりプログラミングらしいことができるようになっていきます。

算術演算子

算術演算子は皆さんもよく見たことのあるものが多くあります。
数学ででてくる「足す」、「引く」、「かける」、「割る」などのことです。
注意が必要なのは少し書き方が異なる点です。
下記の図に書き方と結果をまとめたの見てみてください。

足し算と引き算に関しては、数学と同じですね。
掛け算と割り算は少し違う記号ですが、Excelを使う人なら違和感はないかもしれませんね。
%はあまりを計算してくれます。
2÷3＝0.6・・・2となるため結果に2と表示されます。

前置加算/後置加算は前置減算/後置減算についてはまた次回以降に説明したいと思います。

代入演算子

＝について

代入演算子は前々回の記事に少し説明しましたが、「＝」のことです。
数学などでは左辺と右辺が等しいことを表しますが、JavaScriptでは右辺を左辺に代入するという意味です。

+＝（-＝）について

上の表にも書きましたが、「+＝」は左辺の値に右辺の値を加算したものを代入します。（-＝は減算したものを代入します）
これだけでは少しわかりにくいので下の例を見てみましょう。

let x=1;
x=x+2;
console.log(x);//3

let y=1;
y+=2;
console.log(y);//3

一つ目のcodeは変数ｘを宣言したのち1を代入しています、その後x自身に2を足しもう一度xに代入しています。
プログラミングを書いているとしばしば変数に入っているデータを利用して計算を行った後同じ変数に代入しなおす処理をすることがあります。
二つ目のcodeは書き方は違いますが一つ目のcodeと全く同じ意味です。
ですのでx+=2;はx=x+2;を省略した書き方と言えます。

比較演算子

比較演算子は左辺と右辺を比較する演算子です。
演算子ごとに条件があり条件を満足している場合trueを、満たしていない場合falseを返します。

＜と＜＝（＞と＞＝）について

＜（小なり）は左辺が右辺より小さい場合ture（真）を返します。
＜＝は左辺が右辺以下の場合tureを返します。

console.log(2<3); //ture
console.log(2<2); //false

console.log(2<=3); //ture
console.log(2<=2); //ture

＜は、左辺が右辺より小さいときtureを返します。
上の例で言えば右辺が2より大きい数字であればtureとなりますが、右辺が左辺と同じ大きさの時はfalseとなります。（左辺とお同じ大きさの数字は含めません）
一方＜＝は左辺と右辺が同じ大きさの場合tureを返します。
基準値（左辺）を含めるか含めないの違いがあるため必要に応じて使い分けることができます。

＝＝と＝＝＝について①

＝＝は左辺と右辺を比較して両方が等しいかどうか判断してくれます。
数学の＝と同じ意味ですね。

console.log(1 == 1); //ture

＝＝＝は左辺と右辺を比較して両方が等しいかどうか判断してくれます。
では、＝＝と＝＝＝は同じ意味でしょうか？
いいえ、違います。
＝＝＝はデータ型も一致していないとfalseとなります。
では、データ型とは一体何なのかをみていきましょう。

データ型について

データ型には基本型と参照型があります。
参照型（今回は説明を割愛しますが）には「配列（array)」,「オブジェクト（object）」,「関数（function）」があります。

基本型（今回説明する方です）には「数値型（number）」,「文字型（string）」,「真偽型（boolean）」,「シンボル型（symbol）」,「特殊型（null/undefined）」があります。

「数値型」
「数値型」はそのままですね。数値のことです。

「文字列型」
「文字列型」は文字列のことです。文字列とは「あいうえお」などの文字のことです。ここで注意が必要なのは「1,2,3,4,5」なども文字列だということです。
文字列でも数字を書くことができます、ですがデータ型が文字列型の場合計算式などに使うことはできません。（あくまで文字列のため数値として扱えません）
今まで計算式をいろいろ書いてきましたがあれらは全てJavaScriptが自動で「数値型だな」と判断してくれています。
プログラミング言語はいろいろありますが、言語によってデータ型に厳密なものと寛容なものがあります。
例えばJavaやC言語はデータ型に「厳密な言語」です。変数や定数を宣言する際にあらかじめどのデータ型を格納するかを明示しなければなりません。
数値型を格納するために用意した変数に文字列を格納することはできません。
逆にJavaScriptはデータ型に「寛容なプログラミング言語」です。
ある程度はJavaScriptが自動でデータ型を判断してくれるためです。
そのため、JavaScriptではデータ型を意識してcodeを書くことは「データ型に厳密な言語」に比べて少ないです。
ですが、データ型について全く知らないあるいはデータ型を全く意識しなくてもいいわけではありません。
JavaScriptが自動でで判断してくれるとはいえ判断できないことや判断をまちがえることもあるからです。

console.log(3+3); //6

上記のようなcodeの場合JavaScriptは3+3は計算式であるから3は数値型だと判断します。
そのためconsoleには6が表示されます。
ですが、場合によっては3+3を表示したい場合があるでしょう。
そんなときは、'（シングルクォーテーション）で前後を囲ってあげることで「文字列ですよ」とJavaScriptに教えてあげます。
JavaScriptは'（シングルクォーテーション）で囲まれているものは「文字列」と判断します。

console.log('3+3'); //3+3

「真偽型」
「真偽型」は真（ture）,偽（false）のことです。
真偽型はこの2種類しかありません。
後に説明するif文やfor文などで使います。
今は、tureとfalseがあると覚えておいてください。

「シンボル型」や「特殊型」は今の段階ではあまり意識しないでいいので、割愛します。（また機会があれば説明していきたいなと思います。）

＝＝と＝＝＝について②

データ型を学んだので、＝＝と＝＝＝についてもう一度見ていきましょう。
＝＝は左辺と右辺の値が等しい場合はtrueとなるといいましたが、データ型を学んだのでもう少し詳しく言うとデータ型が異なっていてもJavaScriptが「なんとか同じに見えないか努力して同じに見えればtureとなる」と言えます。
例えば次のようなcodeは全てtureになります。

console.log('1'==1) //ture
console.log('00000001'==1) //ture

一つ目のcodeは「文字列型」の1と「数値型」の1を比較しています。
二つ目のcodeは「文字列型」で二進数の1と「数値型」の1を比較しています。
どちらの場合もJavaScriptが努力してくれた結果同じに見えなくもないと判断しtureと表示されます。
一方＝＝＝の場合はデータ型が一致していないとtureと判断しないため、さっきのcodeは全てfalseとなります。
条件を指定し結果によって後の処理を変えるようなcode（if文）の場合＝＝では予期せぬ挙動をする場合があるので、＝＝＝を使うことをおすすめします。

！＝と！＝＝＝について

！は結果を反転します。
！＝は＝＝でtureになる場合をすべてfalseで返します。
逆に＝＝でfalseを返すもはすべてtureで返します。
！＝＝も同様で＝＝＝でtureになるものを全てfalseで返します。
＝＝＝でfalseで返す式はすべてtureで返します。

console.log('1' == 1); //ture
console.log('1'!= 1); //false

console.log('1' === 1); //false
console.log('1' !== 1); //ture

おわりに

今回は「算術演算子」、「代入演算子」、「比較演算子」について学びました。
次回は比較演算子の中で説明していない「条件式？処理１:処理２」（三項演算子）と「論理演算子」、「算術演算子」の++,--や+の特殊な使い方について説明していきたいとおもいます。
今回はこのあたりで(^^)/