WEBVTT

1
00:00:00.000 --> 00:00:01.035
こんにちは。

2
00:00:01.035 --> 00:00:06.038
今回は、ジャバスクリプトのマス・エイシンクを取り上げます。

3
00:00:06.038 --> 00:00:11.732
これは逆双曲線正弦という値を求める、標準で用意されたメソッドです。

4
00:00:11.732 --> 00:00:15.182
名前は難しそうですが、使い道は身近です。

5
00:00:15.182 --> 00:00:20.271
前月と比べてどれだけ増えたか、基準値からどれだけずれたか、といった差のデータには、

6
00:00:20.271 --> 00:00:25.361
プラスとマイナスとゼロが混ざります。

7
00:00:25.361 --> 00:00:32.607
そこに飛び抜けて大きな値があると、グラフにしたときに小さな変化が埋もれてしまいます。

8
00:00:32.607 --> 00:00:39.508
マス・エイシンクを使うと、符号を保ったまま、大きな値ほど伸びを緩やかにできます。

9
00:00:39.508 --> 00:00:47.616
この動画では、その性質の見方から、検証つきの実例、使うときの注意点までを順番に追っていきます。

10
00:00:47.616 --> 00:00:54.172
専門用語が出てきたときは、そのつど分かりやすい言葉に言い換えながら進めます。

11
00:00:54.172 --> 00:00:55.799
まず実行環境を確認します。

12
00:00:55.799 --> 00:01:01.804
マス・エイシンクはジャバスクリプトの標準組み込みメソッドなので、追加のライブラリーは要りません。

13
00:01:01.804 --> 00:01:04.682
ブラウザーでもノード・ジェイエスでも使えます。

14
00:01:04.682 --> 00:01:09.061
ブラウザーなら、開発者ツールのコンソールを開いてコードを貼るだけです。

15
00:01:09.061 --> 00:01:14.566
ノード・ジェイエスなら、コードをファイルに保存し、ノードにファイル名を渡して実行します。

16
00:01:14.566 --> 00:01:19.446
この記事のサンプルは、ノード・ジェイエスのバージョン22以降を想定しています。

17
00:01:19.446 --> 00:01:23.825
古い環境に組み込む場合は、スライドのようにタイプオブで確認しましょう。

18
00:01:23.825 --> 00:01:27.704
ファンクションという文字列が返れば、その環境は対応しています。

19
00:01:27.704 --> 00:01:29.633
書き方はシンプルです。

20
00:01:29.633 --> 00:01:35.420
マス・ドット・エイシンクと書いて、かっこの中に数値を1つ渡します。

21
00:01:35.420 --> 00:01:41.032
新しいインスタンスを作る必要はなく、いつもこの形で呼び出します。

22
00:01:41.032 --> 00:01:44.014
試しにいくつか計算してみましょう。

23
00:01:44.014 --> 00:01:46.644
ゼロを渡すと、ゼロが返ります。

24
00:01:46.644 --> 00:01:50.503
1を渡すと、約0.881374という値です。

25
00:01:50.503 --> 00:01:56.816
マイナス1を渡すと、符号が逆になったマイナス0.881374が返ります。

26
00:01:56.816 --> 00:02:04.182
絶対値が同じで符号だけが違う入力は、結果も符号だけが違う、対称な関係になっています。

27
00:02:04.182 --> 00:02:13.827
なお、引数に文字列などを渡しても自動では変換されないので、呼び出し側であらかじめ数値にしておく必要があります。

28
00:02:13.827 --> 00:02:20.316
増えた分と減った分を同じ物差しで見られることが、この関数の大切な特徴です。

29
00:02:20.316 --> 00:02:22.487
次に、値の増え方を見ます。

30
00:02:22.487 --> 00:02:27.997
入力がゼロに近いところでは、出力は入力とほぼ同じペースで増えます。

31
00:02:27.997 --> 00:02:34.008
ところが入力が大きくなるにつれて、出力の伸びはだんだん緩やかになります。

32
00:02:34.008 --> 00:02:38.850
たとえば入力10では約3.0、入力100では約5.3です。

