JavaScriptの小数点切り捨て - 3つの方法を初心者向けに解説

みなさん、JavaScriptで数値を扱っていて「小数点以下を切り捨てたい」と思ったことはありませんか？

「割り算の結果から整数部分だけを取り出したい」「小数点以下は不要だから削除したい」

こんな場面に遭遇したことはありませんか？

この記事では、JavaScriptで小数点以下を切り捨てる3つの方法を初心者向けに分かりやすく解説します。それぞれの特徴や使い分け、負の数での動作の違いまで、完全なコード付きでお教えします。

一緒に小数点切り捨てをマスターしていきましょう！

小数点切り捨てって何？

簡単に言うと整数部分だけを取り出すこと

小数点の切り捨てとは、小数点以下の部分を削除して整数部分だけを残すことです。四捨五入とは違って、小数点以下はどんな値でも削除します。

// 切り捨ての基本的な考え方
console.log('元の数値 → 切り捨て後');
console.log('3.7 → 3');
console.log('5.1 → 5');
console.log('7.9 → 7');

// 重要：切り捨ては四捨五入とは違います
console.log('四捨五入との違い:');
console.log('3.7を切り捨て → 3');
console.log('3.7を四捨五入 → 4');

小数点以下が0.9でも、必ず整数部分だけを取り出します。この点が四捨五入と大きく異なります。

なぜ切り捨てが必要なの？

プログラミングでは、以下のような場面で切り捨てが活用されます。

ページ番号の計算（総件数 ÷ 1ページあたりの件数）
在庫管理（商品の個数）
ゲームのスコア計算
時間計算（秒から分への変換）
配列のインデックス計算

整数でないと意味がない場面で、切り捨てが重要になります。

Math.floor() - 最も基本的な方法

Math.floor()の使い方

Math.floor()は、引数以下の最大の整数を返すメソッドです。最も一般的で分かりやすい切り捨て方法です。

// Math.floor()の基本的な使用例
console.log('=== Math.floor()の基本 ===');

console.log(Math.floor(4.7));   // 4
console.log(Math.floor(8.1));   // 8
console.log(Math.floor(2.9));   // 2
console.log(Math.floor(6.0));   // 6

// 小数点以下がない場合
console.log(Math.floor(10));    // 10
console.log(Math.floor(0));     // 0

どんな小数点以下の値でも、必ず整数部分だけを返します。

実用的な例も見てみましょう。

// より複雑な計算での使用
const totalItems = 157;
const itemsPerPage = 10;
const totalPages = Math.floor(totalItems / itemsPerPage);

console.log(`商品総数: ${totalItems}`);
console.log(`1ページあたり: ${itemsPerPage}個`);
console.log(`総ページ数: ${totalPages}ページ`); // 15ページ

ページネーション（ページ分け）の計算でよく使われます。

負の数での動作に注意

Math.floor()は負の数の場合、より小さい整数を返すので注意が必要です。

// 負の数でのMath.floor()の動作
console.log('=== 負の数での動作 ===');

// 正の数の場合（期待通り）
console.log(Math.floor(3.8));   // 3
console.log(Math.floor(7.2));   // 7

// 負の数の場合（注意が必要）
console.log(Math.floor(-3.8));  // -4（-3ではない！）
console.log(Math.floor(-7.2));  // -8（-7ではない！）

なぜこうなるのでしょうか？

// なぜこうなるのか？
console.log('解説:');
console.log('-3.8以下の最大の整数は-4');
console.log('-7.2以下の最大の整数は-8');

Math.floor()は「床関数」と呼ばれ、数直線上でより小さい方向に向かいます。

Math.floor()の実用例

様々な場面でのMath.floor()の使用例を見てみましょう。

// 時間計算での活用
function formatTime(totalSeconds) {
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;
    
    return `${hours}時間${minutes}分${seconds}秒`;
}

console.log('時間計算の例:');
console.log(formatTime(3725)); // 1時間2分5秒

