【CSSで三角関数】常にマウスカーソルを指す矢印　～前置き編～ | GUARDIAN Marketing BLOG | 成果を上げるサブスク型ホームページ制作|日本屈指5万サイトの実績|東京のガーディアン

三角関数って、苦手意識を持っている人は多いですよね。私も高校時代は数学が苦手で三角関数もあまり深く理解していませんでした。

ですが年々色々な知識が増えるにつれ、三角関数ってこんなところでも使われるんだな〜ということがわかってくると、一気に親しみが持てるようになってきました！

例えば音に関すること。

みなさんは、下記のような音を波として表現した図をきっと見たことがあるのではないでしょうか？

いわゆる「波形」と呼ばれるヤツです。

上記の図ではあまり「波」というイメージがしづらいかもしれませんが、

これをどんどんどんどん拡大していくと複雑な波のような形になっていきます。

（オーディオ編集などをしたことがある人はよく知っていることでしょう）

私は高校生〜大学生の頃にシンセサイザーを弄るのが趣味だったのですが、シンセサイザー（特にアナログシンセ）で出せるもっとも単純な音を、サイン波と呼びます。

そうです、三角関数のサイン・コサイン・タンジェントのうちのサインですね！（正弦波とも呼ばれます）

サイン波とは下記のようなものです。

サイン波を実際に聞いてみると、いかにも電子音っぽい音がします。

最近会社で健康診断を受けさせてもらったのですが、聴覚のテストの時にヘッドホンから聴こえてくる

ツー・ツー・ツー・ツー・・・・

という音が聞こえたらボタンを押す、ということをやりました。

まさにあんな感じの音です。

あとは音叉の音も純粋なサイン波に近い音とよく言われます。

要するに、倍音が無い音のことです。

一方で、ピアノやオルガン、バイオリンなどの楽器は、豊かで深い、温もりのある響きをしますよね。

そしてよく耳を澄ませて聞いてみると、一つの音階の音にも実はたくさんの周波数の音が混じっていることがわかります。

（楽器としてはドを鳴らしているのにその中にも微かなファとかシとかが聞こえるイメージ）

それが倍音と言われるものです。

倍音が多い音は、波形を見てみるとサイン波よりも複雑な波の形をしています。

ですがそれは、単に波と波が重ね合わさって複雑な形が形成されているだけのことで、もともとの性質はまったく同じもの。

倍音のないサイン派を重ね合わせていくことで豊かな響きの音に変えることができますし、ちょっと乱暴な言い方ではありますがそれをどんどん重ねてさらに複雑にしていけば皆さんが普段聞いているような曲の波形に変わります。

逆にいうと、どんな複雑な音でもどんどん分解していってしまえば最終的にはサイン波の組み合わせにしか過ぎないということです！

そしてその「音を分解する」を可能にする技術として無くてはならないのがフーリエ変換と言われる技術で、これはまさに関数を三角関数に分解しまくっちゃうよ！という発想からこそ生まれたものです。

こんなえらい事を考えたのが下記の人物フーリエさんです（笑）

Julien-Léopold Boilly, Public domain, via Wikimedia Commons

大変雑な説明ですが、ここまで読んでくださった方は音と三角関数が深い関係にあるということを理解してもらえたことと思います。

これからどんな音楽を聴く時にも三角関数とフーリエさんの顔がよぎるようになっているのではないでしょうか？？

素晴らしいですね・・・！おめでとうございます(*^ω^*)

そしてもうひとつ、Webのコーディングで三角関数を使っておく際に、理解しておくと便利な概念があります。

それが「座標（系）」についてです。

最近Webのコーディングをしていてよく感じることのひとつに、高校数学で習った概念に似たものがコンピューターでもたくさん使われているなーということです(´∀｀)（当たり前だ）

例えばプログラミングで一般的に使われる「関数」という言葉は、数学でも使われていましたね！

例えばy=2xという関数であれば、変数xに1をインプットすれば、変数yは2としてアウトプットされます。

プログラミングの関数にそっくりです！

function xtimes2(x){

  return x * 2;

}

みたいな感じですね。そもそも関数という言葉を英訳するとまんまfunctionです。

ただプログラミングにおいては、内部で変数の値を書き換えちゃったりできるなど他にも色々な余計な(？)ことができちゃうのが数学の関数とは違う点です。

そしてHTMLにも数学にも、「座標」という概念が登場します。

ここでもやはり、数学での座標とHTMLでの座標は似ているものの同じではありません。

数学で座標というと下記のようなグラフが真っ先に思い出されます。

赤字でoと書いてあるところが、原点と呼ばれる位置です。大体グラフの中心にあるのが一般的ですね。

対して、HTMLでの原点はウインドウの左上にあるのが一般的。

次回で詳しく解説するatan2()の使い方においても、x座標とy座標という考え方が出てきますし、原点の位置はどこか？ ということも知っておくと役に立つのでぜひ覚えておいてください！

そして最後に、そもそもこのグラフとは一体何なのでしょうか？

広辞苑では次のように定義されています。

互いに連関する二つまたは二つ以上の量の間の関係を表す図形。たとえば関数ｆに対し、ｘがｆの定義域を動くときの点（x,f（x））の軌跡をｆのグラフという。またｘ、ｙに関する方程式をみたす点（x,y）の軌跡をその方程式のグラフという。

より直観的に言うならば、関数を分かりやすく図示したものがグラフということになります。

つまりy=2xという関数を図示すると、先の画像になるということ。

これってなかなかすごいことだとは思いませんか？

だって、プログラミングをしていて、とある関数がよくわからないなーと思った時。

先輩や上司に、

「この関数がよくわからないんで絵に描いてください！」

って聞きませんよね？

聞いたら何言ってんだこいつと思われて心配されることでしょう。

でも数学においては

「この関数がよくわからないんで絵に描いてください！」

と聞けば、

「いいよ！はいよ！」

と図示してもらうことができるのです（少なくとも高校数学の範囲であれば・・・）。

こう考えると、色々と繋がってきて面白いと思いませんか？

次回の三角関数のひとつであるatan2を解説する上でも、このグラフや座標という概念が一体どういうものか？ ということがわかっているだけで、分かりやすさがずいぶん変わってくるものと思います！

（無事、先ほどの関数のくだりを伏線回収することができてホッとしていますw）

では壮大な前置きはこのくらいにしておき、次回、CSSのニューカマーである三角関数（さらにatan2に限る）の使い方をお楽しみに！