WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： JQ
カテゴリー： プログラム >JavaScript

現在はWebディレクターとして仕事をしている私ですが、もともとはフロントエンドエンジニアとして仕事をしていました。
ですので、たまにはテクニカル系な記事を書こうと思います。
今回は、フロントエンドエンジニアを名乗る上で、避けては通れない言語であるJavaScriptの数値操作に関するテクニックについて解説します。

JavaScriptを使って数値の操作をしてみよう

JavaScriptはブラウザ上で動くスクリプト言語です。
こちらの言語を使って、いろいろな数値を操作してみましょう。

数値を切り上げる

See the Pen
math.ceil by TAKASHI (@takashi1107)
on CodePen.

上記の「JS」のタブを御覧ください。
与えられた数値の小数点以下を切り上げて整数にしたい場合は、Mathクラスのceilメソッドを使用します。
5.3という数値の「.3」の部分が切り上げられ、6という結果になっていることがわかります。
ceilとは「天井」を意味する英語のため、「切り上げ」というイメージとして覚えやすいと思います。

数値を切り捨てる

See the Pen
math.floor by TAKASHI (@takashi1107)
on CodePen.

上記の「JS」のタブを御覧ください。
与えられた数値の小数点以下を切り捨てて整数にしたい場合は、Mathクラスのfloorメソッドを使用します。
5.3という数値の「.3」の部分が切り捨てられ、5という結果になっていることがわかります。
floorとは「床」を意味する英語のため、「切り捨て」というイメージとして覚えやすいと思います。

「切り上げ」と「切り捨て」を「天井」と「床」というセットで覚えておくと良いと思います。

数値を四捨五入する

See the Pen
math.round by TAKASHI (@takashi1107)
on CodePen.

小数点以下の数値によって切り上げるか切り捨てるか、いわゆる「四捨五入」を行いたいときには、Mathクラスのroundメソッドを使用します。
上記の「JS」のタブを御覧ください。
5.3という数値の「.3」の部分を評価した時に4以下なので切り捨てとなり、結果として5となっています。

桁数を指定して四捨五入する

See the Pen
math.round桁数指定 by TAKASHI (@takashi1107)
on CodePen.

ここまでは小数点第1位を切り上げや切り捨てをしてきましたが、この桁数は指定することができます。
たとえば、小数点第2位を四捨五入して、結果として小数点第1位まで出したい場合は、下記のようにします。

1. 元になる数値を10倍しておく
2. 10倍した数値をroundメソッドで四捨五入する
3. 最後に10で割る

このような手順を踏むことによって、小数点第2位を四捨五入することができました。

小数点第3位を四捨五入したい場合は、10倍の部分を100倍にすればOKです。

まとめ

今回はJavaScriptを使って小数点を伴う数値の操作に関して解説してきました。
もちろん小数点を含まない整数の切り上げや切り捨て操作に関しても行うことができます。
そちらは、またの機会に説明できればと思います。

こちらの記事もお読みください

• jQueryでの「困った」を解決！（1）クリックしたのに動かない？
• jQueryでの「困った」を解決！（2）時間差でclassを付け外ししたい！
• jQueryでの「困った」を解決！（3）CSSをまとめて設定したい！
• jQueryでの「困った」を解決！（4）jQueryで動的にコンテンツを追加したい