プログラミング学習を始められたばかりで、JavaScriptの書き方でつまずいていませんか？
JavaScriptに限らず、どのプログラミング言語でも共通する基礎に
「演算子」「条件文」「繰り返し」「変数」「関数」などがあり、
慣れないとなかなか理解が進まずに困っている方も多いと思います。
そこで今回は「JavaScript 」での「演算子」をピックアップして
・「演算子」とは?
・演算子の種類と解説
についてご紹介いたします。ぜひ参考にしてみてください。
「演算子」とは？
演算子とはデータを計算する際に使われる様々な記号のことです。
JavaScriptでは様々な計算・処理をすることができるのですが、
そのために、データの処理を適切に行えるようにプログラミングする必要があります。
「演算子」はその中でも主に「データの代入・計算・比較」を担当するものですね。
全てを網羅すると莫大な量になりますので、今回は演算子の中の
さらに基本的な内容をピックアップしてご紹介していきますね。
演算子の種類と解説
代入演算子
代入演算子とは？
基本的には、データを変数に代入するためのものです。
最もよく使用されるのが「=」記号なのですが、
学生時代、算数や数学で使ってきた「=」は「等しい」という意味で使ってましたよね。
ですが、プログラミングでは「等しい」ではなく「代入する」という意味で使われます。
代入：（=）記号
さきほども説明したように、代入演算子は「代入」をします。
どこからどこに代入するのでしょうか？
「=」の右側と左側にわけて見ていただきたいのですが、「右側を左側に代入」します。
まずは実際に見ていきましょう。
|
1 2 3 4 5 6 7 8 9 |
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になるのです。 |
いかがでしょうか？
なんとなくイメージがつかめましたでしょうか？
繰り返しますが、「等しい」ではなく「右側から左側への代入」です。
では、次からは他の代入演算子をご紹介していきますね。
加算代入：（+=）記号
加算代入では、左側の変数に右側の値を加えた値で上書きします。
先ほどの例で
|
1 |
y=y+8; |
と出てきましたが、これを省略する書き方ができるのが加算代入です。
これも実際に見ていきましょう！
|
1 2 |
y=5; //yに5を代入します。この時点でyは5です。 y+=8; //y=y+8と同じことを意味します。 この時点でyは13となります。 |
プログラミングをする際には、元々の変数の値に何かの値を足したて上書きしたい、ということが頻繁におこります。
ですので、少しでも簡潔にコードをかけるように作られたのがこの代入演算子ですね。
少しややこしいかもしれませんが、これが理解できるとこの後に紹介する
減算代入・乗算代入・除算代入も同じ理屈ですのですぐ理解できますよ。
減算代入：（-=）記号
減算代入では、左側の変数に右側の値を引いた値で上書きします。
|
1 2 |
x=5; //xに5を代入します。 この時点でxは5です。 x-=3; //x=x-3と同じことを意味します。 この時点でxは2となります。 |
乗算代入：（*=）記号
乗算代入では、左側の変数に右側の値をかけ算した値で上書きします。
※後ほどご紹介しますが「*」記号は「かける」を意味します。
|
1 2 |
x=8; //xに8を代入します。 この時点でxは8です。 x*=6; //x=x*6と同じことを意味します。 この時点でxは48となります。 |
除算代入：（/=）記号
乗算代入では、左側の変数に右側の値をかけ算した値で上書きします。
※後ほどご紹介しますが「/」記号は「割る」を意味します。
|
1 2 |
x=20; //xに20を代入します。 この時点でxは20です。 x/=5; //x=x/5と同じことを意味します。 この時点でxは4となります。 |
算術演算子
では次は「算術演算子」です。
算術演算子は数値を計算する際に使用します。
加算：（+）記号
足し算です。
|
1 2 3 4 5 |
x=y+z; //「y+z」は「yにzを加える」という意味です。 //例 y=17; x=y+8; //xは25となります。 |
減算：（-）記号
引き算です。
|
1 2 3 4 5 |
x=y-z; //「y-z」は「yからzを引く」という意味です。 //例 y=15; x=y-8; //xは7となります。 |
乗算：（*）記号
かけ算です。
|
1 2 3 4 5 |
x=y*z; //「y*z」は「yにzをかける」という意味です。 //例 y=7; x=y*8; //xは56となります。 |
除算：（/）記号
割り算です。
|
1 2 3 4 5 |
x=y/z; //「y/z」は「yをzで割る」という意味です。 //例 y=48; x=y/6; //xは8となります。 |
剰余：（%）記号
割った際の余りです。
|
1 2 3 4 5 |
x=y%z; //「y%z」は「yをzで割った際の余り」という意味です。 //例 y=7; x=y%3; //xは1となります。 |
インクリメント演算子：（++）記号
変数の値を1増やします。
|
1 2 3 |
//例 y=7; y++; //yは8となります。 |
デクリメント演算子：（–）記号
変数の値を1減らします。
|
1 2 3 |
//例 x=6; x--; //xは5となります。 |
比較演算子
比較演算子は2つの値が比較して、true（真）もしくはfalse（偽）を返します。
通常これらはif分の条件判定で使います。
比較の方法はたくさんあるので、以下でご紹介いたします。
厳密等価演算子：3つのイコール記号（===）
記号の左側と右側が「等しい、かつ、同じ型かどうか」を判定します。
判定の結果、等しい、かつ、同じ型であれば「true」を、
等しい、かつ同じ型でなければ「false」を返します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//例 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」を返します。
|
1 2 3 4 5 6 7 8 9 |
//例 x=6; y=6; z="6"; result = x !== y; //変数resultの中身は「false」 result = x !== z; //変数resultの中身は「true」 //「厳密等価演算子（===）」とは真逆ですね。 |
等価演算子：2つのイコール記号（==）
記号の左側と右側が「等しいかどうか」を判定します。
判定の結果、等しければ「true」を、同一でなければ「false」を返します。
|
1 2 3 4 5 6 7 8 9 |
//例 x=6; y=6; z="6"; result = x == y; //変数resultの中身は「true」 result = x == z; //変数resultの中身は「true」 //「厳密等価演算子」とほぼ同じ例ですが、こちらは型が異なっても等しいと判定されます。 |
※型が異なっても「等しい」と判定してしまうのは思わぬバグの原因となることがあります。ですので、特別な理由がない限り「等価演算子」ではなく「厳密等価演算子」を使用するようにしましょう！
不等価演算子：等号の前にエクスクラメーション記号（!=）
記号の左側と右側が「等しいかどうか」を判定します。
判定の結果、等しければ「true」を、同一でなければ「false」を返します。
|
1 2 3 4 5 6 7 8 9 |
//例 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の学習を始めたばかりの方は演算子の基本習得に、ぜひご参考にしてみてください。