33
00:02:38.850 --> 00:02:43.859
入力は10倍になっているのに、出力は2倍にもなっていません。

34
00:02:43.859 --> 00:02:45.696
これが圧縮の正体です。

35
00:02:45.696 --> 00:02:51.206
小さな変化はそのままの感覚で残し、大きな変化だけを穏やかに抑える。

36
00:02:51.206 --> 00:02:58.051
しかも符号は変わらないので、増えたのか減ったのかという、向きの情報は失われません。

37
00:02:58.051 --> 00:03:06.400
入力が小さい領域では圧縮がほとんど働かないため、日常の小さな変動が誇張されてしまうこともありません。

38
00:03:06.400 --> 00:03:13.768
実務では、生の値をそのまま渡すのではなく、スケールと呼ぶ基準値で割ってから変換します。

39
00:03:13.768 --> 00:03:18.737
式は、マス・エイシンクかっこ、バリュー割るスケール、です。

40
00:03:18.737 --> 00:03:26.791
たとえばスケールを100にすると、差分100が入力1として扱われ、ほどよく圧縮が効き始めます。

41
00:03:26.791 --> 00:03:33.817
スケールを小さくすれば早い段階から圧縮が効き、大きくすれば効き始めが遅くなります。

42
00:03:33.817 --> 00:03:38.529
どの程度の変化から圧縮を目立たせたいかは、データの単位によって違うので、

43
00:03:38.529 --> 00:03:43.241
この基準値はデータに合わせて決めます。

44
00:03:43.241 --> 00:03:51.980
なおスケールは、このメソッド自体の引数ではなく、使う側で用意する設定だという点も覚えておいてください。

45
00:03:51.980 --> 00:03:53.605
ここからは実例です。

46
00:03:53.605 --> 00:04:01.080
差分とスケールを受け取って、表示用の値を返す、コンプレスディファレンスという関数を作ります。

47
00:04:01.080 --> 00:04:05.468
ポイントは、変換そのものよりも前の、入力チェックです。

48
00:04:05.468 --> 00:04:11.480
まず、値が有限の数値かどうかを、ナンバー・イズ・ファイナイトで確かめます。

49
00:04:11.480 --> 00:04:17.655
これは文字列を勝手に数値へ変換しないので、文字列が紛れ込んでも見逃しません。

50
00:04:17.655 --> 00:04:21.068
次に、スケールが正の有限数かを確認します。

51
00:04:21.068 --> 00:04:27.893
最後に、割り算をした後の商も有限かどうかを確かめてから、マス・エイシンクに渡します。

52
00:04:27.893 --> 00:04:32.930
条件に合わない入力には例外を投げて、早い段階で止める設計です。

53
00:04:32.930 --> 00:04:37.968
関数の名前は、差分を圧縮するという役割がそのまま表れています。

54
00:04:37.968 --> 00:04:41.585
変換関数ができたら、実際のデータに適用します。

55
00:04:41.585 --> 00:04:46.067
ここではスケールを100に固定して、マイナス1000からプラス1000までの5件の差分を、

56
00:04:46.067 --> 00:04:50.549
ループで順に変換します。

57
00:04:50.549 --> 00:04:54.952
結果は、トゥーフィックスドで小数3桁に丸めて表示します。

58
00:04:54.952 --> 00:04:57.783
ただし、これは見せるための丸めです。

59
00:04:57.783 --> 00:05:02.186
丸めた時点で値は文字列に変わるので、グラフの座標計算など続きの処理には、

60
00:05:02.186 --> 00:05:06.589
丸める前の数値を使うようにしてください。

61
00:05:06.589 --> 00:05:10.521
入力データそのものは書き換えず、表示用の値を別に作る、という役割分担も、

62
00:05:10.521 --> 00:05:14.452
この実例の大事な考え方です。

63
00:05:14.452 --> 00:05:20.428
5件とも同じスケールで変換しているので、並んだ結果をそのまま見比べられます。

64
00:05:20.428 --> 00:05:22.558
実行結果を確認しましょう。

