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

Angular概論 モジュール、コントローラー、スコープなど

Contents1 Angularインストール2 ソース2.1 モジュール、スコープとコントローラ2.1.1  モジュールとは2.1.2 コントローラーとは2.1.3 スコープとは3 参考リンク An …

no image

bootstrapでのJavaScriptエラーチェック

お問い合わせフォームの入力チェックというのは本来サーバーサイド側でやらなくてはいけないのですが、JavaScriptによってクライアント側でやることも可能です。 入力欄にフォーカスして、遷移したときに …

no image

npmコマンドの整理

npmのコマンドのまとめに関して。 Contents1 npmとは?2 よく使うコマンド2.1 npm init -y2.2 npm install パッケージ名(npm -i パッケージ名)2.2. …

no image

dataTableによる無限スクロール

Angularで無限スクロールをやったので一般のjqueryで。 dataTablesというプラグインです。 以前下記リンクで紹介していますが、ようわかっとらんかったんで(汗)再度書きます。 ページャ …

no image

switch(true)イディオム

switch文は通常、文字や数字で分岐をさせることが多いですが、実は条件式を入れることも可能です。 私の場合、正規表現を動的に変えたいケースがあり、検索したところ似たケースがありました。 http:/ …