WEBVTT

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

2
00:00:00.873 --> 00:00:04.947
今回はジャバスクリプトのマス・アタン・ツーを紹介します。

3
00:00:04.947 --> 00:00:11.058
これは、二つの点の位置の差から、進む向きを角度として求める、組み込みのメソッドです。

4
00:00:11.058 --> 00:00:16.078
たとえばゲームでキャラクターを目標へ向けたいときや、配置図で接続先への矢印を描きたいとき、

5
00:00:16.078 --> 00:00:21.098
右上や左下といった場合分けを並べるのは大変です。

6
00:00:21.098 --> 00:00:27.646
マス・アタン・ツーなら、横方向と縦方向の差を渡すだけで、全方向を一つの計算で求められます。

7
00:00:27.646 --> 00:00:32.593
この動画では、右をゼロ度、上を九十度とする数学の座標を基準に、基本の書き方から、

8
00:00:32.593 --> 00:00:37.540
画面座標への応用、失敗しやすい注意点まで順に解説します。

9
00:00:37.540 --> 00:00:38.749
まず動作環境です。

10
00:00:38.749 --> 00:00:46.408
マス・アタン・ツーはジャバスクリプト標準の組み込みメソッドで、ブラウザーとノード・ジェイエスの両方で利用できます。

11
00:00:46.408 --> 00:00:50.909
二千十五年七月からブラウザー間で広く利用できる機能とされており、現在のクローム、

12
00:00:50.909 --> 00:00:55.410
エッジ、ファイアフォックス、サファリを対象にできます。

13
00:00:55.410 --> 00:00:59.307
ドムや外部ライブラリーには依存せず、インポートも不要です。

14
00:00:59.307 --> 00:01:05.353
記事のサンプルは、ブラウザーの現行版、またはノード・ジェイエス二十二以降を想定しています。

15
00:01:05.353 --> 00:01:11.668
これはサンプル全体の対象であり、このメソッド自体が二十二で追加されたという意味ではありません。

16
00:01:11.668 --> 00:01:13.952
環境を分けて考えることが大切です。

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

18
00:01:16.224 --> 00:01:22.165
呼び出し方はマス・アタン・ツー、かっこ、ワイ、カンマ、エックスです。

19
00:01:22.165 --> 00:01:30.379
座標を普段書く順番とは逆に、縦方向のワイを先に、横方向のエックスを後に渡す点が最大の特徴です。

20
00:01:30.379 --> 00:01:34.223
第１引数が縦の成分、第２引数が横の成分です。

21
00:01:34.223 --> 00:01:38.068
戻り値は数値型の角度で、単位はラジアンです。

22
00:01:38.068 --> 00:01:45.582
範囲はマイナスの円周率から円周率までで、正の横軸から反時計回りに測った角度を返します。

23
00:01:45.582 --> 00:01:51.699
右向きならゼロ、上向きなら約一点五七、左向きなら約三点一四になります。

24
00:01:51.699 --> 00:01:55.019
まずは引数の順番を体で覚えてください。

25
00:01:55.019 --> 00:02:00.961
インスタンスを作る必要はなく、マスに直接呼びかける静的メソッドです。

26
00:02:00.961 --> 00:02:04.281
処理は同期的で、待ち合わせも不要です。

27
00:02:04.281 --> 00:02:10.572
角度そのものではなく方向だけが欲しい場面で、このシンプルさが役立ちます。

28
00:02:10.572 --> 00:02:13.836
二つの点を扱うときは、差分を渡します。

29
00:02:13.836 --> 00:02:18.216
出発点をフロム、到着点をトゥーとすると、必要なのは到着点そのものの座標ではなく、

30
00:02:18.216 --> 00:02:22.597
出発点からのずれです。

31
00:02:22.597 --> 00:02:28.953
横の差分ディーエックスは、トゥーのエックスからフロムのエックスを引きます。

32
00:02:28.953 --> 00:02:32.389
縦の差分ディーワイも同じように引きます。

33
00:02:32.389 --> 00:02:39.776
例では、どちらも十になるため、右へ十、上へ十進む斜めの方向になり、結果は四十五度です。

