用途

下記のような用途に活用できます。

• 角度ごとの三角関数の計算結果を単位円グラフで視覚的に確認できる
• JS(Mathオブジェクト)の三角関数系の組み込み関数による計算結果を確認できる
• 単位円グラフに用いるp5.jsの関数とJS組み込み関数の計算結果を比較できる
• 三角関数の主要な公式とJS組み込み関数の計算結果を比較できる
• 三角関数の公式の根拠となる主要な証明式を参照できる

単位円グラフ

ページ上部に表示されているのは単位円のグラフです。左上に三角関数の主要な値を表示しています（小数は4桁で四捨五入）。

• 単位円の半径r（直角三角形の斜辺）の長さは1です。
• θは度数法による角度で初期値は30度です
• radはラジアン（弧度法）による角度です
• sinはサインで、Y座標（直角三角形の高さ）です
• cosはコサインで、X座標（直角三角形の底辺）です
• tanはタンジェントで、Y座標とX座標の傾きです

角度(θ)の変更

角度(θ)のスライダーは単位円グラフの角度と同期します。テキストで直接入力もできます。

角度スライダーを動かすと単位円グラフの角度も移動します。

角度スライダーはマイナス側にも動かせます。角度の範囲は-360度〜360度です。

ラジアン

三角関数の角度で使われるラジアン（弧度法）の算出。円周率(π)のJS関数(Math.PI)を使います。ラジアンから度数の算出も。

角度のスライダーを変更するとラジアンの数値も同期して変化します（以下同じ）

「▶︎証明」を開くとラジアンと円周率(π)の関係がわかります

三角比のJS関数

引数にラジアンを入れると三角比を返すJS関数。

• サイン(Math.sin())：Y座標（直角三角形の高さ）
• コサイン(Math.cos())：X座標（直角三角形の底辺）
• タンジェント(Math.tan())：X座標とY座標の傾き

三角比の算出

直角三角形の2辺の長さから三角比を算出。JS関数の三角比の結果とほぼ同じことがわかります。

• 高さ(sin) / 斜辺(1) = サイン
• 底辺(cos) / 斜辺(1) = コサイン
• 高さ(sin) / 底辺(cos) = タンジェント

三平方の定理

直角三角形の3辺の長さの関係を算出。底辺の二乗と高さの二乗を足すと斜辺の二乗（=単位円の斜辺の長さ1）になります。

「▶︎証明」を開くと三平方の定理がなぜ成立するのかわかります。

三角比の相互関係

三角比の相互関係の公式①(=タンジェントの公式)、公式②(=三平方の定理)から求まる公式③。右辺と左辺は常に等しくなります。

「▶︎証明」を開くと三角比の相互関係の公式①、②、③の関係がわかります。

三角比の相互関係の公式を使うと三角比のどれか一つの値がわかれば他の2つの値も算出することができます。

サインからコサイン、タンジェントを算出

三角比の相互関係の公式の実例。公式①、②を使ってサインからコサイン、タンジェントを算出します。

ただし、角度が90度〜270度(-270度〜-90度)の場合はコサインをマイナスにする必要があります。

コサインからサイン、タンジェントを算出

三角比の相互関係の公式の実例。公式①、②を使ってコサインからサイン、タンジェントを算出します。

ただし、角度が180度〜360度(0度〜-180度)の場合はサインをマイナスにする必要があります。

タンジェントからサイン、コサインを算出

三角比の相互関係の公式の実例。公式①、③を使ってタンジェントからサイン、コサインを算出します。

ただし、角度が90度〜270度(-270度〜-90度)の場合はコサインをマイナスにする必要があります。

逆三角関数のJS関数

三角関数から角度(ラジアン)を算出するJS関数。0〜90度まではどの関数も一致。それ以外の角度はatan2()が360度カバーでき、座標から直接算出できる意味でも一番良さそうです。

atan2()は90〜180度でラジアンと一致する

atan2()は-180度〜0度でラジアンと一致する

• アークタンジェント2(Math.atan2())：Y座標, X座標からラジアンを算出
• アークサイン(Math.asin())：サインからラジアンを算出
• アークコサイン(Math.acos())：コサインからラジアンを算出
• アークタンジェント(Math.atan())：タンジェントからラジアンを算出

※逆三角関数の手計算は微分を用いた計算量が多い証明式のため、このJS関数を使うのが便利と思います。

双曲線関数のJS関数

JS関数で用意された残りのジャンルである双曲線関数。

• ハイパーボリックサイン(Math.sinh())
• ハイパーボリックコサイン(Math.cosh())
• ハイパーボリックタンジェント(Math.tanh())
• ハイパーボリックアークサイン(Math.asinh())
• ハイパーボリックアークコサイン(Math.acosh())
• ハイパーボリックアークタンジェント(Math.atanh())

これまでのどの計算結果とも一致せず、用途をよく理解できてないです（角度によって結果がどう変化するかを知るために追加）。

ブログ

【React & p5.js】「三角関数しらべMath」を作った（三角関数の理解を深めるアプリ） - クモのようにコツコツと

ソースコード（GitHub）

リポジトリ

イイダリョウ

フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。
引き続きコツコツの日々。ブログも書いてます。Webづくり やりたい時が 始め時！

• Twitter
• ブログ
• Qiita
• GitHub