skillup

技術ブログ

JavaScript

JSでの画面の金額集計

投稿日:

主に金額などを画面で計算するような請求関係のアプリを作っていますと、JSを駆使して集計作業をすることが多いのではないかと思います。

ようはテーブルみたいなものがあり、それを集計するようなパターンです。

この場合、気をつけることなどを。

ちなみにvueなどでこれを制御する場合、内部データは数字でもち、画面で出力させる時のみフォーマット(カンマ区切りや円マーク)するといったように見える部分と計算ロジックを切り離せる利点があげられると思います。

ただjQueryだとDOMにデータが入っており、これを取り出して表示することになるので大変ですね・・・

文字列と数字の挙動の確認

一般的に数字は画面に表示するときにカンマ区切りになることが一般的だと思います。

この場合、数値文字の変換作業をしっかりと意識しましょう。具体的には

  • 集計作業時にカンマを取り除く
  • 数値変換する
  • 空白だった場合の考慮(空白に対して parseInt すると NaN になります。)
  • 空白と0の違いの確認
  • 逆に計算した値を出力するときに変換処理
  • POSTするときに一斉にカンマをとるような処理をPOST実行時に入れる

などを忘れないようにしましょう。すごく基本ですが、項目数が多いといろんなイレギュラーパターンが出てきてエラーで落ちてしまうことになります。

頻出表現のライブラリ化、あるいはライブラリを使う

上記の処理ですが、変換処理に関しても1つにまとめておき、そこを通せば全て解決するなど関心ごとを1つにまとめるようにしましょう。

すごい基本ですが、意外と忘れがちなので要注意です。

その場合、PHPと同様にスコープの意識(グローバルで書くのか、関数やクラスを書くのか、ES6的な書き方が使えるのかなどをあらかじめ知っておきましょう。)

ちなみに自分が作った関数は以下に。

https://github.com/umanari145/library

自力で作るのは大切ですが、細かいところでバグなどを完全に考慮仕切るのが難しいため、やはり実績のあるライブラリを使った方がいいかもしれないです。

Sugar

https://sugarjs.com/

古くから使ってます。文字列、配列オブジェクト加工系、日付など一通り揃ってます。

あまりメジャーじゃないっぽいですが、これ一つで基本的な処理はだいたいカバーできるかと。

lodash

laravelのなかに標準で入っており、直近ではかなり勢いがあるイメージです。文字列系、配列加工、日付フルセットです。今から覚えるならこれでしょう。

https://lodash.com/

シェアを調べてみましたが、最近では圧倒的ですね。

https://www.npmtrends.com/sugar-vs-lodash-vs-underscore

underscore.js

多分古くから有名なJSのライブラリ。日付などはなく配列加工系でよく使われています。

https://underscorejs.org/

moment.js

日付系では非常に有名なライブラリ。

https://momentjs.com/

できることは多そう。

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

JSでの他ファイル読み込み。requireやimportについて

JavaScriptに関して、知識が非常に古い段階で止まっているのでコツコツとアップデートをしております。 今回はrequireやimportなど、他のファイルの読み込みについてです。 PHPなどサー …

no image

JavaScriptライブラリ sugar

去年、JavaScriptの仕事をがりがりやった時にお世話になったライブラリsugar。 JavaScriptのライブラリというとunderscore.jsが有名ですが、こいつも結構使えるライブラリで …

no image

AngularJSでのHtmlFormオプション+Filter

AngularJSにてHTMLのFormオプションの書き方など。 Contents1 HTMLオプション1.1 プルダウン1.1.1 配列型1.1.2 ラベル型1.2 チェックボックス1.3 ラジオ1 …

no image

bowerのインストール

業務でAngularJSをいじっていますが、そこでbowerというソフトウェアの存在を知りました。 Contents1 bowerとは?2 インストール方法 bowerとは? フロントエンドのパッケー …

no image

vueでのコンポーネント間の変数のやりとりに関して

vueをコツコツと勉強していますが、コンポーネント間で変数の受け渡しをしたいときなどは色々注意が必要かと思います。 個人的には下記のような解釈で組んでおります。 Contents1 vuex2 syn …