SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

JavaScriptのMath.asinh()：正負の差分を保ちながら表示用の値を圧縮するの解説動画

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

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

  1. 0:00こんにちは。
  2. 0:01今回は、ジャバスクリプトのマス・エイシンクを取り上げます。
  3. 0:06これは逆双曲線正弦という値を求める、標準で用意されたメソッドです。
  4. 0:11名前は難しそうですが、使い道は身近です。
  5. 0:15前月と比べてどれだけ増えたか、基準値からどれだけずれたか、といった差のデータには、
  6. 0:20プラスとマイナスとゼロが混ざります。
  7. 0:25そこに飛び抜けて大きな値があると、グラフにしたときに小さな変化が埋もれてしまいます。
  8. 0:32マス・エイシンクを使うと、符号を保ったまま、大きな値ほど伸びを緩やかにできます。
  9. 0:39この動画では、その性質の見方から、検証つきの実例、使うときの注意点までを順番に追っていきます。
  10. 0:47専門用語が出てきたときは、そのつど分かりやすい言葉に言い換えながら進めます。
  11. 0:54まず実行環境を確認します。
  12. 0:55マス・エイシンクはジャバスクリプトの標準組み込みメソッドなので、追加のライブラリーは要りません。
  13. 1:01ブラウザーでもノード・ジェイエスでも使えます。
  14. 1:04ブラウザーなら、開発者ツールのコンソールを開いてコードを貼るだけです。
  15. 1:09ノード・ジェイエスなら、コードをファイルに保存し、ノードにファイル名を渡して実行します。
  16. 1:14この記事のサンプルは、ノード・ジェイエスのバージョン22以降を想定しています。
  17. 1:19古い環境に組み込む場合は、スライドのようにタイプオブで確認しましょう。
  18. 1:23ファンクションという文字列が返れば、その環境は対応しています。
  19. 1:27書き方はシンプルです。
  20. 1:29マス・ドット・エイシンクと書いて、かっこの中に数値を1つ渡します。
  21. 1:35新しいインスタンスを作る必要はなく、いつもこの形で呼び出します。
  22. 1:41試しにいくつか計算してみましょう。
  23. 1:44ゼロを渡すと、ゼロが返ります。
  24. 1:461を渡すと、約0.881374という値です。
  25. 1:50マイナス1を渡すと、符号が逆になったマイナス0.881374が返ります。
  26. 1:56絶対値が同じで符号だけが違う入力は、結果も符号だけが違う、対称な関係になっています。
  27. 2:04なお、引数に文字列などを渡しても自動では変換されないので、呼び出し側であらかじめ数値にしておく必要があります。
  28. 2:13増えた分と減った分を同じ物差しで見られることが、この関数の大切な特徴です。
  29. 2:20次に、値の増え方を見ます。
  30. 2:22入力がゼロに近いところでは、出力は入力とほぼ同じペースで増えます。
  31. 2:27ところが入力が大きくなるにつれて、出力の伸びはだんだん緩やかになります。
  32. 2:34たとえば入力10では約3.0、入力100では約5.3です。
  33. 2:38入力は10倍になっているのに、出力は2倍にもなっていません。
  34. 2:43これが圧縮の正体です。
  35. 2:45小さな変化はそのままの感覚で残し、大きな変化だけを穏やかに抑える。
  36. 2:51しかも符号は変わらないので、増えたのか減ったのかという、向きの情報は失われません。
  37. 2:58入力が小さい領域では圧縮がほとんど働かないため、日常の小さな変動が誇張されてしまうこともありません。
  38. 3:06実務では、生の値をそのまま渡すのではなく、スケールと呼ぶ基準値で割ってから変換します。
  39. 3:13式は、マス・エイシンクかっこ、バリュー割るスケール、です。
  40. 3:18たとえばスケールを100にすると、差分100が入力1として扱われ、ほどよく圧縮が効き始めます。
  41. 3:26スケールを小さくすれば早い段階から圧縮が効き、大きくすれば効き始めが遅くなります。
  42. 3:33どの程度の変化から圧縮を目立たせたいかは、データの単位によって違うので、
  43. 3:38この基準値はデータに合わせて決めます。
  44. 3:43なおスケールは、このメソッド自体の引数ではなく、使う側で用意する設定だという点も覚えておいてください。
  45. 3:51ここからは実例です。
  46. 3:53差分とスケールを受け取って、表示用の値を返す、コンプレスディファレンスという関数を作ります。
  47. 4:01ポイントは、変換そのものよりも前の、入力チェックです。
  48. 4:05まず、値が有限の数値かどうかを、ナンバー・イズ・ファイナイトで確かめます。
  49. 4:11これは文字列を勝手に数値へ変換しないので、文字列が紛れ込んでも見逃しません。
  50. 4:17次に、スケールが正の有限数かを確認します。
  51. 4:21最後に、割り算をした後の商も有限かどうかを確かめてから、マス・エイシンクに渡します。
  52. 4:27条件に合わない入力には例外を投げて、早い段階で止める設計です。
  53. 4:32関数の名前は、差分を圧縮するという役割がそのまま表れています。
  54. 4:37変換関数ができたら、実際のデータに適用します。
  55. 4:41ここではスケールを100に固定して、マイナス1000からプラス1000までの5件の差分を、
  56. 4:46ループで順に変換します。
  57. 4:50結果は、トゥーフィックスドで小数3桁に丸めて表示します。
  58. 4:54ただし、これは見せるための丸めです。
  59. 4:57丸めた時点で値は文字列に変わるので、グラフの座標計算など続きの処理には、
  60. 5:02丸める前の数値を使うようにしてください。
  61. 5:06入力データそのものは書き換えず、表示用の値を別に作る、という役割分担も、
  62. 5:10この実例の大事な考え方です。
  63. 5:145件とも同じスケールで変換しているので、並んだ結果をそのまま見比べられます。
  64. 5:20実行結果を確認しましょう。
  65. 5:22この出力は、実際にノード・ジェイエスで動かして確かめたものです。
  66. 5:27マイナス1000はマイナス2.998、プラス1000はプラス2.998と、
  67. 5:32符号を保ったまま対称に並びました。
  68. 5:36ここで注目したいのは、100と1000の関係です。
  69. 5:40元のデータでは10倍の開きがありますが、変換後の絶対値は0.881と2.998で、
  70. 5:45およそ3.4倍まで詰まっています。
  71. 5:50大きな差が抑えられた分、小さな差の変化もグラフ上で読み取りやすくなります。
  72. 5:56元のデータはそのまま残してあるので、正確な数量が必要な場面では元の値を参照できます。
  73. 6:03関数には、わざと不正な入力も渡してみます。
  74. 6:061つ目は文字列の100です。
  75. 6:08数値の100と見た目は似ていますが、ナンバー・イズ・ファイナイトは文字列を変換しないため、
  76. 6:13有限の数値ではないと判定され、タイプエラーで止まります。
  77. 6:192つ目は、スケールにゼロを渡した場合です。
  78. 6:22ジャバスクリプトの割り算は、ゼロで割っても必ず例外になるわけではありません。
  79. 6:28そこで関数側で明示的に拒否し、レンジエラーを投げています。
  80. 6:32不適切な値が描画処理まで流れていく事故を、入り口で防ぐわけです。
  81. 6:37この2件も実際に動かして、エラーの名前が想定どおりに返ることを確認済みです。
  82. 6:43注意点も押さえておきます。
  83. 6:45いちばん大切なのは、変換後の見た目を元の量と混同しないことです。
  84. 6:49表示上の距離が2倍でも、元データが2倍だとは限りません。
  85. 6:54グラフに使うなら、軸には変換済みであることを示し、具体的な数量はツールチップなどで元の値を併記するのが安全です。
  86. 7:02また、変換後の値がマイナス1から1の範囲に収まる保証はありません。
  87. 7:07描画領域に収めるための座標変換は、別途必要です。
  88. 7:10さらに、この変換は同期処理なので、大量のデータを一度に処理すると画面の操作を妨げることがあります。
  89. 7:18必要な件数で処理時間を確かめてから導入しましょう。
  90. 7:21活用場面としては、地域ごとの人口の増減、在庫の過不足、測定値の基準からのずれなどが考えられます。
  91. 7:30導入のコツは2つです。
  92. 7:321つ目は、同じグラフで比べるデータには共通のスケールを使うこと。
  93. 7:37項目ごとに変えると、同じ値でも表示位置が変わって、比較が崩れてしまいます。
  94. 7:442つ目は、元の値と変換した値、使ったスケールを分けて管理することです。
  95. 7:50まとめると、マス・エイシンクは、正負とゼロを保ちながら大きな差分を穏やかに圧縮できるメソッドです。
  96. 7:58まずはサンプルの数値を自分のデータに置き換えて、圧縮の強さが目的に合うか試してみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

Math.asinh()で負数とゼロを含む差分データを表示用に圧縮する方法を解説。引数・戻り値、ブラウザーとNode.jsの実行手順、期待出力、入力検証と非線形変換の制約を学べます。

解説記事・サンプルコードを読む：JavaScriptのMath.asinh()：正負の差分を保ちながら表示用の値を圧縮する →