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

オートコンプリートのプラグイン

最近だとフォームの入力画面で最初の数文字を入力すると候補を予測して表示してくれる機能(=オートコンプリート)があることが一般的ですね。 いろいろなプラグインがありますが、今回お勧めしたいのはBoots …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

ECMAScriptについて復習

ここ数年のJavaScript界隈は進化が激しく、私の知識はレガシーな状態で止まっているので、自分に備忘録として整理しておこうと思います。 Contents1 ECMAScriptとは?2 ECMAS …

no image

非同期通信のまとめ($.ajax,fetch,axiosなど)

非同期通信処理に関して、年明けに少し調べたのでメモします。 非同期通信に関しては長い間、$.ajaxを使っておりました。 フロント側でそれほど複雑な処理をやらなかった、昔覚えたのでそのまま・・ってパタ …

no image

requirejsでのモジュール読み込み

JavaScriptのモジュール化では2019年5月現在ではwebpackなどを使うことが一般的かと思いますが、以前はrequire.jsなどというライブラリがあったようです。 例えば下記のようなファ …

アーカイブ