jQueryでよく使う演算子の一覧をおさらい【初心者向き】

jQueryでよく使う演算子の一覧をおさらい

今回は演算子(えんざんし)についてです。

演算子は色々なプログラミング言語で使われますが、jQueryでよく使うものをまとめてみました。

CSSでも少し出てくるので、一部は使ったことあるという人もいると思います。よくあるのが「<(小なり)」とか「+(加算)」とかですね。

演算子を使うと計算をしたり、2つの値を比べたり、といったことができるのでjQueryではif文などによく使われています。

実際にどういう演算子があるのか見ていきましょう!徐々に難しくなっていきますが「そういうのもあるんだなー」ぐらいでさらっと読んでもらっても大丈夫です。

ではどうぞ。

スポンサーリンク

算術演算子

足したり引いたり、割って余りを出したり・・・そのままですが算術(計算)のために使う演算子です。

演算子 意味 サンプル
+ 加算(足す) a + b
減算(引く) a – b
* 乗算(掛ける) a * b
/ 除算(割る) a / b
% 剰余(割った余り) a % b

これは普段の計算でも出てくるので簡単ですね。

ちなみに剰余は余りなので、例えば「10 % 3」と書くと結果は1になります。

代入演算子

変数に代入する時に使う演算子ですね。他の記事でも出てきましたがvar 変数名〜と書いて、自分で決めた変数(箱のようなもの)に値を入れる方法です。

例えばnum = 10(numという変数に10を入れる)を使って説明したいと思います

演算子 意味 サンプル
=  値を代入する  num = 10
 +=  a = a + bの略(加算)  num += 1(結果は11)
 -= a = a – bの略(減算)  num -= 5(結果は5)
* =  a = a * bの略(乗算) num *= 2(結果は20)
 /= a = a / bの略(除算) num /= 5(結果は2)
 %= a = a % bの略(剰余) num %= 4(結果は2)

演算子に書いてあるのは省略した書き方なので、初心者の人にとってはちょっと混乱するかもしれません。なので基本はa = a + bのように書いてもOKです。省略できるんだな、ということを覚えておけば問題ないかと思います。

実際に変数を代入する時はこのような書き方をします。

var num = 10;

var文を使うと変数を宣言できます。numのところは自分で自由に決めて大丈夫です。そのうち変数についての書き方も記事にしたいと思います。

ちなみに変数は数字じゃなく文字を入れることもできます。その場合はコーテーションマークで囲ってあげてください。

var place = '福岡';

例えば上の加算をvar文でやってみると

var num = 10 + 10;  //numに入る値は20

var name = '田中' + '太郎';  //nameに入る値は田中太郎

といった感じに書くことができます。加算は文字と文字をつなげる(もしくは変数とつなげる)こともできるので、覚えておくと便利ですよ。

比較演算子

最初に書いた<とかが比較演算子で使う記号ですね。2つの値を比べて、左にあるものが右より〜〜〜だったら、という比較ができます。正しければtrue、正しくなければfalseが返ってきます。

演算子 意味 サンプル
< より小さい(未満)  a < b
 <=  等しい or より小さい(以下)  a <= b
>  より大きい  a > b
>=  等しい or より大きい(以上)  a >= b
==  等しい  a == b
!=  一致しない  a != b
===  等しい(厳密)  a === b
!==  一致しない(厳密)  a !== b

似ててごちゃごちゃしてきますね。特に=(イコール)ってどこに書くんだっけ?と迷いそうな方は=(イコール)はあとに書くことだけは覚えておきましょう。=がつくと以上とか以下という意味になります。

例えば

5 < 5

だと「5は5よりも小さい(かどうか)」という式になりますが、どちらも同じ数値なので結果はfalseになります。

ではこうなった場合はどうでしょうか?

5 <= 5

この場合、5が5以下(等しいも含む)だったら、ということになるので結果はtrueですね。

表の最後2つの===と!==は厳密な判断をする時に使うものですが、例えば数字は文字列と数値の場合2種類あるんですが、それを厳密に判断してくれます。文字列 === 数値という比較なった場合はfalseが返ります。

イコールが2個の==の場合だと、文字列の数字は自動で数値に変換してくれます。厳密な判断を必要としない時は==で良いです。

論理演算子

論理演算子を使うと、複数の条件を使ってtrue/falseを返すすることができます。

演算子 意味 サンプル
&&  どちらもtrueの時はtrueと返す  条件a && 条件b
||  どちらかがtrueの時はtrueと返す  条件a ||条件b
!  対象がtrueだったらfalseと返す(対象がfalseだったらtrueと返す)  !条件a

なんかさらにややこしくなりましたが、&&や||を使うとそれぞれの条件を区切って、条件に応じてtrue/falseを返すようになています。!は条件の結果とは逆を返します。基本はこの書き方です。

条件式 論理演算子 条件式

&&(論理AND)の場合

&&の場合は、左右の条件がどちらもtrueの時だけtrueと返ってきます。それ以外はfalseです。

num = 5;

if( num < 10 && num > 3){
//条件がtrueの時の処理
}

例ではnumという変数に5をいれました。

if文では「numが10より小さい」「numが3より大きい」という2つの条件を入れて、それを&&で区切りました。この場合はどちらもtrueになるので、結果もtrueが返ります。

||(論理OR)の場合

||(論理OR)だとどちらか片方がtrueだったらtrueを返す、という判断になります。両方trueでもtrueとなります。

num = 5;

if( num < 10 || num == 3){
//条件がtrueの時の処理
}

例のif文では「numが10より小さい」「numが3と等しい」という2つの条件を入れて、それを||で区切りました。この場合はどちらも左側の条件はtrueですが、右側は3と等しくないのでfalseです。少なくともどちらか片方がtrueのため、結果はtrueになります。

!(論理NOT)の場合

num = 5;

if( !(num < 3){
//条件がtrueの時の処理
}

!だと逆を返すことになります、条件がtrueだったらfalse、falseだったらtrueになります(混乱しそう…)

例の場合、条件は「numが3より小さい」となってます。numは5が入っているので、この場合条件にはあてはまらないのでfalseですね。条件がfalseなので、全体の結果はtrueになります。

論理演算子は慣れてこないと、どうやって使うのやら?といった感じでしょうからまずこういうものがあるんだなーというぐらいの認識から入るのが良いですね。

演算子まとめ

というわけで演算子の一覧をまとめてみました。

進むにつれてちょっと難しくなっていくので頭が混乱するかもしれませんが、まずは比較的よく使う算術演算子から慣れていくのが良いですね。少しずつ慣れていきましょう!

演算子もjQueryではよく出てくるので、自分が書いてないコードを読み解く時にも参考になると思います。演算子の意味がわかるだけでも、コードの理解度があがるのでぜひ参考にしてみてください。

スポンサーリンク

SNS・feed登録はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です