jQueryで演算子を使おう!

jQueryで演算子を使おう!

演算子とは、計算や処理を行うための記号表記のことです。

jQueryの演算子には、算術演算子、代入演算子、比較演算子、論理演算子などがあります。

算術演算子とは?

算術演算子とは、数学的な計算を行う演算子です。

1 + 2

算数と同様、プラスなどの記号で数を結ぶことで、計算が行われます。

サンプルでは、1と2を足した値、3が返されます。

算術演算子の一覧

+加算足し算
減算引き算
*乗算掛け算
/除算割り算
%剰余割り算の余り
++インクリメント1を足す
デクリメント1を引く
単項符号反転符号を反転する
+単項プラス数値に変換する
**指数演算子べき乗

前置演算子と後置演算子の違いは?

インクリメント、デクリメントは、変数の前か後ろに追加します。

前に付けるのが前置演算子、後ろに付けるのが後置演算子です。

let count = 1;

count++;
let count = 1;

++count;

変数を後置演算子、前置演算子でインクリメントしています。

サンプルでは、どちらのcountも2になります。

let count = 1;

console.log(count++);
1

後置演算子は、1を足す前の値を返します。

サンプルでは、countは2になりますが、count++は1を返します。

let count = 1;

console.log(++count);
2

前置演算子は、1を足した後の値を返します。

サンプルでは、count, ++countともに2を返します。

--count;
count--;

1を引く以外は、デクリメントもインクリメントと同様です。

代入演算子とは?

代入演算子とは、右辺を左辺に代入する演算子です。

x = 1

左辺と右辺をイコールで結ぶことで、右辺が左辺に代入されます。

サンプルでは、xに1が代入されます。

複合代入演算子とは?

複合代入演算子とは、算術と演算を同時に実行する演算子です。

x = x + 1

算術演算子でxに1を加えた後、代入演算子でxに代入しています。

x += 1

これを複合代入演算子で書き換えると、サンプルのようになります。

算術演算子と代入演算子を続けて書くことで、複合代入演算子を使用できます。

複合代入演算子の一覧

x += y加算代入x = x+ y
x -=y減算代入x = x- y
x *= y乗算代入x = x * y
x /= y除算代入x = x / y
x %= y剰余代入x = x % y
x **= yべき乗代入x = x ** y

比較演算子とは?

let a = 1;
let b = 1;

console.log(a == b);
true

比較演算子とは、2つのものを比較する演算子です。

条件を満たせばtrue, 満たさなければfalseを返します。

サンプルでは、aとbを比較し、等価であるという条件を満たすので、trueを返しています。

比較演算子の一覧

==等価等しい
!=不等価等しくない
===厳密等価値、型が等しい
!==厳密不等価値か型が等しくない
>より大きい
>=以上
<より小さい
<=以下

値を含む比較は以上、以下を使おう!

let x = 1;

console.log(x >= 1);
true

AがB以上であることを比較するには、比較演算子>=を使います。

>(より大きい)とは異なり、右辺の値を含む比較が可能です。

サンプルでは、xは1以上なので、trueが出力されます。

x <= 1

AがB以下であることを比較するには、比較演算子<=を使います。

サンプルでは、xが1以下である場合にtrueを返します。

以上の比較には >= を使おう!

x => 1

以上の比較で=>を使わないように注意しましょう。

=>はアロー関数として扱われます。

1 => x
Uncaught SyntaxError: Malformed arrow function parameter list

変数と数字を入れ替えると、不正なアロー関数の引数リストであるというエラーが発生します。

論理演算子とは?

論理演算子とは、ブーリアン型(ブール値)を扱う演算子です。

ブーリアン型は、条件が真であればtrue, 偽であればfalseを取る型のことです。

論理演算子でブール値を結ぶことにより、条件を追加することができます。

「かつ」の論理演算子を使おう!

let t1 = true;
let t2 = true;

console.log(t1 && t2);
true

AかつBの条件を追加するには、ブール値を2つのアンパサンド(&&)で結びます。

t1 && t2

この式は、どちらもtrueであればtrueを返し、どちらかがfalseであればfalseを返します。

サンプルでは、t1, t2ともにtrueなので、trueが返されます。

論理演算子の一覧

&&論理積(AND, かつ)x && y
||論理和(OR, または)x || y
!論理否定(NOT, 否定)!x

否定の論理演算子を使おう!

let t = true;

console.log(!t);
false

ブール値の先頭にエクスクラメーションマーク(ビックリマーク)を付けることで、ブール値を否定できます。

サンプルでは、!tでtrueが否定され、falseが返されます。

「または」の論理演算子を使おう!

let t = true;
let f = false;

console.log(t || f);
true

AかつBの条件を追加するには、ブール値を2つのバーティカルバー(||)で結びます。

t || f

この式は、どちらかがtrueであればtrueを返し、どちらもtrueでなければfalseを返します。

サンプルでは、tがtrueなので、fがfalseでもtrueが返されます。

if文で演算子を使うには?

if(x >= y) {
    console.log('xはy以上です');
}

if文の条件は、比較演算子で指定することが多いです。

サンプルでは、比較演算子>=の結果をif文の条件に使用しています。

if(x >= y && x <= z) {
    console.log('xはy以上z以下です');
}

比較演算子と論理演算子を組み合わせて使用することもできます。

サンプルでは、xがy以上である条件と、xがy以下である条件を、「かつ」条件で結び、y以上z以下であるという条件を指定しています。

セレクタで演算子を使うには?

セレクタ内で演算子を使うことはできませんが、属性セレクタに似たような表現があります。

以下の記事の「属性セレクタの一覧」を参照してください。

$('.prev + .next')

演算子ではありませんが、セレクタをプラスで結んだ場合、次にある兄弟要素を選択する隣接セレクタとして動作します。

サンプルでは、.prevの次にある.nextを選択します。

まとめ

  • 算術演算子は、数学的な計算を行う演算子です。
  • 代入演算子は、左辺に右辺を代入する演算子で、算術演算子と組み合わせた複合代入演算子も使用できます。
  • 比較演算子とは、2つのものを比較する演算子です。
  • 論理演算子とは、ブール値に条件を追加する演算子です。
  • if文の条件は、比較演算子や論理演算子を組み合わせて記述します。
  • セレクタでは演算子は使用できませんが、似たような記法に属性セレクタ、隣接セレクタがあります。

入門カテゴリの最新記事