WEBVTT

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

2
00:00:00.920 --> 00:00:05.212
今回はジャバスクリプトのマス・エイコッシュを紹介します。

3
00:00:05.212 --> 00:00:11.343
これは逆双曲線余弦を求める関数で、名前は難しく見えますが、考え方はシンプルです。

4
00:00:11.343 --> 00:00:17.014
双曲線余弦で作った曲線の値から、元の入力を逆算する道具だと考えてください。

5
00:00:17.014 --> 00:00:21.690
グラフを描く場面では、横の位置から高さを計算するだけでなく、この高さになる位置はどこか、

6
00:00:21.690 --> 00:00:26.365
と逆向きに知りたいことがあります。

7
00:00:26.365 --> 00:00:31.270
少しずつ探す方法もありますが、この関数を使えば直接計算できます。

8
00:00:31.270 --> 00:00:38.627
この動画では、基本の使い方から、曲線の位置を求める実例、失敗例や精度の注意点まで順に解説します。

9
00:00:38.627 --> 00:00:41.080
数学が苦手でも心配はいりません。

10
00:00:41.080 --> 00:00:44.452
式の意味を一つずつ言葉に直しながら進めます。

11
00:00:44.452 --> 00:00:45.897
まず動作環境です。

12
00:00:45.897 --> 00:00:52.798
マス・エイコッシュはブラウザー専用の機能ではなく、ジャバスクリプトの組み込み関数です。

13
00:00:52.798 --> 00:00:59.860
ブラウザーとノード・ジェイエスの両方で使え、画面要素や外部ライブラリーには依存しません。

14
00:00:59.860 --> 00:01:05.237
主要ブラウザーでは二千十五年七月から広く利用できるとされており、現在のクローム、

15
00:01:05.237 --> 00:01:10.614
エッジ、ファイアフォックス、サファリを対象にできます。

16
00:01:10.614 --> 00:01:16.071
記事のサンプルではノード・ジェイエス二十二系以降を対象にしています。

17
00:01:16.071 --> 00:01:22.973
古い組み込みブラウザーも対象にする場合は、使う前にタイプオブで存在を確認してください。

18
00:01:22.973 --> 00:01:26.504
ファンクションと表示されれば対応しています。

19
00:01:26.504 --> 00:01:28.613
基本の書き方を見ましょう。

20
00:01:28.613 --> 00:01:33.966
マス・ドット・エイコッシュと書き、かっこの中に引数を一つ渡します。

21
00:01:33.966 --> 00:01:37.859
インスタンスは作らず、マスから直接呼び出します。

22
00:01:37.859 --> 00:01:40.779
通常は一以上の数値を渡してください。

23
00:01:40.779 --> 00:01:46.132
戻り値は、双曲線余弦を計算するとその値になる、ゼロ以上の入力です。

24
00:01:46.132 --> 00:01:51.972
具体例では、引数一でゼロ、引数二で約一・三一六九五七八九六九が返ります。

25
00:01:51.972 --> 00:01:57.325
一方、一未満のゼロを渡すと、計算できないことを示すナンが返ります。

26
00:01:57.325 --> 00:01:59.921
無限大を渡すと無限大が返ります。

27
00:01:59.921 --> 00:02:07.707
範囲外でも例外になるとは限らないため、終わったことだけで正しい結果だと判断しないことが大切です。

28
00:02:07.707 --> 00:02:11.763
引数が二つ以上あっても、二つ目以降は使われません。

29
00:02:11.763 --> 00:02:14.196
渡す値は一つに絞ってください。

30
00:02:14.196 --> 00:02:16.465
ここで大切な性質を確認します。

31
00:02:16.465 --> 00:02:21.457
双曲線余弦、コッシュは、正の入力でも負の入力でも同じ値を取ります。

32
00:02:21.457 --> 00:02:27.507
定義式で入力の符号を反転させても、二つの項が入れ替わるだけで結果は変わりません。

33
00:02:27.507 --> 00:02:32.801
そのため、中央から同じ高さになる位置は、通常は左右に二か所存在します。

