導入
フロントエンド開発において、数値の計算は避けては通れない基本操作です。商品の合計金額を算出したり、UIのアニメーションで座標を制御したり、あるいはプログレスバーの進捗率を計算したりと、その用途は多岐にわたります。算術演算子を正しく理解し使いこなすことは、バグの少ない堅牢なコードを書くための第一歩です。この記事では、JavaScriptにおける基本的な計算方法を整理し、現場で役立つポイントを解説します。
基礎知識
JavaScriptには、数値計算を行うための「算術演算子」が定義されています。これらは数学的な計算をプログラム上で表現するための記号です。
主な算術演算子
・+（加算）：数値を足します。文字列と組み合わせると「連結」にも使われます。
・-（減算）：数値を引きます。
・（乗算）：数値を掛けます。
・/（除算）：数値を割ります。
・%（剰余）：割り算の「余り」を求めます。
・（べき乗）：累乗を計算します。
実装/解決策
算術演算子を使う際、特に注意が必要なのが「優先順位」と「データ型」です。数学のルールと同様に、掛け算や割り算は足し算・引き算よりも先に処理されます。また、数値以外の型が混ざると予期せぬ結果（暗黙的な型変換）を招くことがあります。計算を行う前には、必要に応じてNumber()関数などを使用して、明示的に数値型へ変換する癖をつけることが重要です。
サンプルプログラム
以下のコードは、ECサイトのカート計算を想定した簡単な実装例です。
// 商品の価格設定
const itemPrice = 1200;
const taxRate = 0.1; // 10%
const shippingFee = 500;
// 1. 基本的な計算（掛け算と足し算）
const priceWithTax = itemPrice (1 + taxRate);
// 2. 合計金額の算出
const total = priceWithTax + shippingFee;
// 3. 剰余演算子（%）を使った偶数・奇数の判定
const quantity = 5;
const isOdd = quantity % 2 !== 0;
// コンソールで結果を確認
console.log("税込価格: " + priceWithTax + "円"); // 1320円
console.log("合計金額: " + total + "円"); // 1820円
console.log("個数は奇数か？: " + isOdd); // true
// 4. べき乗演算子（）の例：2の10乗を計算
const powerValue = 2 10;
console.log("2の10乗: " + powerValue); // 1024
応用・注意点
現場でよくある失敗として「浮動小数点数の計算誤差」が挙げられます。例えば、JavaScriptで 0.1 + 0.2 を計算すると 0.30000000000000004 となり、正確な 0.3 になりません。これはコンピュータが数値を二進数で扱うための仕様です。
回避策：
金額計算を行う場合は、小数を直接扱わず「円」ではなく「銭」の単位で整数として計算する、あるいは小数を扱うライブラリ（Big.jsなど）を検討することをお勧めします。また、計算結果をUIに表示する際は、toFixed()メソッドを使って小数点以下の桁数を適切に丸める処理を忘れないようにしましょう。