SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

JavaScriptのMath.sign()：数値の差分を増加・減少・変化なしに分類するの解説動画

再生時間 8:07動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00今回はジャバスクリプトのマス・サインを紹介します。
  3. 0:05これは、数値の符号を調べる、組み込みの静的メソッドです。
  4. 0:09前回と今回の在庫数を比べるとき、何個変わったかという大きさと、増えたか減ったかという向きは、
  5. 0:14別の情報です。
  6. 0:18差分が二十でも三でも、増加という表示は共通にできます。
  7. 0:23マス・サインは、正の数なら一、負の数ならマイナス一を返し、ゼロはゼロのまま返します。
  8. 0:30この動画では、在庫の差分を増加、減少、変化なしの三つに分類する例を中心に、
  9. 0:35基本、戻り値の読み方、失敗しやすい注意点の順に解説します。
  10. 0:41まずは、符号という言葉に慣れることから始めましょう。
  11. 0:45まず動作環境です。
  12. 0:46マス・サインは、二千十五年九月以降、ブラウザー間で広く利用できる機能とされています。
  13. 0:53現在のクローム、エッジ、ファイアフォックス、サファリで使えます。
  14. 0:58ノード・ジェイエスでも、追加パッケージや実験用の設定なしで動作します。
  15. 1:03ドムや外部ライブラリーを使わないため、同じ分類コードをブラウザーとノード・ジェイエスの両方で利用できます。
  16. 1:12古い実行環境を対象に含める場合は、タイプオブで関数として存在するかを確認してください。
  17. 1:18記事の確認日は二千二十六年十月二十三日で、ノード・ジェイエスの対象は二十二系以降です。
  18. 1:25対応状況は、導入を判断する大切な材料になります。
  19. 1:29基本の書き方を見ましょう。
  20. 1:31マス・サインは、マスオブジェクトの静的メソッドなので、マスのインスタンスを作る必要はありません。
  21. 1:39いつもマス・サイン、かっこ、という形で呼び出します。
  22. 1:43引数は、符号を調べたい数値を一つだけ渡します。
  23. 1:46戻り値は、符号を表す数値です。
  24. 1:49たとえば入力が五なら結果は一、入力がマイナス三なら結果はマイナス一、入力がゼロなら結果はゼロになります。
  25. 1:57大きさの情報は捨てられ、向きだけが残る点が特徴です。
  26. 2:01処理は同期的で、非同期の待ち合わせは不要です。
  27. 2:05慣れてきたら、負の数や小数でも同じ書き方で試してみてください。
  28. 2:09戻り値のパターンを整理しましょう。
  29. 2:13全部で五通りあります。
  30. 2:15正の数には一、負の数にはマイナス一、ゼロにはゼロ、マイナスゼロにはマイナスゼロ、
  31. 2:21そして数値ではないことを示すナンにはナンが返ります。
  32. 2:27マイナスゼロまで区別される点が特徴で、符号付きゼロをそのまま保ちます。
  33. 2:33ただし、普通の等号で比べるとマイナスゼロとゼロは等しいと判定されます。
  34. 2:39そのため、あとで見る分類の例では、ゼロとマイナスゼロをまとめて変化なしとして扱います。
  35. 2:47まずは五通りあることを押さえてください。
  36. 2:51入力と結果を一対一で対応させて覚えるのが近道です。
  37. 2:55注意しておきたいのが、暗黙の型変換です。
  38. 2:58マス・サイン自体は、引数を数値へ変換してから符号を調べます。
  39. 3:02そのため、文字列のマイナス三も数値として扱われ、結果はマイナス一になります。
  40. 3:07引数を省略するとナンになり、ヌルはゼロとして扱われます。
  41. 3:11また、ビッグイントやシンボルを渡すと、数値への変換ができずタイプエラーになります。
  42. 3:17マス・サインは入力検証の関数ではありません。
  43. 3:20数値だけを受け付けたい処理では、呼び出す前にナンバー・イズ・ファイナイトなどで、
  44. 3:24有限の数値かどうかを確かめてください。
  45. 3:28この変換の仕組みを知っておくと、思わぬ判定ミスを防げます。
  46. 3:32ここからは実例です。
  47. 3:33前回値と今回値を受け取り、変化を分類する、クラシファイチェンジという関数を考えます。
  48. 3:41この関数は、まず前回値と今回値が有限の数値かどうかを確かめ、問題があればタイプエラーを投げます。
  49. 3:49次に、今回値から前回値を引いて差分を求めます。
  50. 3:53引き算の順序が大切で、逆にすると増減の判定も逆になってしまいます。
  51. 3:59さらに、極端に大きな値を引くと差分が無限大になる場合があるため、差分自体も有限かどうか確かめます。
  52. 4:07そのうえでマス・サインに差分を渡し、方向を求めます。
  53. 4:12検証と計算と表示名の決定までを、一つの関数にまとめています。
  54. 4:17期待出力を読みましょう。
  55. 4:19ノートは前回が十、今回が十四で、差分は四、方向は一となり、増加に分類されます。
  56. 4:25ペンは前回が八、今回が五で、差分はマイナス三、方向はマイナス一となり、減少です。
  57. 4:32付箋は前回も今回も六で、差分はゼロ、方向もゼロとなり、変化なしになります。
  58. 4:38関数が返すオブジェクトには、差分と方向と表示名が入っています。
  59. 4:43方向だけでなく元の差分も残しておく設計なので、表示にも集計にも使えます。
  60. 4:49文字列の十四を渡した場合はタイプエラーが表示されます。
  61. 4:53これらの出力は、ノード・ジェイエスの実機でも同じになることを確認済みです。
  62. 4:59三つのケースがそろうことで、分類の全体像がはっきりします。
  63. 5:04判定の書き方でよくある失敗です。
  64. 5:07もしマス・サインの結果を、そのまま条件式の真偽だけで判断すると、一もマイナス一も真として扱われてしまいます。
  65. 5:16その分岐だけでは、増加と減少を区別できません。
  66. 5:20方向ごとに処理したい場合は、実例のように一、マイナス一、ゼロをそれぞれ比較してください。
  67. 5:28もう一つ注意点があります。
  68. 5:30検証をせずに、正でも負でもなければ変化なしとしてしまうと、ナンまで変化なしに分類してしまう危険があります。
  69. 5:40未知の入力は先に検証し、正常な数値だけを分類へ進めることが大切です。
  70. 5:46例外は同期的に発生するので、トライキャッチで受け止められます。
  71. 5:51負のゼロの扱いも確認しておきましょう。
  72. 5:54ジャバスクリプトにはマイナスゼロという値があり、マス・サインにマイナスゼロを渡すと、
  73. 5:58マイナスゼロが返ります。
  74. 6:02ただし、マイナスゼロとゼロを等号で比べると真になります。
  75. 6:07そのため、方向がゼロかどうかという判定では、ゼロもマイナスゼロもまとめて変化なしになります。
  76. 6:14在庫や件数の表示では、この扱いが自然です。
  77. 6:17一方で、符号付きゼロ自体に意味がある数値計算へ転用する場合は注意してください。
  78. 6:23表示用の分類と、計算用の値は分けて設計すると、混乱を防げます。
  79. 6:28業務上の状態としてマイナスゼロを持ち込まないこともポイントです。
  80. 6:32小数の誤差への対処です。
  81. 6:34マス・サインは、小さな正負の値もそのまま分類します。
  82. 6:38たとえば、ゼロ点一たすゼロ点二ひくゼロ点三は、浮動小数点の誤差で厳密なゼロにはならず、
  83. 6:42ごく小さな正の値が残ります。
  84. 6:46そのため、変化していないはずなのに増加と判定される場合があります。
  85. 6:51計測値を扱うなら、絶対値がゼロ点ゼロ一未満なら変化なし、といった業務上の許容差を先に定めてください。
  86. 6:59その範囲をゼロへそろえてからマス・サインを使うと、誤差に振り回されません。
  87. 7:04許容差は、単位と必要な精度に合わせて決めることが大切です。
  88. 7:08一律の小さな定数を置くだけでは、用途に合うとは限りません。
  89. 7:13活用場面とまとめです。
  90. 7:15マス・サインは、在庫管理以外にも、アクセス件数の前回比較や、目標値に対する過不足の表示に使えます。
  91. 7:23変化量の単位が異なっても、方向をマイナス一、ゼロ、一で扱えば、表示のルールを共有できます。
  92. 7:31ただし、増加と良い変化は別です。
  93. 7:34販売数の増加と障害件数の増加では、意味がまったく異なります。
  94. 7:40数値の分類を行う関数と、指標ごとに評価を行う処理を分けて設計してください。
  95. 7:46マス・サインの結果だけで表示色や評価を決めないことがコツです。
  96. 7:52お疲れさまでした。
  97. 7:53マス・サインは、差分の向きだけを取り出す関数だと覚えておいてください。
  98. 8:00まずはサンプルの在庫数を変えて、三つのケースを自分で確かめてみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

Math.sign()で数値の符号を調べ、差分を増加・減少・変化なしに分類する方法を解説。引数・戻り値、ブラウザーとNode.jsの実行手順、入力検証や小数の誤差への対処を学べます。

解説記事・サンプルコードを読む：JavaScriptのMath.sign()：数値の差分を増加・減少・変化なしに分類する →