JavaScript切り捨て処理 - Math.floorの使い方を基礎から解説

みなさん、JavaScriptで数値を扱う時に困ったことはありませんか？

「計算結果の小数点以下を切り捨てたいけど、どうやるの？」「Math.floorって見かけるけど、どう使うの？」

こんな疑問を持っている初心者の方、きっと多いですよね。 実は、JavaScriptには小数点以下を切り捨てる便利なメソッドがあるんです。

この記事では、JavaScriptのMath.floorメソッドについて初心者向けに詳しく解説します。 基本的な切り捨て処理から実践的な使用例まで、一緒に学んでいきましょう！

Math.floorって何？まずは基本を知ろう

Math.floorの正体

Math.floorは、小数点以下を切り捨てて整数にするJavaScriptの組み込みメソッドです。

簡単に言うと、「小数点以下を全部取り除いて、整数だけを残す」処理なんです。 例えば、3.7は3に、5.9は5になります。

ちょっと不思議に感じるかもしれませんね。 でも大丈夫です！これから詳しく見ていきましょう。

最初の例を見てみよう

まずは、シンプルな例から始めましょう。

console.log(Math.floor(3.7));   // 3
console.log(Math.floor(3.1));   // 3
console.log(Math.floor(5.9));   // 5

どの数値も、小数点以下が切り捨てられて整数になっていますね。 3.7も3.1も、どちらも3になります。

これがMath.floorの基本的な動作です。 小数点以下の値に関係なく、常に整数部分だけを残すんです。

正の数と負の数で動作が違う？

正の数は分かりやすい

正の数の場合、とても直感的な動作をします。

console.log(Math.floor(5.1));   // 5
console.log(Math.floor(5.5));   // 5
console.log(Math.floor(10.0));  // 10
console.log(Math.floor(0.7));   // 0

正の数では、予想した通りの結果になります。 小数点以下の部分は何であっても、整数部分だけが残るんです。

負の数は要注意！

負の数の場合、少し注意が必要です。

console.log(Math.floor(-2.1));  // -3
console.log(Math.floor(-2.5));  // -3
console.log(Math.floor(-0.1));  // -1

あれ？-2.1が-3になっていますね。 これがMath.floorの特徴なんです。

負の数では「より小さい整数」に切り捨てられます。 数直線で考えると、常に左側（小さい方）の整数に向かって切り捨てられるんです。

視覚的に理解してみよう

数直線で考えてみましょう。

// 数直線: ... -3 --- -2 --- -1 --- 0 --- 1 --- 2 --- 3 ...

console.log(Math.floor(2.7));   // 2（左側の整数）
console.log(Math.floor(-2.7));  // -3（左側の整数）

常に「左側の整数」に向かって切り捨てられる、と覚えておきましょう。

他の丸め処理と比べてみよう

Math.ceil（切り上げ）との違い

Math.ceilは小数点以下を切り上げます。

console.log(Math.ceil(3.1));    // 4
console.log(Math.ceil(3.9));    // 4
console.log(Math.ceil(-2.1));   // -2

Math.floorとは真逆の動作をするんです。 小数点以下があると、必ず大きい方の整数になります。

Math.round（四捨五入）との違い

Math.roundは小数点以下を四捨五入します。

console.log(Math.round(3.4));   // 3
console.log(Math.round(3.6));   // 4
console.log(Math.round(-2.4));  // -2

0.5を境に、大きい方か小さい方かが決まります。 一般的な四捨五入のルールですね。

Math.trunc（小数部切り捨て）との違い

Math.truncは小数部分を単純に削除します。

console.log(Math.trunc(3.7));   // 3
console.log(Math.trunc(-2.7));  // -2（符号は保持）

負の数の場合、Math.floorとは結果が異なります。 Math.truncは符号を保ったまま、小数部分だけを削除するんです。

実際の場面で使ってみよう

価格計算での活用

商品価格の計算でMath.floorを使う例です。

function calculateDiscountPrice(originalPrice, discountRate) {
    let discountedPrice = originalPrice * (1 - discountRate);
    return Math.floor(discountedPrice); // 1円未満切り捨て
}

// 使ってみましょう
console.log(calculateDiscountPrice(1299, 0.15)); // 1104
console.log(calculateDiscountPrice(999, 0.33));  // 669

この関数では、割引後の価格を1円未満で切り捨てています。 実際のお店での価格計算でよく使われる処理ですね。

お客さんにとっても分かりやすく、実用的な計算方法です。

ページネーションの計算

ページ数を計算する際にも便利です。

function calculatePageCount(totalItems, itemsPerPage) {
    return Math.floor(totalItems / itemsPerPage);
}

