みなさん、こんにちは！日夜、Web開発の現場でコードと格闘しているチーフアーキテクトの「おやっさん」です。
「JavaScriptを学び始めたけれど、計算が出てきた途端に頭が痛くなってきた…」
「数学なんて、学生時代以来ずっと避けてきたのに！」
そんな風に思っていませんか？
大丈夫、その気持ち、ものすごくよく分かります。私も昔は、画面に複雑な数式が出てくるだけで「うわっ」とブラウザを閉じそうになっていました。
でも、安心してください。JavaScriptに用意されている「Math（マス）オブジェクト」は、決してあなたを苦しめる難しい数学の定理ではありません。どちらかというと、「引き出しの中にきれいに整理された、超便利な文房具たち」のようなものです。
定規やハサミ、のりを使うように、「この道具はこういう時に使うんだな」というイメージさえ持っておけば、誰でも今すぐ使いこなすことができますよ。
今回は、数ある道具の中から、実務の現場でも特によく使う「6つの基本関数」を、身近な例え話を交えてどこよりも優しく解説します。ゆっくり、お茶でも飲みながら一緒に見ていきましょう！
—
そもそも「Mathオブジェクト」ってなに？
JavaScriptには、最初から「Math」という名前の便利な電卓が用意されています。
私たちは、この電卓に向かって「ねえ、この数字をいい感じにして！」とお願いするだけでいいのです。自分で難しい計算式を組み立てる必要は一切ありません。
今回は、この電卓が得意とする「2つのグループ（合計6つの道具）」をご紹介します。
—
グループ1：数字の「向き（プラス・マイナス）」を整える道具
まずは、数字がプラスなのかマイナスなのかを整理してくれる、頼もしい2つの道具です。
① Math.abs（絶対値）
- イメージ：車の走行メーター（バックしても距離は増える！）
`abs` は「Absolute（アブソリュート = 絶対的な）」の略です。
難しく聞こえますが、要するに「マイナス（ー）の符号を無理やり消し去って、純粋な『距離』や『大きさ』にする道具」です。
例えば、車を前に10メートル進めても、バックで10メートル戻っても、移動した「距離」はどちらも同じ10メートルですよね。この「方向を無視した純粋な量」を求めてくれます。
// — Math.abs の実験室 —
const stepForward = 10; // 前に10歩
const stepBackward = -10; // 後ろに10歩（マイナス）
console.log(Math.abs(stepForward)); // 結果: 10
console.log(Math.abs(stepBackward)); // 結果: 10 （マイナスが消えてプラスになりました！）
- どんな時に使う？：
「AさんとBさんの身長差」を計算するときなど、引き算の結果がマイナスになっても、純粋な「差（プラスの数値）」として画面に表示したいときに大活躍します。
—
② Math.sign（符号の判定）
- イメージ：信号機（プラスなら青、マイナスなら赤、ゼロなら黄）
`sign`（サイン）は、渡された数字が「プラス（正の数）」なのか「マイナス（負の数）」なのか、あるいは「ゼロ」なのかをジャッジしてくれる審判のような道具です。
結果は、以下の3つの数字で教えてくれます。
- プラスの数なら： `1`
- マイナスの数なら： `-1`
- ゼロなら： `0`（または `-0`）
// — Math.sign の実験室 —
console.log(Math.sign(150)); // 結果: 1 （プラスの数字なので「1」）
console.log(Math.sign(-45)); // 結果: -1 （マイナスの数字なので「-1」）
console.log(Math.sign(0)); // 結果: 0 （ゼロはゼロです）
- どんな時に使う？：
ゲーム開発で「キャラクターが右に動いている（プラス）か、左に動いている（マイナス）か」でアニメーションを切り替えたいときなどに便利です。
—
グループ2：端数（小数点）をスッキリ整理する道具
さて、ここからが本番です！Web制作でお買い物カートの消費税計算や、割引率の計算をするときに必ず必要になる「端数（小数点以下）の処理」を行う4つの道具です。
まずは全体像を、親しみやすい言葉でまとめてみました。
| 道具の名前 | やってくれること | 直感的なイメージ |
| :— | :— | :— |
| `Math.ceil` | 切り上げ | 天井（Ceiling）に向かって、上の整数にジャンプ！ |
| `Math.floor` | 切り捨て | 床（Floor）に向かって、下の整数にずり落ちる。 |
| `Math.round` | 四捨五入 | 近い方の整数に引き寄せられる、人懐っこい丸め処理。 |
| `Math.trunc` | 整数部分だけ取り出す | 小数点以下をスパッとハサミで切り落とす（Truncate）。 |
一つずつ、詳しく見ていきましょう。
—
③ Math.ceil（切り上げ）
- イメージ：エレベーターで「上の階」へ！
`ceil`（セイル）は「天井（Ceiling）」という意味です。
少しでも小数点以下に端数があれば、「見上げて、一番近い上の整数」に引き上げてくれます。
例えば、`1.1` 人必要な作業があるとしたら、実際には `2` 人必要になりますよね。そんな「ちょっとでも超えたら次の数字にする」という場面で使います。
// — Math.ceil の実験室 —
console.log(Math.ceil(4.1)); // 結果: 5 （4を少しでも超えたので、天井の「5」へ！）
console.log(Math.ceil(4.9)); // 結果: 5 （もちろん「5」へ！）
—
④ Math.floor（切り捨て）
- イメージ：重力で「下の床（地面）」へドスン！
`floor`（フロア）は「床」という意味です。
どれだけ小数点以下が大きかろうが、容赦なく「床に向かって、一番近い下の整数」に引きずり下ろします。
例えば、お買い物で「1.9個分の予算」があっても、実際に買えるのは `1` 個だけですよね。そういった「満たない分は切り捨てる」という場面の味方です。
// — Math.floor の実験室 —
console.log(Math.floor(4.9)); // 結果: 4 （どんだけ5に近くても、床の「4」へ落とされます）
console.log(Math.floor(4.1)); // 結果: 4 （当然「4」です）
—
⑤ Math.round（四捨五入）
- イメージ：近い方に引き寄せられる、人懐っこい丸め処理
`round`（ラウンド）は、私たちが小学校で習った「四捨五入」とほぼ同じです。
小数点第一位が `5` 以上（`.5`, `.6`…）なら「上」へ、`5` 未満（`.4`, `.3`…）なら「下」へ、近い方の整数に自動的に着地してくれます。
// — Math.round の実験室 —
console.log(Math.round(4.4)); // 結果: 4 （4に近いので「4」）
console.log(Math.round(4.5)); // 結果: 5 （ちょうど真ん中からは「5」へ昇格！）
console.log(Math.round(4.6)); // 結果: 5 （5に近いので「5」）
—
⑥ Math.trunc（整数部分の取り出し）
- イメージ：小数点以下をハサミで「チョキッ！」と切り落とす
`trunc`（トランク）は「Truncate（切り詰める）」の略です。
これは一番シンプル。難しいことは考えず、「小数点以下をただハサミで切り捨てて、整数の部分だけをそのまま残す」という道具です。
「あれ？それって `Math.floor`（切り捨て）と同じじゃないの？」と思ったあなた、素晴らしい着眼点です！
実は、プラスの数字を扱っているときは、この2つは全く同じ動きをします。
しかし……「マイナスの数字」が入ってきたときに、ドラマが起こるのです。
—
⚠️ 初学者が一番つまずくポイント：マイナスの世界での挙動
ここが、多くの初心者の方が「あれ！？思った通りの数字にならない！」と頭を抱えるポイントです。でも、大丈夫。ゆっくり図をイメージすれば、すんなり理解できますよ。
例えば、`-1.5` という数字を、`Math.floor`（床）と `Math.trunc`（切り落とし）に渡してみましょう。
- `Math.trunc(-1.5)` の場合：
小数点以下をハサミで切り落とすだけなので、結果は `-1` になります。
- `Math.floor(-1.5)` の場合：
「床（より小さい値）」に向かって数字が落ちます。
数直線（温度計のようなもの）を思い出してください。`-1` と `-2` では、どちらが「下（小さい）」でしょうか？
そう、`-2` の方が低い（小さい）ですよね。
そのため、床に向かって落ちた結果、なんと `-2` になるのです！
// — マイナスの世界での違いを検証！ —
const negativeNumber = -1.5;
// ① ハサミでチョキッと切り落とす trunc
console.log(Math.trunc(negativeNumber)); // 結果: -1
// ② より低い「床」へと引きずり下ろす floor
console.log(Math.floor(negativeNumber)); // 結果: -2 （より小さい値になりました！）
どうでしょう？
「床（floor）は、マイナスの世界だと、よりマイナスが深い方（下の階）に落ちるんだな」とイメージすると、すんなり納得がいきませんか？
—
🛠️ 実践編：お買い物サイトの割引計算で使ってみよう！
それでは、学んだ道具たちを実際のWeb開発でどう使うのか、簡単な「お買い物キャンペーンの割引計算」のコードで試してみましょう。
以下のコードは、そのままコピーしてブラウザの「デベロッパーツール（コンソール）」に貼り付ければ動かすことができます。ぜひ試してみてくださいね。
// 【実践】お買い物カートの割引・税込み計算
// 1. 商品の元の値段（税抜き）
const originalPrice = 1980;
// 2. 割引率（35%オフにしてみましょう）
const discountRate = 0.35;
// 3. 割引額を計算します
// 1980 0.35 = 693円
const discountAmount = originalPrice discountRate;
// 4. 割引後の価格（税抜き）を計算
const activePrice = originalPrice – discountAmount;
console.log(“割引後の生の価格:”, activePrice); // 1287円
// 5. ここに消費税（10%）をかけます
// 1287 1.1 = 1415.7円（ここで端数が出ました！）
const priceWithTaxRaw = activePrice 1.1;
console.log(“税込みの生の価格（端数あり）:”, priceWithTaxRaw); // 1415.7円
// — ここで Math オブジェクトの出番です！ —
// パターンA: お客さまに優しく、1円未満は「切り捨て（floor）」にする場合
const finalPriceFloor = Math.floor(priceWithTaxRaw);
console.log(“【切り捨て】お支払金額は:”, finalPriceFloor, “円です。”); // 結果: 1415円
// パターンB: お店の利益を優先して、1円未満は「切り上げ（ceil）」にする場合
const finalPriceCeil = Math.ceil(priceWithTaxRaw);
console.log(“【切り上げ】お支払金額は:”, finalPriceCeil, “円です。”); // 結果: 1416円
// パターンC: 一般的な「四捨五入（round）」にする場合
const finalPriceRound = Math.round(priceWithTaxRaw);
console.log(“【四捨五入】お支払金額は:”, finalPriceRound, “円です。”); // 結果: 1416円 (1415.7の「.7」が切り上がったため)
実務の現場でも、このように「どの丸め方法（切り捨て、切り上げ、四捨五入）をお客さまのビジネスルールに適用するか」を話し合って、これらの道具を使い分けているんですよ。
—
まとめ：焦らなくて大丈夫。道具はいつでも手元にあります
最後に、今回登場した道具たちをもう一度おさらいしておきましょう。
1. `Math.abs`：マイナスを消して、純粋な「距離」にする。
2. `Math.sign`：プラスかマイナスかゼロかを教えてくれる信号機。
3. `Math.ceil`：天井を見上げて、上の整数に引き上げる（切り上げ）。
4. `Math.floor`：床を見下ろして、下の整数に引き下げる（切り捨て）。
5. `Math.round`：近い方の整数に引き寄せる（四捨五入）。
6. `Math.trunc`：小数点以下をただハサミで切り落とす（整数抽出）。
すべてを一度に暗記する必要はまったくありません！
「あれ、端数を切り捨てたいとき、どの道具を使うんだっけ？」と思ったら、いつでもこの記事に戻ってきたり、検索したりすればいいのです。
プロのエンジニアだって、毎日調べながらコードを書いています。一歩ずつ、あなたのペースでJavaScriptと仲良くなっていきましょうね。
あなたのフロントエンド開発への第一歩を、心から応援しています！
コメント