時間の計算では、秒から時間・分を計算するときにMath.floor()を使います。

配列のランダムな要素を取得する例も見てみましょう。

// 配列のランダムインデックス生成
function getRandomElement(array) {
    const randomIndex = Math.floor(Math.random() * array.length);
    return array[randomIndex];
}

const colors = ['赤', '青', '緑', '黄', '紫'];
console.log('ランダムな色:', getRandomElement(colors));

Math.random()は0以上1未満の値を返すので、Math.floor()で整数のインデックスに変換します。

Math.trunc() - 小数部分を単純に削除

Math.trunc()の特徴

Math.trunc()は、小数部分を単純に削除して整数部分のみを返します。切り捨てというより「小数部分の削除」という表現の方が正確です。

// Math.trunc()の基本的な使用例
console.log('=== Math.trunc()の基本 ===');

console.log(Math.trunc(4.7));   // 4
console.log(Math.trunc(8.1));   // 8
console.log(Math.trunc(2.9));   // 2
console.log(Math.trunc(6.0));   // 6

// 正の数ではMath.floor()と同じ結果
console.log('正の数での比較:');
console.log(`Math.floor(5.8): ${Math.floor(5.8)}`);   // 5
console.log(`Math.trunc(5.8): ${Math.trunc(5.8)}`);   // 5

正の数では、Math.floor()と同じ結果になります。

負の数での違いを理解する

Math.trunc()とMath.floor()の最大の違いは、負の数での動作です。

// 負の数での動作比較
console.log('=== 負の数での動作比較 ===');

const testNumbers = [-3.8, -7.2, -1.1, -9.9];

console.log('数値     | Math.floor | Math.trunc');
console.log('---------|------------|------------');

testNumbers.forEach(num => {
    const floorResult = Math.floor(num);
    const truncResult = Math.trunc(num);
    console.log(`${num.toString().padEnd(8)} | ${floorResult.toString().padEnd(10)} | ${truncResult}`);
});

Math.trunc()は符号に関係なく、単純に小数部分を削除します。 Math.floor()は負の数でより小さい整数を返します。

Math.trunc()の実用例

Math.trunc()が特に有効な場面を見てみましょう。