function calculateCurrentPage(index, itemsPerPage) {
    return Math.floor(index / itemsPerPage) + 1;
}

// 使ってみましょう
console.log(calculatePageCount(47, 10));      // 4ページ
console.log(calculateCurrentPage(23, 10));    // 3ページ目

47個のアイテムを10個ずつ表示する場合、4ページまで表示できます。 インデックス23のアイテムは、3ページ目に表示されることが分かりますね。

時間計算での応用

時間の計算にも活用できます。

function formatDuration(seconds) {
    let hours = Math.floor(seconds / 3600);
    let minutes = Math.floor((seconds % 3600) / 60);
    let remainingSeconds = seconds % 60;
    
    return `${hours}時間${minutes}分${remainingSeconds}秒`;
}

// 使ってみましょう
console.log(formatDuration(3725)); // "1時間2分5秒"
console.log(formatDuration(150));  // "0時間2分30秒"

秒数を時間、分、秒に分解する処理です。 Math.floorを使うことで、正確な時間計算ができます。

小数点以下の指定桁数で切り捨てよう

指定桁数での切り捨て方法

小数点以下の特定の桁で切り捨てることもできます。

function floorToDecimal(number, decimalPlaces) {
    let multiplier = Math.pow(10, decimalPlaces);
    return Math.floor(number * multiplier) / multiplier;
}

// 使ってみましょう
console.log(floorToDecimal(3.14159, 2));  // 3.14
console.log(floorToDecimal(3.14159, 3));  // 3.141
console.log(floorToDecimal(2.99999, 1));  // 2.9

この関数では、指定した桁数で切り捨てを行います。 10倍、100倍して切り捨て、その後元に戻すという仕組みです。

ちょっと複雑に見えますが、実はとてもよく使われるテクニックなんです。

より安全な関数を作ろう

エラーハンドリングを含む実用的な関数です。

function safeFloorToDecimal(number, decimalPlaces = 0) {
    // 入力値をチェック
    if (typeof number !== 'number' || isNaN(number)) {
        throw new Error('有効な数値を入力してください');
    }
    
    if (typeof decimalPlaces !== 'number' || decimalPlaces < 0) {
        throw new Error('小数点以下の桁数は0以上である必要があります');
    }
    
    // 計算実行
    let multiplier = Math.pow(10, Math.floor(decimalPlaces));
    return Math.floor(number * multiplier) / multiplier;
}

// 使ってみましょう
try {
    console.log(safeFloorToDecimal(3.14159, 2));   // 3.14
    console.log(safeFloorToDecimal(-2.789, 1));    // -2.8
} catch (error) {
    console.log(error.message);
}

この関数では、無効な値が渡された場合にエラーを投げます。 実際のプロジェクトでは、このような安全な関数を作ることが大切です。

配列やオブジェクトでも使ってみよう

配列の全ての要素に適用

配列の全ての要素にMath.floorを適用してみましょう。

let prices = [1299.99, 899.50, 2499.95, 599.00];

// map()を使って全ての価格を切り捨て
let flooredPrices = prices.map(price => Math.floor(price));
console.log(flooredPrices); // [1299, 899, 2499, 599]

map()を使うことで、配列の全ての要素を一度に処理できます。 とても便利で効率的な方法ですね。

より複雑な処理も可能です。

let products = [
    { name: "商品A", price: 1299.99 },
    { name: "商品B", price: 899.50 },
    { name: "商品C", price: 2499.95 }
];

let processedProducts = products.map(product => ({
    name: product.name,
    price: Math.floor(product.price),
    originalPrice: product.price
}));

console.log(processedProducts);

元の価格も残しつつ、切り捨て後の価格を追加しています。

オブジェクトの数値プロパティ処理

オブジェクト内の数値プロパティだけを処理する方法です。

function floorNumericProperties(obj) {
    let result = {};
    
    for (let key in obj) {
        if (typeof obj[key] === 'number') {
            result[key] = Math.floor(obj[key]);
        } else {
            result[key] = obj[key];
        }
    }
    
    return result;
}

// 使ってみましょう
let data = {
    name: "テストデータ",
    score: 85.7,
    percentage: 67.89,
    count: 42,
    rate: 3.14159
};

let flooredData = floorNumericProperties(data);
console.log(flooredData);

この関数では、数値型のプロパティだけを切り捨て、文字列などはそのまま残します。 データの一括処理に便利ですね。

エラーを避ける注意点

無効な値を渡した場合

Math.floorに無効な値を渡すとどうなるでしょうか？

console.log(Math.floor("123.45"));    // 123（文字列が数値に変換）
console.log(Math.floor("abc"));       // NaN
console.log(Math.floor(undefined));   // NaN
console.log(Math.floor(null));        // 0

