四則演算｜コードで実践 - チョットデキル

このレッスンで分かること

JavaScript の四則演算は + - * /、加えて余り % とべき乗 **

演算子の優先度は ** > * / % > + -、迷ったら () で囲む

最小例は function taxIncluded(price, taxRate) { return price * (1 + taxRate); }

四則演算とは

プラス・マイナス・かけ算・わり算を組み合わせて、消費税込みの合計を計算しよう。本レッスンでは、四則演算の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

JavaScript で計算する

プログラミングの基礎中の基礎が「計算」です。JavaScript には算数で習う四則演算がすべて揃っていて、+ 足し算、- 引き算、* かけ算、/ わり算、というおなじみの記号で書けます。学校の数式と違うのは、× ÷ の記号ではなくアスタリスク * とスラッシュ / を使う点だけです。

JavaScript

console.log(1 + 2);    // => 3
console.log(10 - 4);   // => 6
console.log(3 * 5);    // => 15
console.log(20 / 4);   // => 5

どれも結果はそのまま画面に出ます。これだけだと電卓と同じですが、変数と組み合わせると一気にプログラムらしくなります。

JavaScript

const price = 1000;
const tax = 0.1;
const total = price * (1 + tax);
console.log(total);
// => 1100

price に税率 0.1 を加えた 1.1 をかけることで、税込み価格 1100 円を求めています。(1 + tax) のように、カッコでくくると先に計算されるルールも算数と同じです。

数式を書くときは「読みやすさ」を意識しましょう。price * 1.1 でも動きますが、price * (1 + tax) のほうが「何をしているか」が一目でわかります。

演算子の優先順位

四則演算には優先順位があります。* と / が + と - より先、というのは算数で習った通りです。JavaScript も同じルールで動きます。

JavaScript

console.log(2 + 3 * 4);     // => 14 (12 ではない)
console.log((2 + 3) * 4);   // => 20
console.log(10 - 4 / 2);    // => 8 (3 ではない)

優先順位を表にすると次のとおりです。上にあるほど先に評価されます。

優先度	演算子	例	結果
高	`**` (べき乗)	`2 ** 3 + 1`	`9`
中	`*` `/` `%` (乗除)	`2 + 3 * 4`	`14`
低	`+` `-` (加減)	`10 - 4 + 1`	`7`
最強	`()` (括弧)	`(2 + 3) * 4`	`20`

優先順位を変えたいときはカッコ () を使います。「迷ったらカッコ」と覚えておけば、思わぬ計算ミスを防げます。

ベテランのエンジニアでも、優先順位が複雑になりそうなときは積極的にカッコを書きます。「自分で書いたコードを 3 ヶ月後の自分が読む」と思って、親切すぎるくらいでちょうどいいです。

計算の流れを図で見る

税込み価格を求める計算を、ステップごとに分解してみましょう。

diagram (will load when visible)

評価の順序を箇条書きで言い換えると、次のとおりです。

カッコの中 (1 + tax) を最初に計算 → 1.1
price * 1.1 を次に計算 → 1100
最終結果 1100 を total に代入

JavaScript のエンジンも内部でこれと同じ手順を踏んでいます。

余り算と特殊な値

四則演算と一緒によく使うのが「割った余り」を求める % 演算子です。10 % 3 は 1、12 % 4 は 0 のように、わり算の余りを返します。

JavaScript

console.log(10 % 3);   // => 1
console.log(12 % 4);   // => 0
console.log(7 % 2);    // => 1 (奇数なら 1、偶数なら 0)

さらに ES2016 で追加された ** (べき乗) もあります。2 ** 3 は 8 です。

JavaScript

console.log(2 ** 3);   // => 8
console.log(10 ** 2);  // => 100

0 で割ると Infinity という特殊な値が、0 / 0 だと NaN (Not a Number) が返ります。エラーで止まらないので、意図しない結果を生まないよう注意が必要です。

よくある間違い

計算系のコードでよくある落とし穴を 3 つ紹介します。

文字列と数値を混ぜる — "100" + 50 は "10050" という文字列になります。HTML の入力フィールドから取れる値は文字列なので、Number("100") のように明示的に変換するクセを付けましょう
小数の誤差 — 0.1 + 0.2 は 0.3 ではなく 0.30000000000000004 になります。JavaScript の数値は内部的に IEEE 754 浮動小数なので、お金の計算には特に注意が必要です
優先順位の勘違い — 1 + 2 * 3 を 9 だと思って書くと 7 が返ってきて混乱します。「* / が先」を忘れずに、迷ったらカッコをつけましょう

「動いた」と「正しい」は別です。テストで 0.30000000000000004 のような結果が返ったら、それは小数の誤差を踏んでいるサインかもしれません。

この章のポイント

ここまでの要点 四則演算は + - * /、余りは %、べき乗は **。優先度は ** > * / % > + -。0 除算は Infinity、0/0 は NaN。文字列が混ざると + は連結に変わる。

やってみよう

それでは課題に挑戦しましょう。手順は次のとおりです。

関数 taxIncluded(price, taxRate) を定義する
price * (1 + taxRate) を計算する
結果をそのまま return する
taxIncluded(1000, 0.1) が 1100、taxIncluded(500, 0.08) が 540 を返すか確認

テストは厳密に値を比較するので、小数の誤差が出ないように、まずは整数のかけ算が中心になる組み合わせをそろえています。

慣れてきたら、taxIncluded(2980, 0.1) で 3278 のような端数のあるケースを自分で試してみてください。Math.round を使って整数に丸める応用も第 3 章で扱います。まずは基本の + - * / で四則演算に慣れていきましょう。

よくある質問

Q. 整数同士の割り算で小数を得るには？

A. Python は / で自動的に小数になります（5 / 2 → 2.5）。Java や C 系は両方を整数にすると切り捨てられるため、5.0 / 2 のように片方を浮動小数にするか (double)a / b でキャストしてください。整数の商だけ欲しいなら // や / と (int) の組み合わせを使います。

Q. 剰余 % は負の数だとどうなりますか？

A. Python は被除数の符号にかかわらず除数の符号に合わせるため、-7 % 3 は 2 になります。C 系や Java は -7 % 3 が -1 になります。負の数を扱う剰余演算（曜日計算など）は ((a % n) + n) % n のように補正するのが安全です。

Q. 演算子の優先順位はどう確認できますか？

A. * と / は + と - より優先されますが、悩んだら明示的にカッコを付けるのが事故防止に役立ちます。a + b * c と (a + b) * c の違いは典型的なバグの種です。レビュアーがすぐ意図を読み取れるよう、わずかに冗長でもカッコで囲むコーディングが好まれます。

次のレッスン

次は コメントで意図を残す で、プラス・マイナス・かけ算・わり算を組み合わせて、消費税込みの合計を計算しようを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

四則演算の要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. 四則演算とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

四則演算

JavaScript で計算する

演算子の優先順位

計算の流れを図で見る

余り算と特殊な値

よくある間違い

やってみよう

よくある質問

Q. 整数同士の割り算で小数を得るには？

Q. 剰余 % は負の数だとどうなりますか？

Q. 演算子の優先順位はどう確認できますか？

次のレッスン

要件

入出力例

ヒント

メモ