数字のカンマ表示について

前回の商品出品機能実装完了から、気がつけば2週間も経ってしまっていた... 気を取り直して続きに取り掛かろう！と再び実装を進めるつもりだったのですが、 Issueに記載している『販売手数料と販売利益におけるカンマでの区切り表示は必須ではない』

に目がとまり、販売手数料と販売利益はカンマ表示できてる。でも入力する販売価格のカンマ表示ができてない。ここもできるのでは！？と気になりだしたら試したくなるわたし。

きっと方法があるはず、と調べてみると

number_to_currency(数値, オプション={})

数値を通過のフォーマットに変換させるものとしてこのようなものがあるらしい。

railsdoc.com

オプションとして :delimiter を使うとカンマ表示ができるようだ。

でも、一体どこにコードを書くのか... ChatGPTに聞いてみる。

すると、

number_to_currency メソッドは、Railsのヘルパーメソッドであり、通常は ActionView::Helpers::NumberHelper モジュールに含まれています。このメソッドを使用するためには、ActionView::Helpers::NumberHelper モジュールを ItemsHelper モジュールに取り込む必要があります。

とのこと。

# app/helpers/items_helper.rb
module ItemsHelper
  include ActionView::Helpers::NumberHelper

  def number_to_currency(price)
    super(price, delimiter: ',')
  end
end

このようなコードを紹介される。

早速やってみるがこれだけでは表示されない。

もう少しChatGPTとやりとりを続けてみると、このヘルパーメソッドを使用するためには、関連するビューでヘルパーモジュールを読み込む必要があるらしい。例えばの提案コードがこちら。

# app/controllers/items_controller.rb
class ItemsController < ApplicationController
  helper ItemsHelper

  # コントローラのコード
end

同じように "helper ItemHelper" をわたしのコードにも追記してみる。でもまだ表示されない。

さらに続くやりとり。

初心者脳のわたしの質問にイラッとした様子のChatGPT。新たに二択の提案をしてくれました。

ビューファイルの適切な場所で "number_to_currency" を使用する
JavaScriptを使用して動的にフォーマットを変更する

ビューファイルに "number_to_currency" を組み込んでみるとエラーで真っ赤になってしまったので後者で攻めてみることにする。きっと適切な場所ではなかったんだろう。

window.addEventListener('turbo:load', () => {
  const itemPrice = document.getElementById("item-price");
  itemPrice.addEventListener('input', () => {
    const addTaxPrice = Math.floor(itemPrice.value * 0.1);
    const profit = itemPrice.value - addTaxPrice;

    const addTaxPriceElement = document.getElementById("add-tax-price");
    const profitElement = document.getElementById("profit");

    // itemPriceの値をtoLocaleStringを使ってフォーマット
    itemPrice.value = Number(itemPrice.value).toLocaleString('ja-JP');

    addTaxPriceElement.textContent = addTaxPrice.toLocaleString('ja-JP');
    profitElement.textContent = profit.toLocaleString('ja-JP');
  });
});

このようにファイルを修正。すると、数字の1,000まではうまくいく。でも、10,000にすると "NaN"と表示されてしまう。うーーーーん、わからんーーーーー。

と、ちょっとした好奇心から数時間消費するという悪夢。いまだ解決せず。

どなたか、詳しい方がいらっしゃったら教えてください。

気分転換に次のIssueに進みたいと思います。