HTMLのタグに計算式

先日、仕事でWebアプリケーションを作成しました。

もともとEXCELで入力していたシステムをWebアプリケーションに置き換えたのですが、元がEXCELアプリケーションだったため、あちらこちらに計算式があるセルがあり、それらも表示する必要がありました。

計算式の数だけJavaScriptで関数を書いても良いのだけど、管理が大変そうなので、実際に計算結果を表示する要素に計算式を記述できれば、もっとスッキリできないかな？と思い、組んだものです。

実際のコードは載せることはできませんが、おおよそ仕組みわかるものを紹介したいと思います。

記述したHTML

HTMLは以下のような感じで書いています。

<input type="text" data-var="X" />
<input type="text" data-var="Y" />
<span data-cal="X+Y"></span>

data-var 属性にデータ識別子(変数)を記述し、data-cal 属性に計算式を記述します。

計算式を処理するJavascript

処理するJavascriptは以下です。

window.addEventListener("DOMContentLoaded", function() {
  for (const elem of document.querySelectorAll("[data-var]")) {
    elem.addEventListener("change", function() {
      calculate();
    });
  }

  function calculate() {
    const data = {};
    for (const elem of document.querySelectorAll("[data-var]")) {
      data[elem.dataset.var] = (function(name) {
        try {
          if (!elem.value) return 0;
          return parseFloat(elem.value);
        }
        catch {
        }
        return 0;
      })();
    }
    for (const elem of document.querySelectorAll("[data-cal]")) {
      elem.innerText = (function(expr) {
        try {
          with(data) return eval(expr);
        }
        catch {}
        return '';
      })(elem.dataset.cal);
    }
  }
});

data-var 属性を持つ要素の変化で計算を行なっています。

計算処理では、一旦 data-var 属性を持つ要素の値をオブジェクトに収めます。そのオブジェクトを使用して data-cal 属性に記述された計算式を評価(eval)し、結果をその要素にセットしています。

withを使うとオブジェクトの指定が省略できることを利用しています。

data.X 
// 通常は上のように object.property の形式でプロパティを参照するが、
// 以下のようにwith文を使うと、objectの指定が省略できる
with (data) X

実際に書いたコードはもっと複雑ですし、jQueryを利用したので、コードは全然異なるのですが、仕組みとしては上と同じです。

実際に動くサンプル

CodePenで書いた実際のサンプルを載せます。

テキストボックスに数値を入力すると、spanタグにそれぞれ和と差が表示されます。

さいごに

いかがでしたでしょうか。HTMLに計算式を記述して計算するプログラムを紹介しました。

何かの参考になりましたら、幸いです。