VIDEO LESSON

JavaScriptのMath.log2():2倍と半分を対称な数値で比較するの解説動画

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

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

  1. 0:00こんにちは。
  2. 0:00今回はジャバスクリプトのマス・ログ・ツーを紹介します。
  3. 0:04これは、数値を底が二の対数へ変換する、組み込みのメソッドです。
  4. 0:09たとえば処理時間が百ミリ秒から二百ミリ秒になれば二倍、五十ミリ秒になれば半分です。
  5. 0:15倍率をそのまま並べると二とゼロ点五になり、変化なしを表す一からの距離がそろいません。
  6. 0:22マス・ログ・ツーを使うと、二倍は一、変化なしはゼロ、半分はマイナス一に変換できます。
  7. 0:28四倍なら二、四分の一ならマイナス二です。
  8. 0:31この動画では、処理時間の比較を題材に、基本の書き方から入力検証、失敗しやすい注意点まで順に解説します。
  9. 0:39まず動作環境です。
  10. 0:40マス・ログ・ツーはジャバスクリプト標準の組み込みメソッドで、ブラウザーとノード・ジェイエスの両方で利用できます。
  11. 0:48二千十五年七月からブラウザー間で広く利用できる機能とされており、現在のクローム、
  12. 0:53エッジ、ファイアフォックス、サファリを対象にできます。
  13. 0:58ドムや外部ライブラリーには依存せず、インポートも不要です。
  14. 1:02記事のサンプルは、ブラウザーの現行版、またはノード・ジェイエス二十二以降を想定しています。
  15. 1:09これはサンプル全体の対象であり、このメソッド自体が二十二で追加されたという意味ではありません。
  16. 1:16古い環境では、タイプオブで関数かどうかを確認できます。
  17. 1:20基本の書き方を見ましょう。
  18. 1:22呼び出し方はマス・ログ・ツー、かっこ、エックスです。
  19. 1:26引数は一つだけで、対数を求める数値を渡します。
  20. 1:30戻り値は数値型で、二を何乗するとエックスになるかを表します。
  21. 1:35たとえば二の三乗は八なので、マス・ログ・ツー八の結果は三です。
  22. 1:40二なら一、一ならゼロになります。
  23. 1:43マスはコンストラクターではないため、インスタンスを作る必要はなく、マスに直接呼びかける静的メソッドとして使います。
  24. 1:52処理は同期的で、プロミスやアウェイトは不要です。
  25. 1:56まずは、この何乗という考え方を押さえてください。
  26. 2:00引数の順番で迷うこともなく、読み返したときに意図が伝わりやすい書き方です。
  27. 2:06値の範囲と特別な結果を確認します。
  28. 2:09エックスが一なら戻り値はゼロです。
  29. 2:11一より大きければ戻り値は正になり、ゼロより大きく一未満なら戻り値は負になります。
  30. 2:18ここが、半分や四分の一がマイナスの値になる理由です。
  31. 2:22エックスがゼロ、またはマイナスゼロなら、戻り値はマイナス無限大です。
  32. 2:27エックスが負の数なら、戻り値はナンになります。
  33. 2:31エックスが無限大なら、戻り値も無限大です。
  34. 2:34注意したいのは、負数を渡しても、そのことだけで例外にはならない点です。
  35. 2:40業務で受け付けない値は、呼び出す側で先に検証する必要があります。
  36. 2:45この対応表は、入力チェックの条件を決めるときの基準にもなりますので、表として手元に残しておくと便利です。
  37. 2:53倍率を対数に変える考え方です。
  38. 2:56完成例では、以前の処理時間と現在の処理時間から、まず倍率を求めます。
  39. 3:02倍率は、現在の値を以前の値で割ったものです。
  40. 3:06百ミリ秒から二百ミリ秒なら倍率は二で、その対数は一です。
  41. 3:12百ミリ秒から五十ミリ秒なら倍率はゼロ点五で、その対数はマイナス一です。
  42. 3:19このように、現在の時間が長くなると結果は正、短くなると負になります。
  43. 3:25ただし元の処理時間も残すことが大切です。
  44. 3:29変化の大きさを表す対数と、実際の待ち時間は別の情報なので、両方を確認できる形にしましょう。
  45. 3:38掛け算で表していた変化を、足し算で比べられる尺度へ置き換えることが、この変換の狙いです。
  46. 3:46ここからは完成例です。
  47. 3:48コンペア・デュレーションという関数は、以前と現在の処理時間を受け取り、倍率と対数をまとめて返します。
  48. 3:56最初に、二つの値が数値型で、かつ有限かどうかを確かめ、問題があればタイプエラーを投げます。
  49. 4:03次に、ゼロ以下でないかを確かめ、ゼロ以下ならレンジエラーを投げます。
  50. 4:09入力は有限の正の数値に限定する設計です。
  51. 4:12検証を通ったら、現在の値を以前の値で割って倍率を求め、割り算の結果も有限で正かどうかを確認してから、
  52. 4:18マス・ログ・ツーで対数を計算します。
  53. 4:23検証と計算を一つの関数にまとめた形です。
  54. 4:27期待出力を読みましょう。
  55. 4:29以前の処理時間を百ミリ秒として、五つのケースを試します。
  56. 4:33変化なしは倍率一、対数ゼロです。
  57. 4:35二倍は倍率二、対数一、半分は倍率ゼロ点五、対数マイナス一になります。
  58. 4:40四倍は対数二、四分の一は対数マイナス二です。
  59. 4:44ゼロを渡した不正な入力のケースでは、レンジエラーとしてメッセージが表示されます。
  60. 4:50これらの出力は、ノード・ジェイエスの実機でも記事の期待出力と完全に一致することを確認済みです。
  61. 4:57プラスとマイナスが対称に並ぶ様子を見ると、対数に変える利点がはっきりします。
  62. 5:03符号と大きさの両方を見ることで、増えた変化と減った変化を同じ物差しで並べられます。
  63. 5:09よくある失敗が、例外処理だけに頼ることです。
  64. 5:12マス・ログ・ツーにマイナス八を渡すコードを、トライとキャッチで囲んでも、
  65. 5:16例外は発生しません。
  66. 5:19結果はナンとしてそのまま表示され、キャッチの処理には入りません。
  67. 5:24キャッチへ入ることを前提にしていると、不正な計算結果が後続の処理へ流れてしまいます。
  68. 5:31完成例が、型、有限性、正数という条件を先に確認していたのは、この問題を防ぐためです。
  69. 5:37文字列の百も完成例では拒否し、入力形式の誤りを見逃さない設計にしています。
  70. 5:43計算の前に検証する、という順番を覚えてください。
  71. 5:46ゼロと割り算の注意点です。
  72. 5:48処理時間がゼロだった場合、完成例はレンジエラーにします。
  73. 5:52ゼロを小さな正数へ置き換えれば計算はできますが、選んだ数によって結果が大きく変わってしまいます。
  74. 6:00計測の分解能より短かった値なのか、欠けたデータをゼロで表しているのかを確認し、
  75. 6:04別の状態として扱うほうが判断しやすくなります。
  76. 6:09また、有限の正数どうしでも、極端な値を割ると倍率が無限大になったり、非常に小さくなってゼロになったりします。
  77. 6:17完成例が割り算の後も検証するのはそのためです。
  78. 6:20計算結果は近似値になる点にも注意し、判定には丸める前の値を使ってください。
  79. 6:26結果の読み方を間違えないことも大切です。
  80. 6:29ログ・レイシオが二だからといって、処理時間が二ミリ秒増えたわけではありません。
  81. 6:34基準の四倍になった、という意味です。
  82. 6:37単位の付いた差分と、対数による倍率は、別の情報として扱ってください。
  83. 6:42もう一つ、評価の向きにも注意が必要です。
  84. 6:44この例では現在の時間を以前の時間で割るため、正の方向が遅延の増加を意味します。
  85. 6:50処理件数のように大きいほうが望ましい指標では、評価の向きが変わります。
  86. 6:55画面には指標の意味を明記し、表示用に小数桁をそろえる場合も、判定には丸める前の値を使うようにしましょう。
  87. 7:03活用場面とまとめです。
  88. 7:04マス・ログ・ツーは、同じ種類の処理について、変更前後の所要時間を比較するレポートに使えます。
  89. 7:13二倍と半分、四倍と四分の一を対称に表せるため、基準からの相対的な変化を並べやすくなります。
  90. 7:21ただし、元の値の重要性は残ります。
  91. 7:24一ミリ秒から二ミリ秒への変化と、一秒から二秒への変化は、対数ではどちらも一ですが、
  92. 7:30利用者への影響まで同じとは判断できません。
  93. 7:35実務へ導入するなら、最初は元の処理時間、倍率、対数の三つを併記し、比較条件をそろえた小さなレポートで試すのがおすすめです。
  94. 7:46お疲れさまでした。
  95. 7:48まずは、二倍が一、半分がマイナス一という対応を覚えてください。
日本語字幕をダウンロード(WebVTT)

この動画で学べること

Math.log2()で倍率を比較し、2倍と半分を対称な値に変換する方法を解説。引数・戻り値、ブラウザーとNode.jsでの実行手順、入力検証や計算精度の注意点を学べます。

解説記事・サンプルコードを読む:JavaScriptのMath.log2():2倍と半分を対称な数値で比較する →