VIDEO LESSON

JavaScriptのMath.ceil()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 8:26動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01今回はマスのシーリングを紹介します。
0:04これは、数値を正の無限大方向へ丸める、つまり切り上げる静的メソッドです。
0:10天井という意味の名前の通り、小数部分が少しでもあれば、ひとつ上の整数まで引き上げます。
0:18この動画では、書き方と引数、記事の基本例であるページ数の計算、正の数と負の数の動き、
0:25箱詰めや時間への実例、自動変換の注意、そして浮動小数点の誤差まで、実行結果と一緒に学びます。
0:33切り捨てのフロア、四捨五入のラウンドとセットで覚えると、丸めの使い分けがはっきりします。
0:41足りなくならないように多めに確保したい場面で、特に頼りになるメソッドです。
0:48数直線で右隣の整数を探す、というイメージを持つと、正の数でも負の数でも迷わずに済みます。
0:55まず動作環境を確認します。
0:57シーリングはマスオブジェクトに最初から備わる、歴史のとても長い機能です。
1:03クロームとファイアーフォックスでは一以降、サファリでは一以降、エッジでは十二以降で使えます。
1:11アンドロイド版クロームでは十八以降、アイオーエス版サファリでは一以降です。
1:17ノード・ジェイエスではゼロ・十・ゼロという古い版から対応しています。
1:22記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:27現在使われている環境であれば、ほぼどこでもそのまま使えるでしょう。
1:33追加の読み込みは不要で、関数として備わっていることを実機でも確認済みです。
1:39書き方を確認します。
1:40マスのあとにドットを書き、シーリングとカッコを続けます。
1:45引数は丸めたい数値が一つだけです。
1:47戻り値は、その引数以上の最小の整数です。
1:50スライドの例では、四・一が五に切り上がり、すでに整数の四はそのまま四で返ることを実機で確認しました。
1:58ポイントは、小数部分の大きさは関係ないことです。
2:02ゼロ・一でもゼロ・九でも、少しでも小数部分があれば上の整数になります。
2:07変数を渡しても、割り算のような計算式を渡しても、その結果である数値が切り上げの対象になります。
2:15まずはこの基本の形を覚えてください。
2:18記事の基本例を見ます。
2:19二十一割る十の結果をシーリングで切り上げる、とても短いコードです。
2:25実行結果は三で、ノードの実機結果とも一致しています。
2:30二十一・十は二・一ですが、二十一件を十件ずつ表示すると、二ページでは最後の一件が入りきらず、
2:35もう一ページ必要になります。
2:40そのためページ数は三になるわけです。
2:43記事でもこのページ数の場面が想定されています。
2:47まずはこの例をブラウザーのコンソールかノードで実行し、件数を二十に変えると二ページになることも確かめてみてください。
2:57予測してから実行する流れが、理解を深める近道です。
3:01正の数の動きを詳しく見ます。
3:03四・一も四・九も、結果はどちらも五になります。
3:07ゼロ・五は一に、十二・一も十二・九も十三になることを実機で確認しました。
3:13ラウンドが近い方の整数を選ぶのに対して、シーリングは常に大きい方の整数を選びます。
3:20小数部分がどれほど小さくても切り上がるため、必要量を計算するときに不足が出ません。
3:26逆に、金額の端数を切り上げると受け取る側が多めになるため、どちらの方向へ丸めるべきかは、
3:32業務のルールに合わせて選ぶ必要があります。
3:37方向を決めるメソッドだ、と覚えておきましょう。
3:41例えば参加者が三十一人で、一台に十人乗る車を用意する場合も、四台と数えるのが切り上げの発想です。
3:48負の数の切り上げを確認します。
3:51記事の境界例であるマイナス一・二の結果は、マイナス二ではなくマイナス一で、
3:55実機とも一致しました。
3:59マイナス四・七はマイナス四になります。
4:03正の無限大方向とは、数直線で右方向、つまりゼロに近づく方向のことです。
4:09そのため負の数では、見た目には切り捨てに近く見えます。
4:13なおマイナスゼロ・五の結果はマイナスゼロという特殊な値になることも、実機で確認しました。
4:21負の温度や差分を扱うときは、絶対値で考える癖を外し、数直線の右方向へ進むイメージで結果を予測してください。
4:30ここが最も間違えやすいポイントです。
4:33ページ数の計算を、件数を変えて確かめます。
4:36ゼロ件ならゼロページ、二十件なら割り切れて二ページ、二十一件なら三ページになることを実機で確認しました。
4:44割り算の結果がちょうど整数のときは切り上げても値は変わらず、余りがあるときだけページが増えます。
4:51記事が注意する通り、ゼロ件のときにゼロページと表示するか、一ページと表示するかは、
4:56画面の仕様で先に決めるべき事柄です。
5:00一覧画面や検索結果など、実務でとてもよく使う計算なので、総件数を一ページの件数で割って切り上げる、
5:05という型として覚えておきましょう。
5:10もう二つ、実務に近い実例を見ます。
5:13一つ目は時間です。
5:15百二十一分を六十分単位で数えると二・ゼロ一六となり、駐車料金や利用枠のように時間単位で数える場面では、
5:22三時間分として扱う計算になります。
5:29二つ目は重さの単位そろえです。
5:32九十五・三を十で割って切り上げ、十を掛け戻すと百になり、十キロ単位への切り上げができることを実機で確認しました。
5:43箱の数や席数のように、足りなくなると困るものを数えるときは、この切り上げの考え方がそのまま使えます。
5:53必要な量を下回らない、という目的が共通しています。
5:58表示件数を変えたくなった場合でも、割り算の数字を変えるだけで対応できる、
6:03汎用性の高い書き方です。
6:08引数が数値以外の場合の動きも知っておきましょう。
6:12数値の形をした文字列は、自動で数値に変換されて切り上げられます。
6:17スライドの例では、文字列の四・一が五になることを実機で確認しました。
6:23ヌルはゼロとして扱われ、結果はゼロです。
6:26一方、数値にできない文字列を渡すと結果はナンという特別な値になり、引数を省略した場合もナンになります。
6:35無限大を渡した場合は、そのまま無限大が返ります。
6:39自動変換に頼ると意図しない結果を招くことがあるため、実務では渡す前に自分で数値へ変換し、
6:43検証しておく方が安全です。
6:48注意点を二つ挙げます。
6:50一つ目は浮動小数点の誤差です。
6:53計算の結果が本来はちょうど一のはずでも、内部では一・ゼロゼロゼロとわずかに大きい値になることがあります。
7:02その値を切り上げると二になってしまい、スライドの例でもその動きを実機で確認しました。
7:10境界ぎりぎりの計算ほど、誤差の影響を受けやすくなります。
7:15二つ目は丸める時点です。
7:17途中の計算のたびに切り上げると、結果が必要以上に膨らみます。
7:23計算は小数のまま進め、最後に一度だけ切り上げるのが基本です。
7:28金額や在庫のように数が重要な場面では、この二点を先に確認してください。
7:34まとめです。
7:35シーリングは、数値を正の無限大方向へ丸め、引数以上の最小の整数を返すメソッドです。
7:42判断のポイントは三つです。
7:44まず、小数部分が少しでもあればひとつ上の整数になるため、ページ数や箱数のように不足を避けたい計算に向くこと。
7:52次に、負の数ではゼロに近い方向へ進み、マイナス一・二がマイナス一になること。
7:58そして、浮動小数点の誤差が境界に影響するため、丸めるのは最後に一度だけにすることです。
8:05切り捨てたいときはフロア、近い方へ丸めたいときはラウンドと使い分けてください。
8:11まずは記事の基本例をコンソールで実行し、件数を変えて結果を予測してみてください。
8:17お疲れさまでした。
8:19迷ったときは、不足すると困るかどうかを基準に、切り上げかどうかを判断してみてください。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Math.ceil()で数値を正の無限大方向へ丸める方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのMath.ceil()の使い方：引数・戻り値・実例と注意点 →