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になるのです。
繰り返しますが、「等しい」ではなく「右側から左側への代入」です。
加算代入：（+=）記号
加算代入では、左側の変数に右側の値を加えた値で上書きします。
先ほどの例で
y=y+8;
と出てきましたが、これを省略する書き方ができるのが加算代入です。
y=5; //yに5を代入します。この時点でyは5です。
y+=8; //y=y+8と同じことを意味します。 この時点でyは13となります。
プログラミングをする際には「元々の変数の値に何かの値を足して上書きしたい」ということが頻繁にでてきます。
その場合に少しでも簡潔にコードをかけるように作られたのがこの代入演算子ですね。
少しややこしいかもしれませんが、これが理解できると、この後に紹介する減算代入・乗算代入・除算代入も同じ理屈ですのですぐ理解できます。
減算代入：（-=）記号
減算代入では、左側の変数に右側の値を引いた値で上書きします。
x=5; //xに5を代入します。 この時点でxは5です。
x-=3; //x=x-3と同じことを意味します。 この時点でxは2となります。
乗算代入：（*=）記号
乗算代入では、左側の変数に右側の値をかけ算した値で上書きします。
（後ほどご紹介しますが「*」記号は「かける」を意味します。）
x=8; //xに8を代入します。 この時点でxは8です。
x*=6; //x=x*6と同じことを意味します。 この時点でxは48となります。
除算代入：（/=）記号
乗算代入では、左側の変数に右側の値をかけ算した値で上書きします。
（後ほどご紹介しますが「/」記号は「割る」を意味します。）
x=20; //xに20を代入します。 この時点でxは20です。
x/=5; //x=x/5と同じことを意味します。 この時点でxは4となります。
算術演算子
算術演算子は数値を計算する際に使用します。
加算：（+）記号
足し算です。
x=y+z; //「y+z」は「yにzを加える」という意味です。
//例
y=17;
x=y+8; //xは25となります。
減算：（-）記号
引き算です。
x=y-z; //「y-z」は「yからzを引く」という意味です。
//例
y=15;
x=y-8; //xは7となります。
乗算：（*）記号
かけ算です。
x=y*z; //「y*z」は「yにzをかける」という意味です。
//例
y=7;
x=y*8; //xは56となります。
除算：（/）記号
割り算です。
x=y/z; //「y/z」は「yをzで割る」という意味です。
//例
y=48;
x=y/6; //xは8となります。
剰余：（%）記号
割った際の余りです。
x=y%z; //「y%z」は「yをzで割った際の余り」という意味です。
//例
y=7;
x=y%3; //xは1となります。
インクリメント演算子：（++）記号
変数の値を1増やします。
//例
y=7;
y++; //yは8となります。
デクリメント演算子：（--）記号
変数の値を1減らします。
//例
x=6;
x--; //xは5となります。
比較演算子
比較演算子は2つの値が比較して、true（真）もしくはfalse（偽）を返します。
通常これらはif分の条件判定で使います。
厳密等価演算子：3つのイコール記号（===）
記号の左側と右側の値が「等しい、かつ、同じ型かどうか」を判定します。
判定の結果、
等しい、かつ、同じ型であれば「true」を返します。
等しい、かつ、同じ型でなければ「false」を返します。
//例
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」を返します。
//例
x=6;
y=6;
z="6";
result = x !== y; //変数resultの中身は「false」
result = x !== z; //変数resultの中身は「true」
//「厳密等価演算子（===）」とは真逆ですね。
等価演算子：2つのイコール記号（==）
記号の左側と右側の値が「等しいかどうか」を判定します。型は判定しません。
判定の結果、
等しければ「true」を返します。
等しくなければ「false」を返します。
//例
x=6;
y=6;
z="6";
result = x == y; //変数resultの中身は「true」
result = x == z; //変数resultの中身は「true」
//「厳密等価演算子」とほぼ同じ例ですが、こちらは型が異なっても等しいと判定されます。
型が異なっても「等しい」と判定してしまうのは思わぬバグの原因となることがあります。ですので、特別な理由がない限り「等価演算子」ではなく「厳密等価演算子」を使用するようにするべきですね。
不等価演算子：等号の前にエクスクラメーション記号（!=）
記号の左側と右側の値が「等しいかどうか」を判定します。
判定の結果、
等しければ「false」を返します。
等しくなければ「true」を返します。
//例
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/