VIDEO LESSON

JavaScriptのMath.acosh()：曲線の高さから横方向の位置を逆算するの解説動画

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

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

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

0:00こんにちは。
0:00今回はジャバスクリプトのマス・エイコッシュを紹介します。
0:05これは逆双曲線余弦を求める関数で、名前は難しく見えますが、考え方はシンプルです。
0:11双曲線余弦で作った曲線の値から、元の入力を逆算する道具だと考えてください。
0:17グラフを描く場面では、横の位置から高さを計算するだけでなく、この高さになる位置はどこか、
0:21と逆向きに知りたいことがあります。
0:26少しずつ探す方法もありますが、この関数を使えば直接計算できます。
0:31この動画では、基本の使い方から、曲線の位置を求める実例、失敗例や精度の注意点まで順に解説します。
0:38数学が苦手でも心配はいりません。
0:41式の意味を一つずつ言葉に直しながら進めます。
0:44まず動作環境です。
0:45マス・エイコッシュはブラウザー専用の機能ではなく、ジャバスクリプトの組み込み関数です。
0:52ブラウザーとノード・ジェイエスの両方で使え、画面要素や外部ライブラリーには依存しません。
0:59主要ブラウザーでは二千十五年七月から広く利用できるとされており、現在のクローム、
1:05エッジ、ファイアフォックス、サファリを対象にできます。
1:10記事のサンプルではノード・ジェイエス二十二系以降を対象にしています。
1:16古い組み込みブラウザーも対象にする場合は、使う前にタイプオブで存在を確認してください。
1:22ファンクションと表示されれば対応しています。
1:26基本の書き方を見ましょう。
1:28マス・ドット・エイコッシュと書き、かっこの中に引数を一つ渡します。
1:33インスタンスは作らず、マスから直接呼び出します。
1:37通常は一以上の数値を渡してください。
1:40戻り値は、双曲線余弦を計算するとその値になる、ゼロ以上の入力です。
1:46具体例では、引数一でゼロ、引数二で約一・三一六九五七八九六九が返ります。
1:51一方、一未満のゼロを渡すと、計算できないことを示すナンが返ります。
1:57無限大を渡すと無限大が返ります。
1:59範囲外でも例外になるとは限らないため、終わったことだけで正しい結果だと判断しないことが大切です。
2:07引数が二つ以上あっても、二つ目以降は使われません。
2:11渡す値は一つに絞ってください。
2:14ここで大切な性質を確認します。
2:16双曲線余弦、コッシュは、正の入力でも負の入力でも同じ値を取ります。
2:21定義式で入力の符号を反転させても、二つの項が入れ替わるだけで結果は変わりません。
2:27そのため、中央から同じ高さになる位置は、通常は左右に二か所存在します。
2:32マス・エイコッシュが返すのは、そのうちゼロ以上の側だけです。
2:37今回の実例では得られた値を右側の位置として扱い、左側が必要なら符号を反転させて求めます。
2:43高さがゼロのときだけ、位置は中央の一か所になります。
2:47この前提を忘れると、左側の位置を取りこぼすので注意してください。
2:52記事の実例で使う曲線を定義します。
2:55高さは、スケール掛ける、コッシュ引く一、という式で表します。
3:00スケールは曲線の形を決める正の値、ポジションは中央からの横方向の位置、ハイトは中央からの高さです。
3:09高さと位置は同じ単位で扱います。
3:12この式を変形すると、右側の位置は、スケール掛ける、マス・エイコッシュの一足すハイト割るスケール、
3:16で求められます。
3:21数値探索のように刻み幅を決める必要がなく、計算の目的がコードにも表れるのが利点です。
3:28ただし、どんな曲線でも逆算できるわけではなく、式が双曲線余弦で表せる場合に限ります。
3:36この考え方は、吊り橋のケーブルの形など、垂れ下がる曲線の計算にもつながります。
3:42完成サンプルの中心となる関数を見ましょう。
3:46ライトポジションアットハイトという関数は、高さとスケールを受け取り、右側の位置を返します。
3:53まず入力検証です。
3:54高さはゼロ以上の有限数、スケールはゼロより大きい有限数に限定し、条件を満たさなければレンジエラーを投げます。
4:02次に、一足す高さ割るスケール、という中間の値を計算し、それが有限かどうかも確認します。
4:09最後にマス・エイコッシュで逆算し、スケールを掛けた結果も有限かどうか確かめてから返します。
4:15途中の値まで確認することで、大きすぎる入力を早めに検出できます。
4:20検証を関数の中にまとめておくと、呼び出し側は計算結果の利用に集中できます。
4:26期待出力を確認しましょう。
4:29スケールを十に固定し、高さゼロ、十、十五で計算します。
4:34高さゼロでは位置はゼロ・ゼロゼロゼロ、高さ十では十三・一七ゼロ、高さ十五では十五・六六八となります。
4:45高さ十のとき、引数は一足す十割る十で二になり、その逆双曲線余弦に十を掛けると約十三・一六九五七九です。
4:55高さ十五では引数が二・五になり、約十五・六六七九九二を得ます。
5:02表示のときだけ小数点以下三桁に丸めており、関数の戻り値自体は丸めていません。
5:10最後に高さマイナス一を渡すと、検証でレンジエラーが表示されます。
5:17失敗例も確認しておきましょう。
5:19マス・エイコッシュにゼロ・五のような一未満の値を渡すとナンになります。
5:25サンプルでは、高さが負なら計算の前に例外へ変えています。
5:29ここで注意したいのは、範囲外の値を無条件に一へ置き換えないことです。
5:34そうすると誤った入力から中央の位置が返ってしまい、原因を見つけにくくなります。
5:41また、文字列の十は、サンプルの関数では受け付けません。
5:45フォームからの入力は文字列になるため、呼び出す側で空欄かどうかを確認し、
5:49数値へ変換してから渡す設計が必要です。
5:54検証と変換は呼び出し側の責任と覚えてください。
5:57極端な値では精度が失われる点にも注意が必要です。
6:01入力がどちらも有限数でも、高さ割るスケールや最後の掛け算が大きすぎれば、
6:06結果が無限大になる場合があります。
6:10サンプルは途中と最後の値を確認して、その状態を検出します。
6:15一方、その比が極端に小さい場合は、一を足した時点で丸められて一になってしまう可能性があります。
6:22その場合、正の高さでも結果がゼロになってしまい、有限数かどうかの確認だけでは精度を保証できません。
6:30扱う値の範囲をあらかじめ決め、境界付近では必要な誤差に収まるかを別途評価してください。
6:37比較では許容誤差を使うのが基本です。
6:40処理の性質と活用場面です。
6:42この計算は同期処理なので、プロミスやアウェイトは不要で、入力エラーは呼び出し元のトライ・キャッチで扱えます。
6:50大量の点を処理する場合は、同期処理が続く時間にも配慮してください。
6:55活用できるのは、曲線の式があらかじめ決まっているグラフ教材や可視化ツールです。
7:00利用者が高さを指定したときに、対応する左右の位置へマーカーを置く、といった操作を実装できます。
7:07関数は右側の位置だけを返すため、画面表示や単位の付与、左右の選択は呼び出し側で決められます。
7:13役割を分けることで再利用しやすくなります。
7:16最後にまとめと改善案です。
7:18次に改善するなら、入力欄の検証と表示用の丸めを計算部分から分離すると、ブラウザーとノード・ジェイエスで同じ計算を使いやすくなります。
7:27マス・エイコッシュは、双曲線余弦で作った曲線について、高さからゼロ以上の入力を逆算する関数です。
7:34引数は一以上が有効範囲で、一未満ではナンになること、左右対称のため右側だけが返ることを押さえてください。
7:41ただし任意の曲線を逆算できる関数ではありません。
7:45まず対象の式が双曲線余弦で表せるかを確認し、適用できる場合に使いましょう。
7:50まずは期待出力と手元の計算を比べて確かめてみてください。
7:54お疲れさまでした。
7:55コードを写して終わりにせず、スケールや高さを変えて結果の変化も確かめてください。

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

この動画で学べること

Math.acosh()で逆双曲線余弦を求める方法を解説。曲線の高さから位置を逆算する実例、引数・戻り値、ブラウザーとNode.jsの実行手順、入力範囲や計算精度の注意点を学べます。

解説記事・サンプルコードを読む：JavaScriptのMath.acosh()：曲線の高さから横方向の位置を逆算する →