【Rails】furimaアプリ 商品出品機能実装 #4

実装概要

• コードレビュー後の指摘部分を修正
  • 商品の出品に失敗して出品ページに戻った際もjavascriptが動作するよう、renderメソッドに対応したイベントを追加
  • priceカラムは、整数のみ保存が行われるようバリデーションを追加
    理由：現状の記述だと、小数の販売価格が保存できてしまうため
  • カテゴリーの選択肢が見本アプリと異なるようなので、確認の上、コードを修正

商品の出品に失敗して出品ページに戻った際もjavascriptが動作するよう、renderメソッドに対応したイベントを追加

app/javascript/items_new.js

function setPriceEventListener() {
  const priceInput = document.getElementById("item-price");
  const addTaxDom = document.getElementById("add-tax-price");
  const profitDom = document.getElementById("profit");

  if (!priceInput) return;

  priceInput.addEventListener("input", () => {
    const inputValue = priceInput.value;

    if (inputValue >= 300 && inputValue <= 9999999) {
      const tax = Math.floor(inputValue * 0.1);
      const profit = inputValue - tax;

      addTaxDom.innerHTML = tax.toLocaleString();
      profitDom.innerHTML = profit.toLocaleString();
    } else {
      addTaxDom.innerHTML = '';
      profitDom.innerHTML = '';
    }
  });
}

document.addEventListener('DOMContentLoaded', setPriceEventListener);
document.addEventListener('turbo:load', setPriceEventListener);
document.addEventListener('turbo:render', setPriceEventListener);

1. setPriceEventListener関数：setPriceEventListenerという名前で関数を定義し、イベントリスナー内の処理をまとめる
2. if (!priceInput) return;：ページにpriceInputが存在しない場合、エラーを防止するためにイベントの登録をスキップ
3. 各イベントにsetPriceEventListenerを追加：DOMContentLoaded、turbo:load、turbo:renderの3つのイベントで動作するように設定

priceカラムは、整数のみ保存が行われるようバリデーションを追加

app/models/item.rb

# 中略
validates :price, presence: true, numericality: {
    only_integer: true,
    greater_than_or_equal_to: 300,
    less_than_or_equal_to: 9_999_999
  }

only_integer: true: このオプションを追加することで、priceの値が整数であることを強制する。

併せて単体テストコードにpriceが整数以外の場合は出品できないを追記

spec/models/item_spec.rb

# 中略
it 'priceが整数でないとき出品できない' do
        @item.price = 5000.5
        @item.valid?
        expect(item.errors.full_messages).to include 'Price must be an integer'
      end
# 中略

カテゴリーの選択肢が見本アプリと異なるようなので、確認の上、コードを修正

app/models/category.rb

class Category < ActiveHash::Base
  self.data = [
    { id: 1, name: '---' },
    { id: 2, name: 'メンズ' },
    { id: 3, name: 'レディース' },
    { id: 4, name: 'ベビー・キッズ' },           #修正
    { id: 5, name: 'インテリア・住まい・小物' },  #修正
    { id: 6, name: '本・音楽・ゲーム' },         #修正
    { id: 7, name: 'おもちゃ・ホビー・グッズ' },
    { id: 8, name: '家電・スマホ・カメラ' },
    { id: 9, name: 'スポーツ・レジャー' },
    { id: 10, name: 'ハンドメイド' },
    { id: 11, name: 'その他' }
  ]

  include ActiveHash::Associations
  has_many :items
end

これは単純な確認ミスなので今後は出てこないようにしていきたいです。
指摘部分の修正が完了したので、再度コードレビューを依頼してきます！！

LGTMいただいたので次の実装に取り組んでいきます！！