商品詳細表示機能② 販売価格表示も3桁区切りにしてみよう
商品出品機能実装過程で、販売手数料と販売利益はカンマ区切り表示になるようにしました。
ただ、販売価格についてはJavaScriptの絡みがあってうまく実装できずにいました。
商品詳細表示機能を実装していく中で、詳細画面に遷移した際に表示される情報としては、
- 商品名
- 商品画像
- 販売価格
- 出品者
- カテゴリー
- 商品の状態
- 配送料の負担
- 発送元の地域
- 発送日の目安
上記の項目を表示させるようにします。
インスタンス変数.カラム名 でデータの取得が可能です。
販売価格を表示させようと思ったら、
@item.price で可能ではあるのですが、ここもどうにかしたらカンマ区切り表示させられるんじゃね？
と思い立ち、調べてみることにしました。
すると、やっぱりあったー。
number_to_currency 通貨表示
number_to_currency は Rails フレームワークに組み込まれているヘルパーメソッドで、通貨をフォーマットするための便利なメソッドです。 これは Rails の ActionView ヘルパーの一部であり、HTML テンプレート内でよく使われます。
もうひとつ、数値を3桁区切り表示にさせる技があります。
to_sメソッド 数値を文字列オブジェクトに変換
to_s メソッドは基本的な Ruby メソッドで、オブジェクトを文字列に変換するためのものです。 例えば、数値を文字列に変換したい場合は、
12345678.to_s # => 12345678
このように記述します。
ここに引数で :delimited を渡すことによってカンマ区切り表示されます。
12345678.to_s(:delimited) # => 12,345,678
to_s メソッドを使って数値を文字列に変換することはできますが、あくまでも文字列。 さくっとカンマ表示できたらいいや、ってときはいいかもです。 ただ、通貨のフォーマットなどは手動で行う必要があります。
number_to_currency を使用すると、通貨のフォーマットや桁区切りなどが自動的に適用され、より便利になります。
わたしが採用した記述はこちら。
<%= number_to_currency(@item.price, unit: "¥", precision: 0, format: "%u %n" ) %>
このように記述すると、
こんな感じで表示されます。
| オプション | 説明 |
|---|---|
| unit: "￥" | 通貨マーク |
| precision: 0 | 小数点以下非表示（整数） |
| format: "%u %n" | 円マークと数値の間に空白 |
precisionオプション を使わないと小数点以下が表示されてしまいます。
precision: 0 とすることで整数表示になります。
number_to_currency は通貨なので数値ですね。currendy ですからね。
もうこれは好みですね。お好きな方でどうぞって感じ。
ChatGPT先生によると、
# format: "%u %n" は、通貨の表示形式を指定するためのオプションです。具体的には、%u は通貨単位を表し、%n は数値部分を表します。 例えば、unit: "¥" を指定している場合、%u は "¥" を表示し、%n は数値を表示します。 このようなフォーマット指定を使うことで、通貨の単位と数値部分をカスタマイズすることができます。
とのこと。
◆例
number_to_currency(1234.56, unit: "¥", format: "%u %n") # 結果: "¥ 1,234.56"
この場合、"%u %n" により "¥" と数値がスペースで区切られて表示されます。 この部分を変更することで、通貨の表示形式をカスタマイズできます。
いろいろなアプローチができますね。