34
00:02:39.776 --> 00:02:48.880
両方の点を同じだけ移動させても差分は変わらないので、原点から離れた場所でも同じ考え方で方向を求められます。

35
00:02:48.880 --> 00:02:55.408
実行結果はノード・ジェイエスの実機でも四十五点ゼロになることを確認済みです。

36
00:02:55.408 --> 00:03:02.479
角度を度で読みたいときは、戻り値に百八十わる円周率を掛けて度数法に変換します。

37
00:03:02.479 --> 00:03:05.199
代表的な向きを確認しましょう。

38
00:03:05.199 --> 00:03:10.548
右はゼロ度、右上は四十五度、上は九十度、左上は百三十五度、左は百八十度またはマイナス百八十度、

39
00:03:10.548 --> 00:03:15.896
下はマイナス九十度です。

40
00:03:15.896 --> 00:03:23.511
ここで大切なのは、横と縦の比率が同じでも、符号が変われば向きも変わるということです。

41
00:03:23.511 --> 00:03:32.577
右上と左上は比率だけ見れば似ていますが、横の符号が違うため、四十五度と百三十五度に正しく分かれます。

42
00:03:32.577 --> 00:03:38.198
この符号まで含めて扱えることが、マス・アタン・ツーの強みです。

43
00:03:38.198 --> 00:03:44.725
度数法は人が読みやすい表示に向き、ラジアンは計算を続ける場面に向きます。

44
00:03:44.725 --> 00:03:50.708
表示用に一度だけ変換し、計算には変換前の値を残すのがおすすめです。

45
00:03:50.708 --> 00:03:52.677
ここからは完成例です。

46
00:03:52.677 --> 00:04:00.730
ディレクション・ディグリーズという関数は、四つの座標値を受け取り、方向を度数法で返します。

47
00:04:00.730 --> 00:04:06.010
最初に、すべての座標が有限の数値かどうかを、ナンバー・イズ・ファイナイトで確かめ、

48
00:04:06.010 --> 00:04:11.290
問題があればタイプエラーを投げます。

49
00:04:11.290 --> 00:04:16.659
次に横と縦の差分を求め、差分自体も有限かどうかを確認します。

50
00:04:16.659 --> 00:04:23.281
極端に大きな値どうしの引き算では、差分が無限大になる可能性があるためです。

51
00:04:23.281 --> 00:04:30.082
最後に、同一点かどうかを判定してから、マス・アタン・ツーで角度を計算します。

52
00:04:30.082 --> 00:04:33.840
検証と計算を一つの関数にまとめた設計です。

53
00:04:33.840 --> 00:04:35.726
期待出力を読みましょう。

54
00:04:35.726 --> 00:04:40.442
開始点をエックス十、ワイ二十として、五つのケースを試します。

55
00:04:40.442 --> 00:04:45.394
右へ進む場合はゼロ点ゼロ度、上へ進む場合は九十点ゼロ度、左上は百三十五点ゼロ度、

56
00:04:45.394 --> 00:04:50.346
下へ進む場合はマイナス九十点ゼロ度になります。

57
00:04:50.346 --> 00:04:55.062
同一点の場合は、関数がヌルを返すため、方向なしと表示します。

58
00:04:55.062 --> 00:05:03.865
さらに、数値ではなく文字列の十を渡した場合は、入力検証で例外が発生し、入力エラーとしてメッセージが表示されます。

59
00:05:03.865 --> 00:05:11.253
これらの出力は、ノード・ジェイエスの実機でも記事の期待出力と完全に一致することを確認済みです。

60
00:05:11.253 --> 00:05:15.340
五つのケースがそろうと、全体の動きがはっきりします。

61
00:05:15.340 --> 00:05:19.618
よくある失敗が、引数を逆にしてしまうことです。

62
00:05:19.618 --> 00:05:29.103
マス・アタン・ツーにディーエックスとディーワイの順で渡すと、横と縦を交換した方向を計算してしまいます。

63
00:05:29.103 --> 00:05:33.753
特に注意したいのは、右上四十五度の例では、交換しても結果が同じになるため、