予想外の結果になることがあります。 実際のプログラムでは、事前にチェックが必要ですね。

安全な切り捨て関数

エラーハンドリングを含む安全な関数を作りましょう。

function safeFloor(value, defaultValue = 0) {
    // 数値でない場合の処理
    if (typeof value !== 'number') {
        let converted = Number(value);
        if (isNaN(converted)) {
            console.warn(`無効な値です: ${value}、デフォルト値を使用します`);
            return defaultValue;
        }
        value = converted;
    }
    
    // 無限大やNaNの場合の処理
    if (!isFinite(value)) {
        console.warn(`無限大またはNaNです: ${value}、デフォルト値を使用します`);
        return defaultValue;
    }
    
    return Math.floor(value);
}

// 使ってみましょう
console.log(safeFloor(3.7));      // 3
console.log(safeFloor("4.2"));    // 4
console.log(safeFloor("abc", 0)); // 0（警告付き）

この関数を使うことで、予期しない値が渡されても安全に処理できます。

実用的なユーティリティを作ろう

数値処理ライブラリ

Math.floorを含む便利な関数をまとめてみましょう。

const MathUtils = {
    // 基本的な切り捨て
    floor: function(number) {
        return Math.floor(number);
    },
    
    // 指定桁数での切り捨て
    floorToDecimal: function(number, decimalPlaces = 0) {
        let multiplier = Math.pow(10, decimalPlaces);
        return Math.floor(number * multiplier) / multiplier;
    },
    
    // 安全な切り捨て
    safeFloor: function(value, defaultValue = 0) {
        if (typeof value !== 'number' || !isFinite(value)) {
            return defaultValue;
        }
        return Math.floor(value);
    },
    
    // 配列の一括処理
    floorArray: function(numbers) {
        return numbers.map(num => this.safeFloor(num));
    }
};

// 使ってみましょう
console.log(MathUtils.floor(3.7));                    // 3
console.log(MathUtils.floorToDecimal(3.14159, 2));   // 3.14
console.log(MathUtils.floorArray([1.2, 2.8, 3.9])); // [1, 2, 3]

こんな風に関数をまとめておくと、プロジェクト全体で再利用できます。

実際のアプリケーション例

ゲームスコア計算

ゲームのスコア計算システムの例です。

class ScoreCalculator {
    constructor() {
        this.baseScore = 0;
        this.multiplier = 1.0;
    }
    
    addScore(points) {
        this.baseScore += points;
    }
    
    setMultiplier(multiplier) {
        this.multiplier = multiplier;
    }
    
    getFinalScore() {
        let rawScore = this.baseScore * this.multiplier;
        return Math.floor(rawScore); // 小数点以下切り捨て
    }
}

// 使ってみましょう
let calculator = new ScoreCalculator();
calculator.addScore(1000);
calculator.addScore(1500);
calculator.setMultiplier(1.5);

console.log(calculator.getFinalScore()); // 3750

ゲームでは、スコアを整数で表示することが多いです。 Math.floorを使うことで、きれいな整数スコアを計算できます。

在庫管理システム

在庫の計算での使用例です。

class InventoryManager {
    constructor() {
        this.items = new Map();
    }
    
    addItem(itemId, quantity) {
        let current = this.items.get(itemId) || 0;
        this.items.set(itemId, current + quantity);
    }
    
    getAvailableUnits(itemId, unitSize) {
        let total = this.items.get(itemId) || 0;
        return Math.floor(total / unitSize);
    }
}

// 使ってみましょう
let inventory = new InventoryManager();
inventory.addItem('wood', 1000);
console.log(inventory.getAvailableUnits('wood', 150)); // 6

1000個の木材から、150個単位でいくつ作れるかを計算しています。 結果は6単位となり、端数は切り捨てられます。

まとめ

JavaScriptのMath.floorメソッドは、数値の切り捨て処理において非常に重要なツールです。

重要なポイントをおさらいしましょう。

• Math.floorは小数点以下を切り捨てて整数にする
• 負の数では「より小さい整数」に切り捨てられる
• 価格計算やページネーションなど様々な場面で活用
• 指定桁数での切り捨ても工夫次第で実現可能
• エラーハンドリングを含む安全な関数の作成が重要

Math.floorを適切に使用することで、正確で信頼性の高い数値計算ができます。 特に、金額計算やデータ分析において、切り捨て処理は重要な役割を果たします。

実際のプロジェクトでは、安全性とパフォーマンスを考慮した実用的な関数を作成しましょう。 ぜひこれらの技術を活用して、より正確なJavaScriptアプリケーションを作成してみてくださいね！