VIDEO LESSON

JavaScriptのMath.atan2()：2点間の方向を角度に変換するの解説動画

再生時間 8:16動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

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

0:00こんにちは。
0:00今回はジャバスクリプトのマス・アタン・ツーを紹介します。
0:04これは、二つの点の位置の差から、進む向きを角度として求める、組み込みのメソッドです。
0:11たとえばゲームでキャラクターを目標へ向けたいときや、配置図で接続先への矢印を描きたいとき、
0:16右上や左下といった場合分けを並べるのは大変です。
0:21マス・アタン・ツーなら、横方向と縦方向の差を渡すだけで、全方向を一つの計算で求められます。
0:27この動画では、右をゼロ度、上を九十度とする数学の座標を基準に、基本の書き方から、
0:32画面座標への応用、失敗しやすい注意点まで順に解説します。
0:37まず動作環境です。
0:38マス・アタン・ツーはジャバスクリプト標準の組み込みメソッドで、ブラウザーとノード・ジェイエスの両方で利用できます。
0:46二千十五年七月からブラウザー間で広く利用できる機能とされており、現在のクローム、
0:50エッジ、ファイアフォックス、サファリを対象にできます。
0:55ドムや外部ライブラリーには依存せず、インポートも不要です。
0:59記事のサンプルは、ブラウザーの現行版、またはノード・ジェイエス二十二以降を想定しています。
1:05これはサンプル全体の対象であり、このメソッド自体が二十二で追加されたという意味ではありません。
1:11環境を分けて考えることが大切です。
1:13基本の書き方を見ましょう。
1:16呼び出し方はマス・アタン・ツー、かっこ、ワイ、カンマ、エックスです。
1:22座標を普段書く順番とは逆に、縦方向のワイを先に、横方向のエックスを後に渡す点が最大の特徴です。
1:30第１引数が縦の成分、第２引数が横の成分です。
1:34戻り値は数値型の角度で、単位はラジアンです。
1:38範囲はマイナスの円周率から円周率までで、正の横軸から反時計回りに測った角度を返します。
1:45右向きならゼロ、上向きなら約一点五七、左向きなら約三点一四になります。
1:51まずは引数の順番を体で覚えてください。
1:55インスタンスを作る必要はなく、マスに直接呼びかける静的メソッドです。
2:00処理は同期的で、待ち合わせも不要です。
2:04角度そのものではなく方向だけが欲しい場面で、このシンプルさが役立ちます。
2:10二つの点を扱うときは、差分を渡します。
2:13出発点をフロム、到着点をトゥーとすると、必要なのは到着点そのものの座標ではなく、
2:18出発点からのずれです。
2:22横の差分ディーエックスは、トゥーのエックスからフロムのエックスを引きます。
2:28縦の差分ディーワイも同じように引きます。
2:32例では、どちらも十になるため、右へ十、上へ十進む斜めの方向になり、結果は四十五度です。
2:39両方の点を同じだけ移動させても差分は変わらないので、原点から離れた場所でも同じ考え方で方向を求められます。
2:48実行結果はノード・ジェイエスの実機でも四十五点ゼロになることを確認済みです。
2:55角度を度で読みたいときは、戻り値に百八十わる円周率を掛けて度数法に変換します。
3:02代表的な向きを確認しましょう。
3:05右はゼロ度、右上は四十五度、上は九十度、左上は百三十五度、左は百八十度またはマイナス百八十度、
3:10下はマイナス九十度です。
3:15ここで大切なのは、横と縦の比率が同じでも、符号が変われば向きも変わるということです。
3:23右上と左上は比率だけ見れば似ていますが、横の符号が違うため、四十五度と百三十五度に正しく分かれます。
3:32この符号まで含めて扱えることが、マス・アタン・ツーの強みです。
3:38度数法は人が読みやすい表示に向き、ラジアンは計算を続ける場面に向きます。
3:44表示用に一度だけ変換し、計算には変換前の値を残すのがおすすめです。
3:50ここからは完成例です。
3:52ディレクション・ディグリーズという関数は、四つの座標値を受け取り、方向を度数法で返します。
4:00最初に、すべての座標が有限の数値かどうかを、ナンバー・イズ・ファイナイトで確かめ、
4:06問題があればタイプエラーを投げます。
4:11次に横と縦の差分を求め、差分自体も有限かどうかを確認します。
4:16極端に大きな値どうしの引き算では、差分が無限大になる可能性があるためです。
4:23最後に、同一点かどうかを判定してから、マス・アタン・ツーで角度を計算します。
4:30検証と計算を一つの関数にまとめた設計です。
4:33期待出力を読みましょう。
4:35開始点をエックス十、ワイ二十として、五つのケースを試します。
4:40右へ進む場合はゼロ点ゼロ度、上へ進む場合は九十点ゼロ度、左上は百三十五点ゼロ度、
4:45下へ進む場合はマイナス九十点ゼロ度になります。
4:50同一点の場合は、関数がヌルを返すため、方向なしと表示します。
4:55さらに、数値ではなく文字列の十を渡した場合は、入力検証で例外が発生し、入力エラーとしてメッセージが表示されます。
5:03これらの出力は、ノード・ジェイエスの実機でも記事の期待出力と完全に一致することを確認済みです。
5:11五つのケースがそろうと、全体の動きがはっきりします。
5:15よくある失敗が、引数を逆にしてしまうことです。
5:19マス・アタン・ツーにディーエックスとディーワイの順で渡すと、横と縦を交換した方向を計算してしまいます。
5:29特に注意したいのは、右上四十五度の例では、交換しても結果が同じになるため、
5:33誤りに気づけないことです。
5:38確認には、右だけ、上だけ、左上など、複数の方向を使ってください。
5:44もう一つ、比率を先に計算するマス・アタンへの置き換えも危険です。
5:50左上の例では、左右を区別する情報が失われ、必要な百三十五度を求められません。
5:57縦と横を別々に渡すことに意味があるのです。
6:01同一点と不正入力の扱いを確認します。
6:04組み込みのマス・アタン・ツーにゼロとゼロを渡すと、ゼロが返ります。
6:09しかしアプリケーションで同一点を右向きとして扱うと、目標に到着した瞬間に矢印が右を向いてしまうことがあります。
6:18完成例がヌルを返すのは、この問題を避けるための独自ルールです。
6:24組み込みの定義と、アプリ側のルールは分けて考えてください。
6:28また、このメソッドはビッグイント用ではありません。
6:33一般の角度計算では浮動小数点の誤差も考慮し、小数の完全一致を判定条件にしないことが大切です。
6:40表示用の丸めと、計算用の値は分けて残しましょう。
6:44ブラウザーの画面座標へ応用するときの注意点です。
6:48一般的な画面座標では、縦座標は下へ行くほど増えます。
6:53そのため、数学座標と同じ差分計算をそのまま使うと、画面上では下が正の九十度になります。
7:01数学座標と同じく上を正にしたい場合は、縦の差分を、フロムのワイからトゥーのワイを引く形に変更してください。
7:10どちらを使うかは、角度を受け取る描画処理の規則に合わせる必要があります。
7:16実装の前に、右がゼロ度かどうか、正の方向は時計回りか反時計回りかを決め、
7:21関数の説明に残しておくことをおすすめします。
7:27座標系の約束を先に決めるのがコツです。
7:30活用場面とまとめです。
7:32マス・アタン・ツーは、配置図の矢印、ゲーム内の照準、経路上の移動方向など、
7:37平面上の二点を結ぶ向きを求める場面に使えます。
7:41サーバー側で方向を計算し、ブラウザーへ数値として渡す構成にもできます。
7:47設計を改善するなら、方向の計算と表示の判断を分けてください。
7:52たとえば同一点でヌルが返ったら、画面側は直前の向きを維持できます。
7:57到着時の挙動だけを後から変更しやすくなります。
8:01なお、この計算は平面用です。
8:03緯度と経度をそのまま渡して、地球上の正確な進行方位を求める用途には使えません。
8:10お疲れさまでした。
8:11まずは差分を渡すことと、ワイが先という順番を覚えてください。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Math.atan2()で2点間の方向を角度に変換する方法を解説。引数・戻り値、ブラウザーとNode.jsの実行手順、画面座標の扱い、同一点や不正入力への対応を学べます。

解説記事・サンプルコードを読む：JavaScriptのMath.atan2()：2点間の方向を角度に変換する →