MENU

【初心者向け】JavaScriptの演算子まとめ|算術・比較・論理をわかりやすく解説【ITTI】

目次

演算子とは?

JavaScriptの演算子(operator)とは、値や変数に対して計算や比較などの処理を行うための記号です。

寸劇

ユーザー「A付箋の内容は4とB付箋の内容は3を用意して、AとBを足して..できた!実行したろ!」

JavaScript「えーと、おい、演算子の出番だ!」

演算子「あー、足すってことは、算術演算子っすね、答え7はっすね!」今のか演算子。

実行結果

7

 

初心者がまず覚えるべきは「算術演算子」「比較演算子」「論理演算子」の3種類です。

算術演算子


数値の計算に使います。

let a = 10;
let b = 3;


console.log(a + b);
実行結果
13

10足す3は13なので実行結果は13。

let a = 10;
let b = 3;

console.log(a - b);
実行結果
7

10引く3は7なので実行結果は7。

let a = 10;
let b = 3;

console.log(a * b);
実行結果
30

10×3は30なので実行結果は30。

let a = 10;
let b = 3;

console.log(a / b);
実行結果
3.333...

10割る3は3.333…なので実行結果は3.333…。

let a = 10;
let b = 3;


console.log(a % b);
実行結果
1


剰余演算子(%)は「a を b で割ったときの 余り」を返します。

つまり、10と3で割って余りは1なので、実行結果は1。

比較演算子


2つの値を比べて、true/falseを返します。

let age = 18;


console.log(age >= 20);
実行結果
false

「age が 20以上か?」

18 は 20 以上ではないので実行結果は、false

let age = 18;


console.log(age === 18);
実行結果
true

「age と 18 が厳密に等しいか?」

値も型も同じ(数値の18)なので実行結果は、true

論理演算子

条件を組み合わせるときに使います。

&&を使用


let isAdult = true;      // 大人かどうか → true
let hasLicense = false;  // 免許を持っているか → false

console.log(isAdult && hasLicense);
実行結果: false

理由: 大人だけど免許がないので false

||を使用


let isAdult = true;       大人かどうか大人なのでtrue
let hasLicense = false;     免許を持っているか持ってないのでfalse


console.log(isAdult || hasLicense);
実行結果: true

理由: 免許がなくても大人ならOKよってtrue

!を使用。

()
let isAdult = false; →大人ではない

if (!isAdult) {
  console.log("未成年です");
}

実行結果: 未成年です

理由: 大人ではないので未成年です

おまけ

「代入演算子」「三項演算子」「インクリメント/デクリメント」もあるので、この3つを覚えておくと便利です。簡単に紹介します。

代入演算子(= と 複合代入)


右辺の値を左辺の変数に代入します。

let x = 5;x  5 を代入


x = x + 3;

実行結果
8


複合代入を使うと短く書けます。

let y = 5;

y += 3;   →  y = y + 3 と同じ8
y -= 2;   →  y = y - 2 と同じ6
y *= 2;   →  y = y * 2 と同じ12
y /= 3;   →  y = y / 3 と同じ4

パッとみるとわかりにくいと思うかもしれないけど、下にみるとすぐにわかると思います。

let y = 5;   // y = 5

y += 3;  →  y = 5 + 38
y -= 2;  →  y = 8 - 26
y *= 2;  →  y = 6 * 212
y /= 3;  →  y = 12 / 34

三項演算子(条件 ? 値1 : 値2)


if文を1行で書ける便利な演算子です。

let age = 18;
let message = (age >= 20) ? "成人です" : "未成年です";
console.log(message);


実行結果
自分が18なので20を超えれないよって未成年です

パッとみるとわかりにくいかもしれません。下にみるとなんとかくわかるでしょう。

let score = 72;
let result = (score >= 60) ? "合格" : "不合格";
console.log(result);


実行結果
72は60以上なので合格になります

インクリメント / デクリメント(++ / –)


変数の値を1増やす・1減らす演算子です。

let a = 5;

a++;   a = a + 1 と同じ6
a--;   a = a - 1 と同じ5


前置と後置の違い

let b = 5;
console.log(++b);  6前置増やしてから使う
console.log(b++);  6後置使ってから増やすbは7になる

要するに、
++ は 1増える

— は 1減る

まとめ

•  算術演算子:計算に使う

•  比較演算子:値を比べる

•  論理演算子:条件を組み合わせる

•  代入演算子:変数に値を入れる(=, +=, -= など)

•  三項演算子:if文を1行で書ける(条件 ? 値1 : 値2)

•  インクリメント/デクリメント:変数を1増減させる(++, –)

ぱちっぱちっ〜ぱちっぱちっ〜、優秀な人はこれを使いますひろゆきさんからです。

AIひろゆきから

「まぁ、演算子って、知らなくても if 文とかで全部書けるんですよ。  

でも優秀な人って、わざわざ長ったらしく書かないで、三項演算子とか代入演算子をサッと使うんですよね。

例えば x = x + 1 って書くより x++ の方が短いし、読みやすいじゃないですか。  

if (条件) { a = b } else { a = c } って書くより、a = 条件 ? b : c の方が一行で済む。

で、こういう小さい積み重ねが、コード全体の見やすさとか保守性に効いてくるんですよ。  

だから “優秀な人は自然に演算子を使いこなしてる” って話なんです。  

知らないと損するけど、知ってると『あ、この人ちゃんと書けるな』って思われるんですよね。」

ITTI

「読者さん方へ、演算子マスターになれるようにがんばってください!応援してますよ!」

AIひろゆき

「ITTIさんもですよ」

ITTI

「あっはい」

最後まで読んで頂きありがとうございました!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フロントエンドを基礎から学びつつ、UXデザインで“わかりやすさ”を形にしています。

コメント

コメントする

目次