TypeScriptで数字を簡単に切り捨てる方法10選

はじめに

TypeScriptでの数字の取り扱いは、初心者にとって多少複雑に感じるかもしれません。

特に、数字を切り捨てる操作は日常的に必要とされる場面が多いので、その方法をしっかりと理解しておくことが重要です。

この記事では、TypeScriptで数字を簡単に切り捨てる方法を10通り、サンプルコードを交えて詳しく解説します。

TypeScriptは、JavaScriptのスーパーセットとして開発されたプログラミング言語であり、型の概念を導入することで、より安全かつ効率的なコードを書くことができます。

その中でも、数値の取り扱いは、プログラミングの基本中の基本とも言えます。

切り捨て操作は、計算やデータ処理、ゲームのロジックなどさまざまな場面で用いられます。

具体的には、金額の計算や、グラフィックの座標計算など、多岐にわたります。

初心者の方々がTypeScriptでの切り捨て操作を行う際の手助けとなるよう、本記事では様々な方法を取り上げます。

それぞれの方法には、特徴や適したシチュエーションが異なるので、用途に合わせて選ぶことができます。

また、応用例や注意点も合わせて解説するので、実際の開発シーンでの役立つ情報となることでしょう。

では、さっそくTypeScriptでの切り捨ての方法を学んでいきましょう。

これから紹介する方法を使いこなすことで、より高品質なプログラムの実装が可能となります。

●TypeScriptとは

TypeScriptは、Microsoftが開発したJavaScriptのスーパーセットとして知られています。

TypeScriptはJavaScriptに静的型付けとクラスベースのオブジェクト指向を追加することで、大規模なアプリケーションの開発を簡単にし、バグを早期に発見することを目的としています。

JavaScriptは動的型付け言語であり、実行時に型のエラーを検出することができますが、TypeScriptではコンパイル時に型のエラーを検出することができます。

この特性により、開発者はコードの問題点を早期に検出し、修正することができます。

また、TypeScriptはJavaScriptと100%互換性があります。

これは、既存のJavaScriptコードをTypeScriptに移行する際に、徐々にTypeScriptの機能を取り入れることができるというメリットがあります。

○初心者が知っておくべき基本

TypeScriptを学ぶ上で、初心者が知っておくべき基本として次の点を挙げます。

❶型注釈

TypeScriptでは、変数や関数の引数、戻り値に型を指定することができます。

このような型の指定を型注釈といいます。

let name: string = 'Taro';
function greet(person: string): string {
    return 'Hello, ' + person;
}

このコードでは、変数nameと関数greetの引数person、戻り値に対して、それぞれ型注釈としてstring型を指定しています。

❷インターフェース

TypeScriptのインターフェースを使用すると、特定の形状を持つオブジェクトを定義することができます。

これは、オブジェクトの構造を明確に表すために非常に有用です。

interface Person {
    firstName: string;
    lastName: string;
}

上記のコードは、Personというインターフェースを定義しています。

このインターフェースを使用すると、firstNameとlastNameという2つのプロパティを持つオブジェクトの形状を指定することができます。

❸クラス

TypeScriptでは、JavaScriptのES6クラスを拡張して、静的型付けやアクセス修飾子などの機能を持つクラスを定義することができます。