34
00:02:32.801 --> 00:02:37.339
マス・エイコッシュが返すのは、そのうちゼロ以上の側だけです。

35
00:02:37.339 --> 00:02:43.995
今回の実例では得られた値を右側の位置として扱い、左側が必要なら符号を反転させて求めます。

36
00:02:43.995 --> 00:02:47.928
高さがゼロのときだけ、位置は中央の一か所になります。

37
00:02:47.928 --> 00:02:52.768
この前提を忘れると、左側の位置を取りこぼすので注意してください。

38
00:02:52.768 --> 00:02:55.700
記事の実例で使う曲線を定義します。

39
00:02:55.700 --> 00:03:00.874
高さは、スケール掛ける、コッシュ引く一、という式で表します。

40
00:03:00.874 --> 00:03:09.325
スケールは曲線の形を決める正の値、ポジションは中央からの横方向の位置、ハイトは中央からの高さです。

41
00:03:09.325 --> 00:03:12.084
高さと位置は同じ単位で扱います。

42
00:03:12.084 --> 00:03:16.913
この式を変形すると、右側の位置は、スケール掛ける、マス・エイコッシュの一足すハイト割るスケール、

43
00:03:16.913 --> 00:03:21.743
で求められます。

44
00:03:21.743 --> 00:03:28.986
数値探索のように刻み幅を決める必要がなく、計算の目的がコードにも表れるのが利点です。

45
00:03:28.986 --> 00:03:36.230
ただし、どんな曲線でも逆算できるわけではなく、式が双曲線余弦で表せる場合に限ります。

46
00:03:36.230 --> 00:03:42.956
この考え方は、吊り橋のケーブルの形など、垂れ下がる曲線の計算にもつながります。

47
00:03:42.956 --> 00:03:46.154
完成サンプルの中心となる関数を見ましょう。

48
00:03:46.154 --> 00:03:53.006
ライトポジションアットハイトという関数は、高さとスケールを受け取り、右側の位置を返します。

49
00:03:53.006 --> 00:03:54.376
まず入力検証です。

50
00:03:54.376 --> 00:04:02.598
高さはゼロ以上の有限数、スケールはゼロより大きい有限数に限定し、条件を満たさなければレンジエラーを投げます。

51
00:04:02.598 --> 00:04:09.146
次に、一足す高さ割るスケール、という中間の値を計算し、それが有限かどうかも確認します。

52
00:04:09.146 --> 00:04:15.998
最後にマス・エイコッシュで逆算し、スケールを掛けた結果も有限かどうか確かめてから返します。

53
00:04:15.998 --> 00:04:20.870
途中の値まで確認することで、大きすぎる入力を早めに検出できます。

54
00:04:20.870 --> 00:04:26.504
検証を関数の中にまとめておくと、呼び出し側は計算結果の利用に集中できます。

55
00:04:26.504 --> 00:04:29.221
期待出力を確認しましょう。

56
00:04:29.221 --> 00:04:34.863
スケールを十に固定し、高さゼロ、十、十五で計算します。

57
00:04:34.863 --> 00:04:45.312
高さゼロでは位置はゼロ・ゼロゼロゼロ、高さ十では十三・一七ゼロ、高さ十五では十五・六六八となります。

58
00:04:45.312 --> 00:04:55.969
高さ十のとき、引数は一足す十割る十で二になり、その逆双曲線余弦に十を掛けると約十三・一六九五七九です。

59
00:04:55.969 --> 00:05:02.448
高さ十五では引数が二・五になり、約十五・六六七九九二を得ます。

60
00:05:02.448 --> 00:05:10.389
表示のときだけ小数点以下三桁に丸めており、関数の戻り値自体は丸めていません。

61
00:05:10.389 --> 00:05:17.076
最後に高さマイナス一を渡すと、検証でレンジエラーが表示されます。

62
00:05:17.076 --> 00:05:19.460
失敗例も確認しておきましょう。

63
00:05:19.460 --> 00:05:25.023
マス・エイコッシュにゼロ・五のような一未満の値を渡すとナンになります。

