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

JavaScriptでのDom操作に関して

画面系の複雑な処理をやる場合、JavaScriptを使うのですが、個人的に気をつけているポイントなど。 Contents1 ES6のクラス化2 DOM要素取得のポイント2.1 class自体でのスコー …

no image

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

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

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

新技術のメリットを理解したい場合(jQueryと比べた場合のVueのメリットなど)

Vueを昨年度ぐらいからコツコツと勉強しています。 正直、その理由の半分ぐらいは「流行っているから」というのが大きいですね(汗) エンジニアとしてはやはり新しい技術自体を追い求めること自体に「快感」の …