class Animal {
    private name: string;
    constructor(theName: string) {
        this.name = theName;
    }
    public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters} meters.`);
    }
}

この例では、Animalというクラスを定義しています。

このクラスはnameというプライベートプロパティと、moveという公開メソッドを持っています。

●切り捨ての基本理解

数字を切り捨てるとは、特定の小数点以下の数字を取り除くことを意味します。

例えば、5.8や3.1415といった数字を考えた場合、それらの小数点以下の数字を取り除いて整数にすることが切り捨ての主要な目的です。

TypeScriptにおいても、この数字の切り捨ては頻繁に使用される操作の一つです。

○整数と浮動小数点数の違い

数字には大きく分けて整数と浮動小数点数の二つの形式が存在します。

整数は小数点以下が存在しない数字で、例として1、-3、0、255などが挙げられます。

一方、浮動小数点数は小数点以下が存在する数字で、例えば1.23や-0.89などが該当します。

TypeScriptでの数値の型は、両方を包括する「number」という一つの型で表されますが、その中で切り捨てを行う際には、これらの違いをしっかりと理解することが重要となります。

●10の切り捨て方法

○サンプルコード1：Math.floorを使う

このコードではMath.floorメソッドを使って数字を切り捨てるコードを表しています。

この例では5.8を切り捨てて5としています。

let num = 5.8;
let result = Math.floor(num);
console.log(result);  // 5

上のコードを実行すると、5という結果が表示されることが確認できます。

Math.floorは与えられた数値を小数点以下で切り捨てることができるメソッドです。

○サンプルコード2：~~演算子を使う

このコードでは~~演算子を使って数字を切り捨てる方法を表しています。

この例では4.6を切り捨てて4としています。

let num2 = 4.6;
let result2 = ~~num2;
console.log(result2);  // 4

上記のコードを実行すると、4という結果が出力されます。

~~演算子はビット単位のNOT操作を2回適用することで、結果的に数値を切り捨てる効果が得られます。

○サンプルコード3：| 0 演算子を使う

このコードでは| 0演算子を利用して数字を切り捨てる方法を表しています。

この例では3.3を切り捨てて3としています。

let num3 = 3.3;
let result3 = num3 | 0;
console.log(result3);  // 3

このコードを実行すると、3という結果が得られることが確認できます。

| 0演算子はビット単位のOR操作を利用して数値を切り捨てることができます。

○サンプルコード4：parseInt関数を使う

TypeScriptで数値を扱う際、浮動小数点数を整数に切り捨てる方法として、parseInt関数を活用する手法があります。

この関数は、第一引数に文字列をとり、その文字列を解析して最初の整数値を返します。

数値が文字列でない場合、自動的に文字列に変換されます。

このコードではparseInt関数を使って浮動小数点数を整数に変換するコードを表しています。

この例では3.14という数値を3という整数に変換しています。

const num = 3.14;
const integer = parseInt(num.toString(), 10);
console.log(integer);  // この行は整数の3を出力します。

上記のコードを確認すると、3.14という浮動小数点数がtoStringメソッドで文字列に変換され、その後parseInt関数によって整数値3に変換されています。

こちらの方法で、浮動小数点数から整数値を取り出すことが可能です。

実行すると、コンソールには数字の3が表示されます。

これは、3.14の小数点以下の部分がparseInt関数により正確に切り捨てられた結果です。

ただし、parseInt関数を使用する際の注意点として、数値が非常に大きい場合や、特殊な文字列を含む場合には、意図しない結果が返される可能性があります。

このため、常に入力されるデータをチェックすることが重要です。

応用例として、次のように文字列の中に数値が含まれている場合にもparseInt関数を利用することができます。

このコードでは、文字列中の数値を抽出して、その部分を整数として切り捨てる方法を表しています。

この例では、"価格は100.5円"という文字列から、100という整数部分を抽出しています。

const str = "価格は100.5円";
const price = parseInt(str, 10);
console.log(price);  // この行は整数の100を出力します。

上記のコードを実行すると、コンソールに整数値の100が表示されます。

文字列中の最初の数値が整数部分だけ取り出され、その後の文字や小数点以下の部分は無視されます。

○サンプルコード5：toFixedメソッドを使った後のparseInt

このコードでは、TypeScriptにおける数値の切り捨て方法として、toFixedメソッドを使って浮動小数点数を文字列に変換した後、parseInt関数を使用して再度整数へと変換するというアプローチを取っています。

この例では、toFixedメソッドで小数点以下を固定桁数に変換し、その後、parseInt関数を利用して整数部のみを取り出しています。

const number: number = 123.456;

// toFixedメソッドを使って2桁の小数点を持つ文字列に変換
const fixedString: string = number.toFixed(2); // "123.46"

// parseInt関数を使って整数部分だけを取り出す
const integerPart: number = parseInt(fixedString); // 123

console.log(integerPart); // 123

この方法は、浮動小数点数の特定の桁数までを保持したい場面などで便利に活用することができます。

例えば、金額や物理的な単位など、実際のシナリオでは一定の小数桁数までを考慮することが求められる場合があります。

しかし、この手法には注意点があります。

特に、toFixedメソッドを使用することで元の数値の小数部分が四捨五入されてしまいます。

そのため、厳密な切り捨て処理を実行したい場合、この方法は適切ではありません。

const price: number = 456.789;

// 小数点第2位までを保持し、それ以降は切り捨て
const twoDecimal: string = price.toFixed(2); // "456.79"
console.log(twoDecimal); // "456.79"

// parseIntを利用して整数部分だけを取得
const intPrice: number = parseInt(twoDecimal); // 456
console.log(intPrice); // 456

このような方法を使用することで、特定の小数桁数までを保持しながらも、その桁数を超える部分は切り捨てる、という処理を簡単に実現することができます。

特に、金額計算や物理計算など、特定の小数桁数までの精度が求められる場面での活用が考えられます。

○サンプルコード6：自作関数での切り捨て

TypeScriptでは、多くの組み込み関数や演算子で数値の切り捨てが行えますが、自作の関数を作成することもできます。

このコードでは自分で関数を定義し、その中で数字を切り捨てる方法を表しています。

この例では、数値を受け取り、その数値を切り捨てるシンプルな関数を実装しています。

function customFloor(value: number): number {
    // 小数点以下を切り捨てる
    return value >= 0 ? Math.floor(value) : Math.ceil(value);
}

// 使用例
const value1 = 3.7;
const value2 = -3.7;

console.log(customFloor(value1));  // 3
console.log(customFloor(value2));  // -3

この関数は、正の数値の場合はMath.floorを、負の数値の場合はMath.ceilを使用しています。

これは、正の数値と負の数値での切り捨ての挙動が異なるためです。

例えば、-3.7を通常のMath.floor関数を使用して切り捨てると-4になりますが、この関数では-3として返します。

この自作関数を使ってvalue1とvalue2の切り捨てを行った結果、value1は3となり、value2は-3となることがわかります。

これにより、負の数値でも期待通りの切り捨てが行えるのが確認できます。

この自作関数の利点は、独自のロジックを組み込むことができる点にあります。

例えば、特定の条件下でのみ切り捨てを行いたい、あるいは特定の値を丸めたい場合など、柔軟に対応することができます。

例として、0.5より大きい小数部を持つ数値を切り上げるような関数を作成する場合を考えてみましょう。

function customRounding(value: number): number {
    // 0.5より大きい小数部を持つ数値を切り上げる
    const decimalPart = value - Math.floor(value);
    return decimalPart > 0.5 ? Math.ceil(value) : Math.floor(value);
}

// 使用例
const value3 = 4.6;
console.log(customRounding(value3));  // 5

この関数を使用すると、value3の値4.6は5として返されます。

通常の切り捨てや切り上げとは異なる動作をする関数を簡単に実装できることがわかります。

○サンプルコード7：roundメソッドを利用した方法

TypeScriptを使用して数値を切り捨てるための方法として、roundメソッドを利用する方法について解説します。

このコードではMathクラスのroundメソッドを使って、数字を四捨五入するコードを表しています。

この例では整数値や浮動小数点数を与えて、最も近い整数に四捨五入しています。

// roundメソッドを利用して数値を四捨五入するサンプルコード
function roundNumber(num: number): number {
  // Math.roundメソッドで数値を四捨五入
  return Math.round(num);
}

// サンプルデータでの動作確認
const testNumber1 = 5.6;
const testNumber2 = 5.4;

console.log(roundNumber(testNumber1));  // 6と表示される
console.log(roundNumber(testNumber2));  // 5と表示される

上記のコードでは、roundNumberという関数を定義しています。

この関数は、与えられた数値をMath.roundメソッドを利用して四捨五入し、その結果を返します。

例として、5.6と5.4を四捨五入した場合、それぞれ6と5となります。

しかし、この方法には注意点があります。

四捨五入を行うという特性上、元の数値から0.5以上離れた最も近い整数になりますので、必ずしも下方向に切り捨てられるわけではありません。

切り捨てを厳密に行いたい場合、この方法は適していません。

次に、このroundメソッドを応用したカスタマイズ例を紹介します。

// 指定した小数点以下の桁数で四捨五入する関数
function customRound(num: number, decimalPlaces: number): number {
  const multiplier = Math.pow(10, decimalPlaces);
  return Math.round(num * multiplier) / multiplier;
}

// サンプルデータでの動作確認
const testNumber3 = 5.678;
console.log(customRound(testNumber3, 2));  // 5.68と表示される

このカスタマイズ例では、指定した小数点以下の桁数で四捨五入する機能を提供しています。

例えば、5.678を小数点第2位で四捨五入する場合、結果は5.68となります。

○サンプルコード8：ceilメソッドの活用

数値を整数に変換する際、切り捨てだけでなく、切り上げを行いたい場面も出てきます。

TypeScriptでもJavaScriptと同じく、Math.ceilメソッドを用いることで数値を簡単に切り上げることができます。

このコードでは、Math.ceilメソッドを使って数値を切り上げるコードを表しています。

この例では、4.1や-4.8などの数値をMath.ceilを使って切り上げています。

// `Math.ceil`メソッドの使用例
const number1 = 4.1;
const result1 = Math.ceil(number1);
console.log(result1);  // 5と表示されます

const number2 = -4.8;
const result2 = Math.ceil(number2);
console.log(result2);  // -4と表示されます

このサンプルコードを実行すると、number1の4.1は5に、number2の-4.8は-4に切り上げられることが確認できます。

特に負の数値を切り上げる場合、結果が直感的でないこともあるので、この動作に注意が必要です。

また、数値の小数点以下を一定の桁数に切り上げたい場面も考えられます。

例えば、2.346を小数点第2位で切り上げたい場合、3.35にしたいとします。

const number3 = 2.346;
const multiplier = 100;
const roundedNumber = Math.ceil(number3 * multiplier) / multiplier;
console.log(roundedNumber);  // 2.35と表示されます

この例では、まず数値を100倍してから切り上げ、再度100で割ることで、小数点第2位での切り上げを実現しています。

切り上げ操作は、価格計算や天井関数の計算など、多岐にわたる場面で利用されます。

ただ、計算誤差などのリスクもあるので、実際のアプリケーションでの使用時には注意が必要です。

特に金額など、誤差が許されない場面での利用は慎重に行うよう心がけましょう。

○サンプルコード9：truncメソッドによる切り捨て

TypeScriptにおける数字の切り捨ての手法として、Mathオブジェクトが提供するtruncメソッドも非常に役立つものの一つです。

このtruncメソッドは、与えられた数値の小数部分を切り捨てるだけでなく、整数部分だけを返します。

それでは、具体的なコードを見てみましょう。

let num1: number = 5.7;
let num2: number = -5.7;

let result1: number = Math.trunc(num1);
let result2: number = Math.trunc(num2);

console.log(result1); // 5
console.log(result2); // -5

このコードでは、Math.truncメソッドを使って、変数num1とnum2の小数部分を切り捨てています。

この例では、5.7と-5.7の小数部を切り捨て、それぞれ5と-5を取得しています。

実際に上記のコードを実行すると、出力結果は5と-5となります。

この結果から、truncメソッドが正の数値だけでなく、負の数値に対しても正確に小数部分を切り捨てることがわかります。

ただし、このtruncメソッドは小数部分を単純に切り捨てるだけなので、四捨五入や切り上げのような挙動は期待できません。

必要に応じて適切なメソッドを選択することが大切です。

このtruncメソッドの最大の特徴として、浮動小数点数の問題を避けることができるという点が挙げられます。

例えば、0.1 + 0.2を計算すると、JavaScriptやTypeScriptでは0.30000000000000004という誤差が生じることが知られています。

このような場合に、truncメソッドを利用することで、誤差を含む小数部を安全に切り捨てることができます。

応用例として、大きな数値の小数部分だけを取り出して切り捨てたい場合にもこのメソッドを利用できます。

let largeNumber: number = 1234567.8910;
let decimalPart: number = largeNumber % 1;
let truncatedDecimal: number = Math.trunc(decimalPart * 10000);

console.log(truncatedDecimal); // 8910

上記のコードでは、大きな数値largeNumberから小数部分だけを取り出して、その値を10000倍してtruncメソッドで切り捨てています。

このようにして、小数部分だけを整数として取得することができます。

○サンプルコード10：Numberのコンストラクタを活用する

数値を操作するとき、TypeScriptではNumberという組み込みオブジェクトが提供されています。

このNumberオブジェクトには、数値に関するさまざまなメソッドやプロパティが実装されています。

今回は、その中からコンストラクタを利用して浮動小数点数を整数に切り捨てる方法を紹介します。

このコードではNumberのコンストラクタを使って浮動小数点数を文字列に変換し、さらにその文字列をparseInt関数で整数に変換することで数値を切り捨てます。

この例では、5.76という浮動小数点数を5という整数に切り捨てる処理を行っています。

// 浮動小数点数を定義
const num: number = 5.76;

// Numberのコンストラクタを使って文字列に変換後、parseIntで整数に変換
const truncated: number = parseInt(Number(num).toString());

console.log(truncated); // 結果として5が表示される

上記のコードを実行すると、5.76は5としてコンソールに出力されます。

Numberのコンストラクタを利用する方法は、コードの可読性が高くなり、他の方法と比べても簡潔でわかりやすいことが特徴です。

しかし、この方法も他の切り捨ての方法と同じく、整数部分が非常に大きな数や非常に小さな数の場合は、期待する結果が得られない可能性があるため注意が必要です。

また、この方法を利用すると、配列内の複数の数値を一括で切り捨てることもできます。

例として、次のサンプルコードをご参照ください。

このコードでは、複数の浮動小数点数を含む配列を用意し、その各要素を切り捨てる処理を行っています。

// 浮動小数点数の配列を定義
const numbers: number[] = [1.45, 3.67, 5.89, 7.01];

// 配列の各要素を切り捨てる
const truncatedNumbers: number[] = numbers.map(num => parseInt(Number(num).toString()));

console.log(truncatedNumbers); // 結果として[1, 3, 5, 7]が表示される

このように、配列のmapメソッドと組み合わせることで、複数の数値を効率的に切り捨てることができます。

●応用例と実際の使い道

TypeScriptで数値を切り捨てる技術は、日常のプログラミングタスクにおいて非常に役立ちます。

一見、単純な操作のように思える切り捨てですが、多岐にわたるシチュエーションでの活用が可能です。

今回はその中でも特に実践的な例をいくつか取り上げ、具体的なサンプルコードを交えながらその使い方を解説します。

○ランダムな数値生成と切り捨て

このコードでは、TypeScriptでランダムな数値を生成し、その後切り捨てる方法を表しています。

たとえば、ゲーム開発などでランダムな座標やポイントを生成したい際に役立ちます。

// ランダムな小数を生成
const randomFloat = Math.random() * 100;

// 生成された小数を切り捨て
const randomInt = Math.floor(randomFloat);

// 切り捨てた結果を表示
console.log(`ランダムに生成された整数は${randomInt}です。`);

上記のコードを実行すると、0から99までのランダムな整数がコンソールに表示されます。

Math.random()メソッドは、0以上1未満のランダムな小数を生成するため、それに100を掛けることで0から99.999…の範囲の小数が得られます。

そして、その後にMath.floor()を用いて切り捨てを行い、求める整数を取得しています。

○配列の数値を一括切り捨て

次に、配列内の複数の小数点数値を一括で切り捨てる方法を紹介します。

データ分析や処理において、複数のデータを同時に切り捨てたい場面が考えられます。

// 数値の配列を定義
const numbers = [12.34, 56.78, 90.12, 34.56];

// mapメソッドを使用して配列内の数値を一括切り捨て
const flooredNumbers = numbers.map(num => Math.floor(num));

// 切り捨てた結果を表示
console.log(`切り捨て後の配列は${flooredNumbers.join(', ')}です。`);

上記のコードを実行すると、配列内の各小数点数値が整数に切り捨てられ、新しい配列として取得されます。

結果として、「切り捨て後の配列は12, 56, 90, 34です。」というメッセージがコンソールに表示されることになります。

map()メソッドは、配列の各要素に関数を適用し、その結果を新しい配列として返すため、これを利用して一括の切り捨てを実現しています。

●注意点と対処法

TypeScriptで数値の切り捨てを行う際には、いくつかの注意点が存在します。

正確に数値を切り捨てるためには、これらの注意点を理解し、適切な対処法を取り入れることが必要となります。

○不正確な浮動小数点数による計算誤差

JavaScriptおよびTypeScriptは、内部的にIEEE 754の浮動小数点数を用いて計算を行います。

このため、特定の数値の計算において微小な誤差が生じる可能性があります。

切り捨てを行う際も、この誤差によって予期しない結果が得られることが考えられます。

このコードでは、浮動小数点数の誤差を表す例を紹介しています。

この例では、0.1と0.2を足して0.3と比較した結果を出力しています。

const result = 0.1 + 0.2;
console.log(result === 0.3); // falseと出力される

実際に上記のコードを実行すると、falseと出力されます。

これは、0.1と0.2の加算結果が正確に0.3ではないためです。

対処法としては、計算を行う前に数値を整数に変換してから計算を行い、最後に適切な桁数に戻す方法が考えられます。

○大きな数値の切り捨て時の問題

大きな数値を扱う際に、JavaScriptおよびTypeScriptではNumber型の最大値を超えるとInfinityとなります。

このような値に対して切り捨てを試みると、正確な結果が得られない可能性が高まります。

このコードでは、大きな数値に対しての切り捨ての例を表しています。

この例では、Number型の最大値を超える数値に対して、Math.floor関数を適用しています。

const largeNumber = Number.MAX_VALUE + 1;
console.log(Math.floor(largeNumber)); // Infinityと出力される

このコードを実行すると、結果はInfinityとなります。

これは、Number型の最大値を超えてしまったためです。

対処法としては、BigIntを使用して大きな数値を扱うことが考えられます。

また、数値がNumber型の範囲内に収まるかどうかを事前に確認することも重要です。

○負の数値の切り捨て

Math.floor関数やその他の切り捨て関数を負の数値に対して使用すると、結果が期待と異なる場合があります。

具体的には、負の数値に対してMath.floorを適用すると、絶対値が大きくなる方向に切り捨てられます。

このコードでは、負の数値に対する切り捨ての挙動を表しています。

この例では、-1.7にMath.floor関数を適用しています。

const negativeNumber = -1.7;
console.log(Math.floor(negativeNumber)); // -2と出力される

上記のコードを実行すると、-2という結果が出力されます。

対処法としては、負の数値を正の数値に変換してから切り捨てを行い、その後再び負の数値に戻す方法が考えられます。

まとめ

TypeScriptを使った数字の切り捨て方法は、多岐にわたる方法が存在します。

この記事で解説した10の方法をマスターすることで、数値の切り捨てに関しての基本的な課題は難なくクリアできるでしょう。

特に、Math.floorや~~演算子、parseInt関数などの手法は日常的なプログラミングで頻繁に使用されます。

また、それぞれの方法には適したシーンや特定の利点が存在するため、状況やニーズに合わせて最適な手法を選ぶことが肝心です。

この記事がTypeScriptでの数字の切り捨てに関する疑問や課題を解決する一助となれば幸いです。