こんにちは、エンジニアのかい＠dikxs118です！
プログラミングを行う上で必要不可欠な知識に、演算子というものがありますね。
演算子と一言に言ってもその種類はいくつかあり、その種類の中にも様々な演算子があります。
演算子の種類が多すぎてよくわからなくなってきた…
そもそも演算子ってなんだろう？
という方必見！
今回はJavaScriptでよく使われる演算子について解説していきます。
この記事では、
【基礎】演算子の種類
【基礎】各演算子の使い方
【発展】演算子の優先順位
という流れで、基礎から実用的なところまで解説していきます。
しっかり学習して、憧れの演算子マスターになっちゃいましょう！
演算子とは？
演算子は、プログラミング内で使用する記号のことです。
算数とかでも足す(＋)や引く(−)などの記号を使いましたよね。
同じように、プログラミングでも用途によって使う記号が決まっているのです。
演算子を使うことで、値の計算や値の代入、値の比較などをすることができます。
演算子の種類を確認しよう
では、どんな演算子があるのかを見ていきましょう。
全てを紹介するとちょっと長くなっちゃうので、よく使われる基本の演算子に絞って紹介していきます。
| 演算子の名称 | 説明 |
|---|---|
| 算術演算子 | 数式などを計算するための演算子です。 足し算や引き算、掛け算、割り算などをすることができます。 |
| 代入演算子 | 値を代入するための演算子です。 数学でよくあるa=1と同じ意味です。 数字だけでなく、文字を入れることも可能です。 |
| 比較演算子 | 値を比較するための演算子です。 大なり小なりとかのことです。 |
| 論理演算子 | 命題論理を扱うための演算子です。 検索条件のANDとかORと同じ働きをします。 |
それぞれどのような使い方をするのか、次の項目から見ていきましょう。
他の種類が気になる方は、下記のリファレンスなどで確認してみてください。
>>演算子リファレンス
算術演算子の使い方
まず算術演算子からですね。
算術演算子とは、文字通り計算に用いる演算子です。
計算と言えばこれ：四則演算
四則演算でよく使う演算子は、下記のようなものです。
| 演算子の種類 | 説明 |
|---|---|
| + | 加算(足し算)をします |
| - | 減算(引き算)をします |
| * | 乗算(掛け算)をします |
| / | 除算(あまりなしの割り算)をします |
| % | 剰余(あまりのある割り算)をします |
このうち、剰余を除く４つを四則演算と一般的に呼んでいます。
親しみのある、数字の計算式の記号ですね。
乗算と除算の記号がちょっと違うことや、あまりを出すか出さないかで記号が違うことに注意です。
実際に使ってみると、下記のように計算をすることができます。
console.log( 2 + 3 ); //加算 console.log( 5 - 2 ); //減算 console.log( 5 * 8 ); //乗算 console.log( 10 / 2 ); //除算 console.log( 20 % 6 ); //剰余
実行結果
5 3 40 5 2
下記記事では、「剰余」を使ったサンプル事例も解説しているので、ぜひ参考にしてみてください！
プラスが2つ：インクリメント
算術演算子には、プログラミングならではの書き方があります。
そのうちの１つが、プラスを2つ並べて記述するインクリメントです。
インクリメントは、任意の数値を1ずつ加算することができる書き方です。
わかりやすいように、簡単な例を見てみましょう！
var num = 0; console.log( num++ ); console.log( num++ ); console.log( num++ ); console.log( num++ ); console.log( num++ );
実行結果
0 1 2 3 4
この例では、変数numに数値の0が代入されていますね。
このnumに対して何度もインクリメントを実行することで、1ずつ加算されているのが実行結果からもわかります。
ちなみに、「num++」という書き方だけでなく「++num」のように先頭にインクリメントを指定することも可能です。
しかし、実行タイミングが異なるので注意が必要です！
次の例を見てください！
var num1 = 0; var num2 = 0; //変数を代入してから加算 var result1 = num1++; //加算してから変数を代入 var result2 = ++num2; console.log( result1 ); console.log( result2 );
実行結果
0 1
「num1++」のように末尾にインクリメントを付けると「0」から加算が始まるようになります。
逆に「++num2」のように先頭にインクリメントを付けると、すでに加算されて「1」から始まることになるのです。
ループ処理などを行う際には、この違いに気をつけてプログラミングするようにしましょう！
マイナスが2つ：デクリメント
インクリメントと同じく、値を1ずつ減算することができる書き方がデクリメントです。
こちらはマイナスを2つ並べて記述します。
例を見てみましょう。
var num = 5; console.log( num-- ); console.log( num-- ); console.log( num-- ); console.log( num-- ); console.log( num-- );
実行結果
5 4 3 2 1
こちらもインクリメントと同じく、「––num」という書き方をすることもできます。
この場合も実行タイミングの違いが出てくるので、注意してくださいね！
小数点の扱い方に注意しよう
電卓で「2.4 ✕ 6」を計算すると「14.4」になりますが、JavaScriptの世界だとわずかな誤差が発生する場合があります。
次の例を見てください！
var result = 2.4 * 6; console.log( result );
実行結果
14.399999999999999
このように、「14.4」という結果にはならずにわずかな誤差が生じて小数点以下が無限に生じるケースがあるのです。
このようなずれが発生しないよう、JavaScriptでは以下のような方法を用いて計算を行ないます。
②整数を10で割る
これにより、想定していた小数点を得ることができるわけです。
例えば、先ほどのサンプルだと「2.4」に10を掛けると「24」という整数になりますよね？
これに6を掛けると「144」という結果が出るので、最後に10で割ると「14.4」になるというわけです。
代入演算子の使い方
次に代入演算子について学んでいきましょう！
値を代入する方法や参照型についてしっかりと理解しておきましょう。
代入とは？
下記のような計算式に見覚えはありませんか？
a+2=3
この式では、1という数字をaという記号に置き換えて表現していますね。
この置き換えのことを代入といいます。
プログラミングでは、変数というものを定義する時に使われるものですね。
この代入を行なっているのも、演算子の１つです。
値を代入する方法
値を代入する際は、下記のように記述をします。
変数というのが、先ほどでいうaという記号ですね。
値が1という数値にあたります。
つまりこの「=(イコール1つ)」が代入演算子ということです。
2つになると他の演算子になっちゃうので、注意しましょう。
代入演算子は、「=」だけでなく、「+=」や「-=」など数値に四則演算などを加えてから代入できるものもあります。
では、いくつかの例を見ながら代入演算子の種類について見ていきましょう！
var num = 10; // 変数の代入 console.log( num ); console.log( num += 3 ); //3を加算して代入 console.log( num -= 3 ); //3を減算して代入 console.log( num *= 2 ); //2を乗算して代入 console.log( num /= 4 ); //4を除算して代入 console.log( num %= 2 ); //2で割った余りを代入
実行結果
10 13 10 20 5 1
この例では、数値の10を変数numに代入しているのがわかります。
numに対して、さまざまな演算処理を行ってから代入し、実行結果として値を出力しているわけですね！
参照型とは一体なにか？
代入演算子で注意が必要なのが参照型を扱う場合です。
参照型とは一般的に配列・オブジェクト・関数などが該当します。
さて、参照型の場合は一般的な変数に値を代入するのと一体なにが違うのでしょうか？
次の例を見てください！
var num = 10; var result = num;
これは、変数numに代入された数値を別の変数resultに再代入している例です。
この時に変数「num / result」には、それぞれ数値の10がそのまま格納されています。
それでは、参照型である配列の場合はどうでしょうか？
var items = [1, 2, 3]; var results = items;
この場合、配列の「items / results」には[1, 2, 3]という値が格納されているのではなく、値の「場所」が格納されているのです。
そして、その「場所」を配列「items / results」が参照している状態であるというわけです。
値の場所を参照しているので、当然ですが「items / results」どちらも[1, 2, 3]という値の情報を持っています。
しかし、数値そのものが格納されている場合と値の場所が格納されている場合とでは、大きく異なる点があります。
次の項目で詳しく見ていきましょう！
配列に値を代入する方法
参照型の代表である配列に値を代入する方法を見ていきましょう！
まず最初に、前章で解説した数値そのものが格納されている場合についておさらいしておきまます。
次の例を見てください！
var num = 3; var result = num; num = 5; console.log( result );
実行結果
3
この場合、変数numもresultも数値の3が代入されていることになります。
そのため、途中で「num = 5」と記述して変数numの値を変更しても変数resultの値は変わらないことが実行結果からも分かります。
そこで、参照型の配列でも同じことをやってみましょう！
var items = [2,4,7,3,8]; var results = items; items[0] = 9; console.log( results );
実行結果
[9, 4, 7, 3, 8]
この例では、配列itemsもresultsも値である[2,4,7,3,8]が格納されている「場所」を参照しています。
途中で「items[0] = 9」と記述して値の先頭だけ「9」に変更していますよね？
変更したのは配列itemsですが、配列resultsの中身を見てみると実行結果のように値の先頭が「9」に変更されています。
これこそが参照型の大きな特徴なのです！
つまり、値が格納されている場所を参照しているだけなので、元の値が変更されたら変更後の値を参照するわけです。
この特徴はプログラミングする上で重要なポイントなので忘れないようにしましょう！
比較演算子の使い方
ここからは比較演算子について学んでいきましょう！
一般的にIF文などでよく使われる演算子ですが、その基本的な比較方法や種類について詳しく見ていきます。
比較演算子の種類を確認しよう
次に、比較演算子の種類について学んでいきましょう。
比較演算子は、名前の通り比較を行なう演算子です。
比較の対象は、演算子を挟んだ左右の数値になります。
下記の例で種類を確認していきましょう。
console.log( 10 === 10 ); //左辺と右辺が等しい console.log( 10 == 10 ); //左辺と右辺が等しい console.log( 5 !== 3 ); //左辺と右辺が等しくない console.log( 10 < 15 ); //左辺が右辺より小さい console.log( 3 <= 3 ); //左辺が右辺と等しいか小さい console.log( 12 > 8 ); //左辺が右辺よりも大きい console.log( 9 >= 9 ); //左辺が右辺と等しいか大きい
上記の例はすべて「true(正しい)」という比較結果になります。
イコール3つと2つの違い
イコール2つの「==」は等価演算子と呼び、文字通り「値」が等しいかどうかを確認できます。
イコール3つの「===」は厳密等価演算子と呼び、「値」だけでなく「型」も等しいかどうかを確認できるのです。
わかりやすいようにサンプル例を見てみましょう！
console.log( '1' == 1 ); console.log( '1' === 1 );
実行結果
ture false
この例では、文字列の「1」と数値の「1」を比較している例です。
このように「値」と「型」が両方一致しないと「true」にならないのが「===」の特徴というわけです。
「==」と「===」の違いや活用事例については、次の記事で詳しくまとめています。
ぜひ併せて読んでみてください！
>>比較演算子をマスターする！超詳しい記事はこちら
IF文の条件式に比較演算子を使う方法
それでは、実際に比較演算子を使ったプログラミング例を見てみましょう！
一般的によく使われるのはIF文による条件式です。
次の例を見てください！
var str = '123';
if( str === 123 ) {
console.log('どちらも等しいです');
}
else {
console.log('等しくありません！');
}
実行結果
等しくありません！
この例では、厳密等価演算子(===)をIF文の条件式に指定した例です。
比較演算子はこのように条件分岐する際に使われることがほとんどです。
そして、値を比較した結果によって処理の方法を変えるというのがプログラミングの重要な要素とも言えるわけです。
これらの省略形の表示の仕方として条件(三項)演算子というものもありますので、知識を深めたい方は、次の記事で基本から応用技までまとめているのでぜひ参考にしてみてください！
三項演算子について
IF文は演算子を活用すると簡略化することが可能で、簡単な処理であれば効率よくプログラミングを行えるので合わせてご紹介しておきます！
利用する演算子は「三項演算子」と呼ばれており、「?」「:」の２種類を次のように記述していきます。
条件式 ? Trueの処理 : Falseの処理
条件式を記述したあとに、「?（はてな）」を記述することでその次に記述されたtrueの処理とfalseの処理を実行することができます。
true / falseの区分けに使うのが「:（コロン）」になります。
例えば、簡単な例を実行してみましょう！
5 > 2 ? true : false;
この例は条件式に「5 > 2」と設定していますね？
当然ながら、5の方が大きいので条件式の通りとなり結果はtrueになります。
その他、三項演算子を活用した複雑な条件分岐処理の作り方などを次の記事でまとめているのでぜひ参考にしてみてください！
論理演算子の使い方
ここからは、論理演算子について学習していきましょう！
論理演算子とは？
Googleなどで検索をするとき、AND検索とかOR検索とかって見たことありませんか？
例えば、JavaScriptの演算子について知りたい時は「JavaScript」「演算子」の2つのキーワード両方にあてはまる記事を探しますよね。
そう、まさにこれが論理です。
・条件1または条件2にあてはまる
など、他の演算子と組み合わせたりしながら、詳細な条件を与えることができるのが論理演算子なのです。
複数の条件にあてはまる：AND(&&)
まず最初に、論理演算子AND(&&)について見ていきましょう！
一般的な記述方法は、【 条件式 && 条件式 && 条件式・・・ 】のように「&&」で条件式を連結していきます。
分かりやすいように簡単なサンプル例を見てみましょう！
var result1 = 3 < 10; //true var result2 = 3 > 5; //false //論理演算子「&&」を使って比較する console.log( result1 && result2 );
実行結果
false
この例では、2つの条件式をAND(&&)で連結しているのが分かりますね。
実行結果を見ると「false」になっていますが、AND(&&)には以下のような特性があります。
| true && true | true |
| true && false | false |
| false && true | false |
| false && false | false |
つまり、AND(&&)で連結した条件式がすべてにあてはまる場合のみ、結果が「true」になるということです！
条件のどれかにあてはまる：OR(||)
今度は、論理演算子のOR(||)を使い、先ほどのサンプルと同じ内容を比較してみましょう！
使い方はAND(&&)と同じで、【 条件式 || 条件式 || 条件式・・・ 】のように「||」で条件式を連結していきます。
次の例を見てください！
var result1 = 3 < 10; //true var result2 = 3 > 5; //false //論理演算子「&&」を使って比較する console.log( result1 || result2 );
実行結果
true
この例では、先ほどのAND(&&)をOR(||)に変更しただけです。
しかし、実行結果を見ると今度は「true」が表示されていますよね？
ここでOR(||)の特性を見てみましょう！
| true || true | true |
| true || false | true |
| false || true | true |
| false || false | false |
つまり、OR(||)はすべての条件式が「false」の場合にのみ結果が「false」になるのです。
条件のどれかを満たしていればOKというわけですね。
先ほどの例で言うと、条件式result1は「true」でresult2は「false」なので結果的に「true」になったというわけです。
このように、AND(&&)とOR(||)の特性を理解して条件式を連結することが重要です。
忘れないようにしておきましょう！
条件にあてはまらない：NOT(!)
では最後に、NOT(!)の使い方も見てみましょう。
NOT(!)は単一の対象物に対してFalseであればTrueを返します。
つまり、条件1かつ条件2でなければという、否定の条件を指定することができるのです。
以下のコードを見てください。
var result1 = 5;
if (result1 >=! 3) {
console.log("3以下じゃなかったら表示");
}
else {
console.log("3以下だったら表示");
}
3以下じゃなかったら表示
このように、>=の不等号がNOT(!)によって反転した意味合いを表していることがわかります。
文字列の結合演算子の使い方
次に、文字列の結合演算子についても見ていきましょう！
結合演算子は、文字と文字を結合して１つの文字列として結果を返すことができる演算子になります。
例えば、「Hello」と「World」という２つの文字列に対して結合演算子を使うと次のようになります。
var result = Hello + World;
この例では、文字と文字の間に「+」を記述しているのが分かりますか？
これは算術演算子で利用した数値を計算する演算子だったわけですが、JavaScriptでは文字列に利用すると結合演算子として利用できるのです。
結合演算子の活用方法や他のメソッドによる文字列の結合に関しては、次の記事で体系的にまとめているのでぜひ参考にしてみてください！
単項演算子「delete」の使い方
今度は少し特殊な使い方をする演算子である「delete」について見ていきましょう！
deleteは読んで字のごとく「削除」を意味しており、配列やオブジェクトのプロパティなどを削除するために使う演算子になります。
使い方はシンプルで、deleteに続けて削除したい値を指定するだけです。
delete 配列かオブジェクト
例えば、オブジェクトのプロパティを削除したければ次のように記述します。
var obj = {name:'taro', age:30};
delete obj.name;
console.log(obj);
実行結果
{ age: 30 }
この例では、オブジェクト内にある「name」プロパティだけを削除しています。
「delete obj.name」と記述することで、オブジェクト内の任意のプロパティを削除するという意味になるわけです。
また、配列の要素を削除することも可能です。
var arr = [4,2,6,7]; delete arr[2]; console.log(arr);
実行結果
[4, 2, undefined, 7]
同じように「delete arr[2]」と記述することで２番目の配列要素を削除していますね。
ただし、注意点としては配列要素の位置は変わらないという点です！
実行結果を見ると２番目の配列要素が「unndefined」になっているのが分かりますね？
つまり、値は削除していますが要素の位置は変わっていないというわけです。
演算子の優先順位に気をつけよう
これまでご紹介してきた各演算子には優先順位があります。
優先順位とは、複数の演算子が一緒に記述されている場合に「どの順番で処理をするか？」を定義したものです。
一般的によく使う演算子の優先順位は以下の通りです！
| 高い | ( )かっこ |
| ・ | ++ — インクリメント・デクリメント |
| ・ | * / % 乗算・除算・剰余 |
| ・ | + – 加算・減算 |
| ・ | == === 等価・厳密等価 |
| ・ | && AND |
| ・ | || OR |
| ・ | ? : 条件(三項) |
| ・ | = 代入 |
| 低い | , カンマ |
このような優先順位は、一般的な数学の式とちょっと似ていますね。
足し算・引き算よりも掛け算・割り算を優先して計算するというルールと同じようなものだと思ってください。
思ったような値がでないというときは、優先順位が関係していることも多いので注意して確認するようにしましょう。
まとめ
今回は、JavaScriptにおいて一般的によく使われる演算子について、まとめて学習してきました。
ここで、もう一度ポイントをおさらいをしておきましょう！
・代入演算子では「参照型」の代入に気をつける
・比較演算子では、「==」と「===」の違いが大切なポイントになる
・論理演算子では、「&&」と「||」の違いと使い分けに気をつける
・演算子には優先順位があることを覚えておく
これらの内容を踏まえて、どのような結果が表示されるかを自分でチェックしておきましょう！
そしてぜひ、自分のプログラムにも積極的に取り入れてくださいね。
それでは！！
