(1年前からずっと下書きだったらしい。そのまま投稿してみる）
数学がわからなくてもプログラムは書けるので、数学なんていらないぜ！という意見をたまに目にします。私もいらないと思います。でも、数学の知識があると、こういう時に役立つよっていう実例を一つ紹介しましょう。すんごいアルゴリズムの話ではないです。誰でもわかる Web デザインの話です。
Web サイトのメニューで、使いづらいやつがよくあります。斜めにマウスを持ってくと閉じちゃうサブメニュー、ありますよね。このツイートを見て思い出しました。
緑の矢印の方にマウスを動かしても大丈夫だけど、赤の矢印の方はサブメニューが閉じる、という実装ですね。下手な実装をすると、緑の方向でもサブメニューが閉じちゃうんですよね。
確かこの記事で後述のライブラリを知った気がします。
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
その昔、これを解決する方法を自分で考えた私は、２秒でマウスの座標をwatchするという天才的なアイデアを思いつきました。サブメニューに向かう薄い緑の三角形の中に、マウスの座標があるかどうかを判定すればいいですよね。しかし天才の上には天才がいるものです。
jQuery-menu-aim がその問題をクリアしていたので実装を見た時の話です。
私は、そのシンプルな構造に驚きました。
function slope(a, b) {
return (b.y - a.y) / (b.x - a.x);
};
これは微分で接線の傾きを求める公式そのままで、みなさん教科書で見たことがあるであろうものです。
bは今マウスがいる座標で、aはさっき(0.1ms前とかに)マウスがいた座標です。それぞれのx, yの差異を割ることで２つの座標の接線の傾きを求めています。
smart-dropdown-menu さんの gif が三角形がどう動いているのか分かりやすいです。
そして、それがサブメニューに向かう傾きなのかどうかを調べているだけなのです。座標で判定すると 2次元の判定がいるのでコードはゴミゴミするのですが、傾きは一次元のただの数字なので、 if 傾き in (上の角に向かう傾き, 下の角に向かう傾き) と、たった３つの数字だけで、美しく判定できてしまうのです。
数学が Web デザインにも役立つんだと実感した初めての瞬間でした。