// ファイルサイズの表示
function formatFileSize(bytes) {
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${Math.trunc(bytes / 1024)} KB`;
    if (bytes < 1024 * 1024 * 1024) return `${Math.trunc(bytes / (1024 * 1024))} MB`;
    return `${Math.trunc(bytes / (1024 * 1024 * 1024))} GB`;
}

console.log('ファイルサイズの例:');
console.log(formatFileSize(1536));      // 1 KB
console.log(formatFileSize(2048576));   // 1 MB
console.log(formatFileSize(5368709120)); // 5 GB

ファイルサイズの表示では、正確な整数値が必要です。 Math.trunc()なら負の値でも期待通りの結果になります。

座標計算の例も見てみましょう。

// 画像リサイズ計算
function calculateNewDimensions(originalWidth, originalHeight, maxSize) {
    const ratio = Math.min(maxSize / originalWidth, maxSize / originalHeight);
    
    return {
        width: Math.trunc(originalWidth * ratio),
        height: Math.trunc(originalHeight * ratio)
    };
}

console.log('画像リサイズの例:');
const newSize = calculateNewDimensions(1920, 1080, 800);
console.log(`新しいサイズ: ${newSize.width}×${newSize.height}`);

画像のリサイズでは、ピクセル数は整数である必要があります。

parseInt() - 文字列から整数へ変換

parseInt()の基本的な使い方

parseInt()は、文字列を解析して整数を返す関数です。数値の切り捨てだけでなく、文字列から数値を抽出する機能があります。

// parseInt()の基本的な使用例
console.log('=== parseInt()の基本 ===');

// 数値文字列の変換
console.log(parseInt('123'));    // 123
console.log(parseInt('456.78')); // 456（小数点以下は無視）
console.log(parseInt('789.99')); // 789

// 文字列が混在している場合
console.log(parseInt('42px'));     // 42
console.log(parseInt('100%'));     // 100
console.log(parseInt('3.14rem'));  // 3

parseInt()は文字列の先頭から数字を解析して、数字以外が出現したら停止します。

先頭に数字がない場合はNaNを返します。

// 先頭に数字がない場合
console.log(parseInt('abc123'));   // NaN
console.log(parseInt('px42'));     // NaN

// 数値を渡した場合（文字列に変換されてから処理）
console.log(parseInt(67.89));      // 67
console.log(parseInt(-45.23));     // -45

進数指定の活用

parseInt()では、第2引数で進数を指定できます。

// 進数指定の使用例
console.log('=== 進数指定の活用 ===');

// 2進数の変換
console.log(parseInt('1010', 2));     // 10（2進数）
console.log(parseInt('1111', 2));     // 15（2進数）

// 8進数の変換
console.log(parseInt('77', 8));       // 63（8進数）
console.log(parseInt('123', 8));      // 83（8進数）

// 16進数の変換
console.log(parseInt('FF', 16));      // 255（16進数）
console.log(parseInt('A0', 16));      // 160（16進数）
console.log(parseInt('1a2b', 16));    // 6699（16進数）

16進数の色コードを変換する例を見てみましょう。

// 色コードの変換例
function hexToRgb(hex) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    
    return `rgb(${r}, ${g}, ${b})`;
}

console.log('色コード変換の例:');
console.log(hexToRgb('#FF5733')); // rgb(255, 87, 51)
console.log(hexToRgb('#3498DB')); // rgb(52, 152, 219)

WebデザインでよくあるHEXカラーコードをRGBに変換できます。

parseIntの注意点と実用例

parseInt()を使用する際の注意点を理解しておきましょう。

// parseInt()の注意点
console.log('=== parseInt()の注意点 ===');

// 先頭の空白は無視される
console.log(parseInt('  123'));       // 123
console.log(parseInt(' 	 456'));     // 456

// 途中で数字以外が出現したら、そこで変換終了
console.log(parseInt('123abc456'));   // 123（456は無視）
console.log(parseInt('3.14.15'));     // 3（最初の.で停止）

// 科学記法は期待通りに動作しない
console.log(parseInt('1e5'));         // 1（eで停止）
console.log(parseInt('2.5e3'));       // 2（.で停止）

科学記法を扱う場合は、Number()関数を使いましょう。

// 代わりにNumber()やMath関数を使用
console.log('科学記法の正しい変換:');
console.log(Number('1e5'));           // 100000
console.log(Math.trunc(Number('2.5e3'))); // 2500

CSS値から数値を抽出する実用例も見てみましょう。

// 実用例：CSSの値から数値を抽出
function extractNumber(cssValue) {
    const number = parseInt(cssValue);
    const unit = cssValue.replace(number.toString(), '');
    
    return { number, unit };
}

console.log('CSS値の解析例:');
console.log(extractNumber('200px'));     // { number: 200, unit: 'px' }
console.log(extractNumber('1.5em'));     // { number: 1, unit: '.5em' }
console.log(extractNumber('100%'));      // { number: 100, unit: '%' }

CSSの値から数値部分と単位部分を分離できます。

3つの方法の使い分け

どの方法を選ぶべきか？

用途に応じた最適な切り捨て方法を選択しましょう。

以下のような基準で選ぶのがおすすめです。

Math.floor(): 最も一般的で直感的（ページ数計算、配列インデックス）
Math.trunc(): 符号に関係なく小数部分を削除（座標計算、温度処理）
parseInt(): 文字列解析機能が必要（CSS値解析、フォーム入力処理）

実際の比較例

同じ値に対して3つの方法を適用した結果を比較してみましょう。

// 実際の比較テスト
console.log('=== 実際の比較例 ===');

const testValues = [5.7, -3.2, 8.0, -7.9, '12.34', '45px'];

console.log('値      | Math.floor | Math.trunc | parseInt');
console.log('--------|------------|------------|----------');

testValues.forEach(value => {
    const floor = Math.floor(value);
    const trunc = Math.trunc(value);
    const parse = parseInt(value);
    
    console.log(`${String(value).padEnd(7)} | ${String(floor).padEnd(10)} | ${String(trunc).padEnd(10)} | ${parse}`);
});

この比較表で、それぞれの特徴がよく分かります。

実践的な判断基準

実際の開発で使える判断基準を示します。

// 判断フローチャート関数
function chooseMethod(value, context) {
    console.log(`
=== 値: ${value}, 用途: ${context} ===`);
    
    // 文字列かどうかチェック
    if (typeof value === 'string') {
        console.log('→ 文字列が入力されています');
        
        if (value.includes('px') || value.includes('%') || value.includes('em')) {
            console.log('→ CSS値のようです');
            console.log('推奨: parseInt()');
            return parseInt(value);
        } else {
            console.log('→ 純粋な数値文字列のようです');
            console.log('推奨: Math.floor(Number(value))');
            return Math.floor(Number(value));
        }
    }
    
    // 数値の場合
    if (typeof value === 'number') {
        console.log('→ 数値が入力されています');
        
        if (value < 0) {
            console.log('→ 負の数です');
            
            if (context === 'coordinate') {
                console.log('推奨: Math.trunc()（座標計算）');
                return Math.trunc(value);
            } else {
                console.log('推奨: Math.floor()（一般的な用途）');
                return Math.floor(value);
            }
        } else {
            console.log('→ 正の数です');
            console.log('推奨: Math.floor()');
            return Math.floor(value);
        }
    }
    
    console.log('→ 予期しない型です');
    return NaN;
}

この関数を使って、適切な方法を自動選択できます。

// テスト実行
chooseMethod(5.7, 'general');
chooseMethod(-3.2, 'coordinate');
chooseMethod('120px', 'css');
chooseMethod('45.6', 'form-input');

まとめ

JavaScriptで小数点以下を切り捨てる3つの方法について詳しく解説しました。

各方法の特徴：

Math.floor(): 最も基本的で直感的（一般的な数値計算に最適）
Math.trunc(): 符号に関係なく小数部分を削除（負の数の処理で有効）
parseInt(): 文字列から数値を抽出（CSS値やフォーム入力の処理に便利）

重要なポイント：

負の数を扱う場合は、Math.floor()とMath.trunc()の動作の違いを理解する
文字列から数値を抽出する場合はparseInt()が有効
用途に応じて適切な方法を選択する

次のステップ：

より複雑な数値処理に挑戦
エラーハンドリングを考慮した実装
パフォーマンスを意識した最適化

これらの知識を活用して、より正確で効率的な数値処理を実装してみてください。小数点の切り捨ては基本的な処理ですが、正しく理解することでバグの少ないコードが書けるようになります。

ぜひ今日から、これらのテクニックを使って実用的なアプリケーションを作ってみませんか？

JavaScriptの小数点切り捨て - 3つの方法を初心者向けに解説

JavaScriptの小数点切り捨て - 3つの方法を初心者向けに解説

小数点切り捨てって何？

簡単に言うと整数部分だけを取り出すこと

なぜ切り捨てが必要なの？

Math.floor() - 最も基本的な方法

Math.floor()の使い方

負の数での動作に注意

Math.floor()の実用例

Math.trunc() - 小数部分を単純に削除

Math.trunc()の特徴

負の数での違いを理解する

Math.trunc()の実用例

parseInt() - 文字列から整数へ変換

parseInt()の基本的な使い方

進数指定の活用

parseIntの注意点と実用例

3つの方法の使い分け

どの方法を選ぶべきか？

実際の比較例

実践的な判断基準

まとめ

関連記事

JavaScriptの難易度は？文系・未経験でも理解できる学習ステップ

【初心者向け】JavaScriptとは？30分でわかる基本概念と学習の始め方

【2025年版】JavaScriptとは？初心者向けに5分でわかりやすく解説