64
00:05:33.753 --> 00:05:38.403
誤りに気づけないことです。

65
00:05:38.403 --> 00:05:44.355
確認には、右だけ、上だけ、左上など、複数の方向を使ってください。

66
00:05:44.355 --> 00:05:50.306
もう一つ、比率を先に計算するマス・アタンへの置き換えも危険です。

67
00:05:50.306 --> 00:05:57.374
左上の例では、左右を区別する情報が失われ、必要な百三十五度を求められません。

68
00:05:57.374 --> 00:06:01.280
縦と横を別々に渡すことに意味があるのです。

69
00:06:01.280 --> 00:06:04.274
同一点と不正入力の扱いを確認します。

70
00:06:04.274 --> 00:06:09.764
組み込みのマス・アタン・ツーにゼロとゼロを渡すと、ゼロが返ります。

71
00:06:09.764 --> 00:06:18.914
しかしアプリケーションで同一点を右向きとして扱うと、目標に到着した瞬間に矢印が右を向いてしまうことがあります。

72
00:06:18.914 --> 00:06:24.071
完成例がヌルを返すのは、この問題を避けるための独自ルールです。

73
00:06:24.071 --> 00:06:28.896
組み込みの定義と、アプリ側のルールは分けて考えてください。

74
00:06:28.896 --> 00:06:33.055
また、このメソッドはビッグイント用ではありません。

75
00:06:33.055 --> 00:06:40.707
一般の角度計算では浮動小数点の誤差も考慮し、小数の完全一致を判定条件にしないことが大切です。

76
00:06:40.707 --> 00:06:44.700
表示用の丸めと、計算用の値は分けて残しましょう。

77
00:06:44.700 --> 00:06:48.941
ブラウザーの画面座標へ応用するときの注意点です。

78
00:06:48.941 --> 00:06:53.536
一般的な画面座標では、縦座標は下へ行くほど増えます。

79
00:06:53.536 --> 00:07:01.136
そのため、数学座標と同じ差分計算をそのまま使うと、画面上では下が正の九十度になります。

80
00:07:01.136 --> 00:07:10.502
数学座標と同じく上を正にしたい場合は、縦の差分を、フロムのワイからトゥーのワイを引く形に変更してください。

81
00:07:10.502 --> 00:07:16.864
どちらを使うかは、角度を受け取る描画処理の規則に合わせる必要があります。

82
00:07:16.864 --> 00:07:21.989
実装の前に、右がゼロ度かどうか、正の方向は時計回りか反時計回りかを決め、

83
00:07:21.989 --> 00:07:27.114
関数の説明に残しておくことをおすすめします。

84
00:07:27.114 --> 00:07:30.472
座標系の約束を先に決めるのがコツです。

85
00:07:30.472 --> 00:07:32.247
活用場面とまとめです。

86
00:07:32.247 --> 00:07:37.087
マス・アタン・ツーは、配置図の矢印、ゲーム内の照準、経路上の移動方向など、

87
00:07:37.087 --> 00:07:41.927
平面上の二点を結ぶ向きを求める場面に使えます。

88
00:07:41.927 --> 00:07:47.574
サーバー側で方向を計算し、ブラウザーへ数値として渡す構成にもできます。

89
00:07:47.574 --> 00:07:52.414
設計を改善するなら、方向の計算と表示の判断を分けてください。

90
00:07:52.414 --> 00:07:57.738
たとえば同一点でヌルが返ったら、画面側は直前の向きを維持できます。

91
00:07:57.738 --> 00:08:01.449
到着時の挙動だけを後から変更しやすくなります。

92
00:08:01.449 --> 00:08:03.708
なお、この計算は平面用です。

93
00:08:03.708 --> 00:08:10.000
緯度と経度をそのまま渡して、地球上の正確な進行方位を求める用途には使えません。

94
00:08:10.000 --> 00:08:11.452
お疲れさまでした。

95
00:08:11.452 --> 00:08:16.292
まずは差分を渡すことと、ワイが先という順番を覚えてください。