業務アプリケーションを開発していると、カンマ付きの金額を扱う場合が頻繁にある。なんでもよきにはからってくれるRails君だが、何故かこのカンマ付き数値の扱いについては、非常にイケてない。例えば以下のようなscaffoldがあったとして・・・

$ rails g scaffold Sale sold_on:date product:string amount:decimal

金額をカンマ付きで入力してみると・・・

→

ああ、それ、一番やっちゃダメなやつだ・・・。これだとユーザーは「登録できたよ〜ん」って思っちゃって、後々まで間違いに気付かない可能性がある。

対応としては、以下の２通りがあると思う。

もちろんスマートなのは２の案。今回はこれをサクッと実現できるgemを導入して対応することにする。

環境

autoNumericというjqueryプラグインがある。これはテキストフィールドに自動的にカンマや通貨記号を挿入してくれる便利なプラグイン。デモサイトを見れば、その便利さは一目瞭然。このプラグインをgemにラップしたものを使用する。

gem 'autonumeric-rails'

bundle installしたら、application.jsに追記する。

//= require autonumeric

もちろんjqueryよりも下に定義すること。

動的にカンマ付きフィールドを生成する場合などに備え、用意されているrefreshトリガーを呼び出すようにしておく。どこぞやのcoffeeファイルに以下のコードを記述しておこう（turbolinksにも対応）。

ready = ->
  $(document).trigger('refresh_autonumeric')

$(document).ready(ready)
$(document).on('page:load', ready)

これにて準備は完了だ。

作ってみよう。text_filedメソッドにオプションを渡してあげるだけでよい。

  <div class="field">
    <%= f.label :amount %><br>
    <%= f.text_field :amount, data: { autonumeric: true } %>
  </div>

どんなテキストフィールドができあがるかというと・・・

おお！自動的にカンマが！しかしこれで喜んでいてはいけない。この状態で登録して、正しくデータが保存されるかが重要だ・・・

グラシアス！autoNumeric！ちゃんと登録できたのは、紛れもなく君のおかげ。

その他、書式を細かく設定することができるので、色々と試してほしい。例えば日本円を整数で登録させたいなら次のようなオプションになる。

f.text_field :amount, data: { autonumeric: { aSign: '¥ ', mDec: 0 } }

こんなに簡単に高機能なテキストフィールドが完成した。素敵です、autoNumeric。