Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

《JavaScript》ある値を現在の範囲から新しい範囲における値に変換する。

More than 3 years have passed since last update.

Processingの map() 関数が欲しかったのでJavaScriptで自前で実装しました🍟

スクリプト

map(value, fromMin, fromMax, toMin, toMax) というようにパラメータを渡して、valuefromMin-fromMax から toMin-toMax に対応する値に変換します。

map.js
/**
 * 新しい範囲における現在の値を、現在の範囲を元に変換して返す
 * map(a, b, c, d, e)   aを範囲b-cから別の範囲d-eへ変換する
 * @param value {Number}
 * @param fromMin {Number} 変換前の最小
 * @param fromMax {Number} 変換前の最大
 * @param toMin {Number} 変換後の最小
 * @param toMax {Number} 変換後の最大
 */
const map = (value, fromMin, fromMax, toMin, toMax) => {

  let result = 0;

  result = (value <= fromMin)
    ? toMin : (value >= fromMax)
      ? toMax : (() => {

        let ratio = (toMax - toMin) / (fromMax - fromMin);
        return (value - fromMin) * ratio + toMin;

      })();

  return result;

};

console.log(map(5, 0, 10, 0, 100));  // 50
console.log(map(-20, 0, 10, 0, 100));  // 0
console.log(map(2000, 0, 10, 0, 100));  // 100

ちょっと言語化するのが難しいですが、結果を見てもらうとわかると思います。

なにに使う?

CSSの値を異なる単位やプロパティ同士で連携(アニメーション)させる時に、よく使っています。

例えば、1回転(360deg)させるアニメーションと、100px移動するアニメーションの現在地の更新を簡単に実装することができるので、コードの見通しや計算の手間を省くことができます。

おわります。

uto-usui
Branding Engineer @ Condé Nast 🇯🇵 for VOUGE GQ WIRED/Songwriter/Fav. 🐈 🌸 🎸 📸 📚 🛠🍎☕️🍷👩🏻‍💻
https://uto-usui.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away