65
00:05:22.558 --> 00:05:27.802
この出力は、実際にノード・ジェイエスで動かして確かめたものです。

66
00:05:27.802 --> 00:05:32.227
マイナス1000はマイナス2.998、プラス1000はプラス2.998と、

67
00:05:32.227 --> 00:05:36.652
符号を保ったまま対称に並びました。

68
00:05:36.652 --> 00:05:40.749
ここで注目したいのは、100と1000の関係です。

69
00:05:40.749 --> 00:05:45.501
元のデータでは10倍の開きがありますが、変換後の絶対値は0.881と2.998で、

70
00:05:45.501 --> 00:05:50.254
およそ3.4倍まで詰まっています。

71
00:05:50.254 --> 00:05:56.317
大きな差が抑えられた分、小さな差の変化もグラフ上で読み取りやすくなります。

72
00:05:56.317 --> 00:06:03.200
元のデータはそのまま残してあるので、正確な数量が必要な場面では元の値を参照できます。

73
00:06:03.200 --> 00:06:06.363
関数には、わざと不正な入力も渡してみます。

74
00:06:06.363 --> 00:06:08.471
1つ目は文字列の100です。

75
00:06:08.471 --> 00:06:13.968
数値の100と見た目は似ていますが、ナンバー・イズ・ファイナイトは文字列を変換しないため、

76
00:06:13.968 --> 00:06:19.465
有限の数値ではないと判定され、タイプエラーで止まります。

77
00:06:19.465 --> 00:06:22.628
2つ目は、スケールにゼロを渡した場合です。

78
00:06:22.628 --> 00:06:28.350
ジャバスクリプトの割り算は、ゼロで割っても必ず例外になるわけではありません。

79
00:06:28.350 --> 00:06:32.718
そこで関数側で明示的に拒否し、レンジエラーを投げています。

80
00:06:32.718 --> 00:06:37.537
不適切な値が描画処理まで流れていく事故を、入り口で防ぐわけです。

81
00:06:37.537 --> 00:06:43.260
この2件も実際に動かして、エラーの名前が想定どおりに返ることを確認済みです。

82
00:06:43.260 --> 00:06:45.191
注意点も押さえておきます。

83
00:06:45.191 --> 00:06:49.944
いちばん大切なのは、変換後の見た目を元の量と混同しないことです。

84
00:06:49.944 --> 00:06:54.103
表示上の距離が2倍でも、元データが2倍だとは限りません。

85
00:06:54.103 --> 00:07:02.421
グラフに使うなら、軸には変換済みであることを示し、具体的な数量はツールチップなどで元の値を併記するのが安全です。

86
00:07:02.421 --> 00:07:07.323
また、変換後の値がマイナス1から1の範囲に収まる保証はありません。

87
00:07:07.323 --> 00:07:10.888
描画領域に収めるための座標変換は、別途必要です。

88
00:07:10.888 --> 00:07:18.167
さらに、この変換は同期処理なので、大量のデータを一度に処理すると画面の操作を妨げることがあります。

89
00:07:18.167 --> 00:07:21.880
必要な件数で処理時間を確かめてから導入しましょう。

90
00:07:21.880 --> 00:07:30.217
活用場面としては、地域ごとの人口の増減、在庫の過不足、測定値の基準からのずれなどが考えられます。

91
00:07:30.217 --> 00:07:32.128
導入のコツは2つです。

92
00:07:32.128 --> 00:07:37.686
1つ目は、同じグラフで比べるデータには共通のスケールを使うこと。

93
00:07:37.686 --> 00:07:44.112
項目ごとに変えると、同じ値でも表示位置が変わって、比較が崩れてしまいます。

94
00:07:44.112 --> 00:07:50.191
2つ目は、元の値と変換した値、使ったスケールを分けて管理することです。

95
00:07:50.191 --> 00:07:58.702
まとめると、マス・エイシンクは、正負とゼロを保ちながら大きな差分を穏やかに圧縮できるメソッドです。

96
00:07:58.702 --> 00:08:06.692
まずはサンプルの数値を自分のデータに置き換えて、圧縮の強さが目的に合うか試してみてください。