64
00:05:25.023 --> 00:05:29.474
サンプルでは、高さが負なら計算の前に例外へ変えています。

65
00:05:29.474 --> 00:05:34.878
ここで注意したいのは、範囲外の値を無条件に一へ置き換えないことです。

66
00:05:34.878 --> 00:05:41.077
そうすると誤った入力から中央の位置が返ってしまい、原因を見つけにくくなります。

67
00:05:41.077 --> 00:05:45.369
また、文字列の十は、サンプルの関数では受け付けません。

68
00:05:45.369 --> 00:05:49.740
フォームからの入力は文字列になるため、呼び出す側で空欄かどうかを確認し、

69
00:05:49.740 --> 00:05:54.111
数値へ変換してから渡す設計が必要です。

70
00:05:54.111 --> 00:05:57.767
検証と変換は呼び出し側の責任と覚えてください。

71
00:05:57.767 --> 00:06:01.701
極端な値では精度が失われる点にも注意が必要です。

72
00:06:01.701 --> 00:06:06.044
入力がどちらも有限数でも、高さ割るスケールや最後の掛け算が大きすぎれば、

73
00:06:06.044 --> 00:06:10.388
結果が無限大になる場合があります。

74
00:06:10.388 --> 00:06:15.141
サンプルは途中と最後の値を確認して、その状態を検出します。

75
00:06:15.141 --> 00:06:22.845
一方、その比が極端に小さい場合は、一を足した時点で丸められて一になってしまう可能性があります。

76
00:06:22.845 --> 00:06:30.877
その場合、正の高さでも結果がゼロになってしまい、有限数かどうかの確認だけでは精度を保証できません。

77
00:06:30.877 --> 00:06:37.925
扱う値の範囲をあらかじめ決め、境界付近では必要な誤差に収まるかを別途評価してください。

78
00:06:37.925 --> 00:06:40.875
比較では許容誤差を使うのが基本です。

79
00:06:40.875 --> 00:06:42.727
処理の性質と活用場面です。

80
00:06:42.727 --> 00:06:50.419
この計算は同期処理なので、プロミスやアウェイトは不要で、入力エラーは呼び出し元のトライ・キャッチで扱えます。

81
00:06:50.419 --> 00:06:55.120
大量の点を処理する場合は、同期処理が続く時間にも配慮してください。

82
00:06:55.120 --> 00:07:00.675
活用できるのは、曲線の式があらかじめ決まっているグラフ教材や可視化ツールです。

83
00:07:00.675 --> 00:07:07.370
利用者が高さを指定したときに、対応する左右の位置へマーカーを置く、といった操作を実装できます。

84
00:07:07.370 --> 00:07:13.923
関数は右側の位置だけを返すため、画面表示や単位の付与、左右の選択は呼び出し側で決められます。

85
00:07:13.923 --> 00:07:16.914
役割を分けることで再利用しやすくなります。

86
00:07:16.914 --> 00:07:18.728
最後にまとめと改善案です。

87
00:07:18.728 --> 00:07:27.937
次に改善するなら、入力欄の検証と表示用の丸めを計算部分から分離すると、ブラウザーとノード・ジェイエスで同じ計算を使いやすくなります。

88
00:07:27.937 --> 00:07:34.635
マス・エイコッシュは、双曲線余弦で作った曲線について、高さからゼロ以上の入力を逆算する関数です。

89
00:07:34.635 --> 00:07:41.891
引数は一以上が有効範囲で、一未満ではナンになること、左右対称のため右側だけが返ることを押さえてください。

90
00:07:41.891 --> 00:07:45.240
ただし任意の曲線を逆算できる関数ではありません。

91
00:07:45.240 --> 00:07:50.403
まず対象の式が双曲線余弦で表せるかを確認し、適用できる場合に使いましょう。

92
00:07:50.403 --> 00:07:54.310
まずは期待出力と手元の計算を比べて確かめてみてください。

93
00:07:54.310 --> 00:07:55.565
お疲れさまでした。

94
00:07:55.565 --> 00:08:01.147
コードを写して終わりにせず、スケールや高さを変えて結果の変化も確かめてください。