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

jQuery子要素の取得方法など

jQueryで要素を取得する方法って$(“セレクタ”)しか知らなかったんですが、他にもいろいろあることがわかったのでちょっと紹介。 例えばtrの列の中に横1列に<inpu …

no image

npmでのJSライブラリインストール&ビルド(※Laravel使用時)

JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。 bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。 先日仕事でnp …

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …

no image

JavaScriptでの時計作成

今回はWebアプリで1秒ごとに更新されるデジタル時計の作成方法について。 基本的には 現在時刻を秒まで含めて表示 その関数を一秒ごとに更新 でOKです。 ネットにどんぴしゃりのサンプルが落ちていたので …

no image

JavaScriptでのDom操作に関して

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