WEBVTT

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

2
00:00:00.955 --> 00:00:05.254
今回はジャバスクリプトのマス・タンエイチを紹介します。

3
00:00:05.254 --> 00:00:09.871
これは、数値の双曲線正接を求める、組み込みの計算関数です。

4
00:00:09.871 --> 00:00:14.728
ドラッグ操作やポインターに反応する演出では、入力をそのまま移動量にすると、

5
00:00:14.728 --> 00:00:19.584
操作が大きいほど要素が遠くまで動いてしまいます。

6
00:00:19.584 --> 00:00:24.997
かといって、境界で突然打ち切ると、上限の近くで反応が急に変わります。

7
00:00:24.997 --> 00:00:34.072
マス・タンエイチは、ゼロ付近では入力の変化を比較的よく伝えながら、絶対値が大きくなるほど出力の変化を小さくします。

8
00:00:34.072 --> 00:00:39.406
この動画では、正負の入力を最大およそ四十ピクセルの移動量へ変換する例を中心に、

9
00:00:39.406 --> 00:00:44.740
基本、計算の読み方、失敗しやすい注意点の順に解説します。

10
00:00:44.740 --> 00:00:46.093
まず動作環境です。

11
00:00:46.093 --> 00:00:52.710
マス・タンエイチは、二千十五年七月以降、ブラウザー間で広く利用できる機能とされています。

12
00:00:52.710 --> 00:00:57.523
現在のクローム、エッジ、ファイアフォックス、サファリで使えます。

13
00:00:57.523 --> 00:01:01.733
ノード・ジェイエスでも、追加パッケージなしで動作します。

14
00:01:01.733 --> 00:01:09.704
ドムや外部ライブラリーを使わないため、同じ計算コードをブラウザーとノード・ジェイエスの両方で利用できます。

15
00:01:09.704 --> 00:01:16.922
古い組み込みブラウザーを対象に含める場合は、タイプオブで関数として存在するかを確認してください。

16
00:01:16.922 --> 00:01:23.840
記事の確認日は二千二十六年十月二十四日で、ノード・ジェイエスの対象は二十二系と二十四系です。

17
00:01:23.840 --> 00:01:26.219
基本の書き方を見ましょう。

18
00:01:26.219 --> 00:01:35.370
マス・タンエイチは、マスオブジェクトの静的メソッドなので、マスのインスタンスを作る必要はありません。

19
00:01:35.370 --> 00:01:40.494
いつもマス・タンエイチ、かっこ、という形で呼び出します。

20
00:01:40.494 --> 00:01:45.253
引数は、双曲線正接を求めたい数値を一つだけ渡します。

21
00:01:45.253 --> 00:01:48.181
戻り値は計算結果を表す数値です。

22
00:01:48.181 --> 00:01:55.868
たとえば入力がゼロなら結果はゼロ、入力が一なら結果はおよそゼロ点七六一六になります。

23
00:01:55.868 --> 00:02:00.626
入力がゼロ点五なら、結果はおよそゼロ点四六二一です。

24
00:02:00.626 --> 00:02:09.228
入力の符号は結果にもそのまま現れるので、正の入力には正の結果、負の入力には負の結果が返ります。

25
00:02:09.228 --> 00:02:11.461
出力の範囲を押さえましょう。

26
00:02:11.461 --> 00:02:18.956
数学の上では、有限の入力に対する結果は、マイナス一より大きく、一より小さい範囲におさまります。

27
00:02:18.956 --> 00:02:25.016
入力の絶対値が大きくなるほど、結果は一、またはマイナス一へ近づいていきます。

28
00:02:25.016 --> 00:02:26.929
ただし注意点があります。

29
00:02:26.929 --> 00:02:34.265
ジャバスクリプトの数値は、倍精度の浮動小数点数で表されるため、計算には精度の限界があります。

30
00:02:34.265 --> 00:02:41.441
十分に大きな有限の入力では、丸めによって結果がちょうど一やマイナス一になることがあります。

31
00:02:41.441 --> 00:02:45.906
スライドの例でも、入力が二十だと結果は一になっています。

32
00:02:45.906 --> 00:02:51.328
有限の値なら端には絶対に届かない、という判定には使わないでください。

33
00:02:51.328 --> 00:02:53.864
特別な値の扱いも確認しておきましょう。

34
00:02:53.864 --> 00:02:58.804
入力がゼロのときはゼロが返り、マイナスゼロのときはマイナスゼロが返ります。

35
00:02:58.804 --> 00:03:01.474
符号付きのゼロが区別される点が特徴です。

36
00:03:01.474 --> 00:03:05.479
入力が正の無限大なら一、負の無限大ならマイナス一が返ります。

37
00:03:05.479 --> 00:03:09.484
入力が数値ではないことを示すナンなら、結果もナンになります。

38
00:03:09.484 --> 00:03:15.491
実務のコードでは、こうした特別な値をそのまま通してよいのかを先に決めておくことが大切です。

39
00:03:15.491 --> 00:03:22.700
このあとの実例では、有限ではない入力をエラーとして扱い、想定外の値が移動量に化けてしまうことを防いでいます。

40
00:03:22.700 --> 00:03:24.321
ここからは実例です。

41
00:03:24.321 --> 00:03:29.346
入力を移動量へ変換する、トューオフセットという関数を考えます。

42
00:03:29.346 --> 00:03:36.479
この関数は、まず入力が有限の数値かどうかを確かめ、有限でなければタイプエラーを投げます。

43
00:03:36.479 --> 00:03:44.423
スケールとリミットについても、正の有限の数値かどうかを確かめ、問題があればレンジエラーを投げます。

44
00:03:44.423 --> 00:03:51.718
そのうえで、入力をスケールで割り、マス・タンエイチを通し、最後にリミットを掛けて返します。

45
00:03:51.718 --> 00:03:59.985
計算そのものは一行ですが、その前の検証が、設定ミスや入力ミスを静かに飲み込まないための大切な部分です。

46
00:03:59.985 --> 00:04:04.200
処理はすべて同期的で、非同期の待ち合わせは不要です。

47
00:04:04.200 --> 00:04:06.193
期待出力を読みましょう。

48
00:04:06.193 --> 00:04:13.832
入力が百のとき、スケールで割ると一になり、マス・タンエイチの結果はおよそゼロ点七六一六です。

49
00:04:13.832 --> 00:04:19.479
これにリミットの四十を掛けると、およそ三十点四六ピクセルになります。

50
00:04:19.479 --> 00:04:27.450
入力が三百になっても、結果はおよそ三十九点八十ピクセルにとどまり、四十を超えることはありません。

51
00:04:27.450 --> 00:04:31.768
負の入力では、符号を保ったまま同じ大きさが返ります。

52
00:04:31.768 --> 00:04:39.075
また、文字列の百を渡すとタイプエラー、スケールにゼロを渡すとレンジエラーが表示されます。

53
00:04:39.075 --> 00:04:45.220
これらの出力は、ノード・ジェイエスの実機でも同じになることを確認済みです。

54
00:04:45.220 --> 00:04:46.705
調整の考え方です。

55
00:04:46.705 --> 00:04:50.501
リミットは、出力の上限の大きさを決める値です。

56
00:04:50.501 --> 00:04:55.287
まず許容できる最大の移動量としてリミットを決めてください。

57
00:04:55.287 --> 00:04:57.432
次にスケールを調整します。

58
00:04:57.432 --> 00:05:02.795
スケールは反応の強さを決める値で、小さくすると小さな入力でも上限へ早く近づき、

59
00:05:02.795 --> 00:05:08.159
大きくすると同じ入力に対する移動量が小さくなります。

60
00:05:08.159 --> 00:05:13.935
ゼロ付近の感度は、おおよそリミットをスケールで割った値で考えられます。

61
00:05:13.935 --> 00:05:21.856
この例ではおよそゼロ点四なので、非常に小さな入力では、入力のおよそゼロ点四倍が移動量になります。

62
00:05:21.856 --> 00:05:27.632
上限と感度を別々の設定として持つと、調整の意図を説明しやすくなります。

63
00:05:27.632 --> 00:05:30.681
注意点の一つ目は、暗黙の型変換です。

64
00:05:30.681 --> 00:05:35.764
マス・タンエイチ自体は、引数を数値へ変換してから計算します。

65
00:05:35.764 --> 00:05:44.404
そのため、数値の文字列はそのまま計算され、ヌルはゼロとして扱われ、アンディファインドはナンになります。

66
00:05:44.404 --> 00:05:51.689
入力ミスを検出したい処理では、この動作をそのまま受け入れると、問題が隠れてしまいます。

67
00:05:51.689 --> 00:05:58.635
また、ビッグイントやシンボルを渡すと、数値への変換ができずタイプエラーになります。

68
00:05:58.635 --> 00:06:02.532
実例のトューオフセットが、有限の数値だけを受け付けて文字列も拒否しているのは、

69
00:06:02.532 --> 00:06:06.428
このためです。

70
00:06:06.428 --> 00:06:14.052
フォーム入力を使う場合は、呼び出す前に空欄を確認し、数値へ変換したうえで検証してください。

71
00:06:14.052 --> 00:06:16.693
注意点の二つ目は、設定値の扱いです。

72
00:06:16.693 --> 00:06:22.123
スケールがゼロだと、ゼロ以外の入力を割った結果は、正負の無限大になります。

73
00:06:22.123 --> 00:06:29.167
するとマス・タンエイチの結果が端点になり、設定ミスなのに正常に制限できたように見えてしまいます。

74
00:06:29.167 --> 00:06:36.211
実例のコードが、スケールとリミットを正の有限の数値かどうか先に確認している理由はここにあります。

75
00:06:36.211 --> 00:06:42.521
さらに、極端に小さな正のスケールでも、割り算の結果が無限大へあふれる可能性があります。

76
00:06:42.521 --> 00:06:47.363
通常の画面設定では、極端な値を許可しない設計が扱いやすいでしょう。

77
00:06:47.363 --> 00:06:51.472
例外は同期的に起きるので、トライキャッチで処理できます。

78
00:06:51.472 --> 00:06:53.209
活用場面とまとめです。

79
00:06:53.209 --> 00:07:00.393
マス・タンエイチは、ドラッグの端で抵抗感を出す変換、ポインターからの距離に応じてカードの傾きを一定範囲に収める計算、

80
00:07:00.393 --> 00:07:07.577
ゲームの入力値から上限のある操作量を求める処理などに向いています。

81
00:07:07.577 --> 00:07:13.735
一方で、この変換は非線形なので、入力が二倍になっても出力は二倍にはなりません。

82
00:07:13.735 --> 00:07:19.419
正確な距離や測定値の表示には向かず、操作感を調整する用途に適しています。

83
00:07:19.419 --> 00:07:25.892
また、結果は入力値だけから決まるため、時間に沿った揺れを取り除く効果はありません。

84
00:07:25.892 --> 00:07:33.629
導入するときは、元の入力値も保持し、表示に使う値だけを変換すると、あとから再調整しやすくなります。

85
00:07:33.629 --> 00:07:35.050
お疲れさまでした。

86
00:07:35.050 --> 00:07:40.892
マス・タンエイチは、入力をなめらかに制限する関数だと覚えておいてください。