2020/12/7~2020/12/12 レベル上げ
今週の内容
・商品出品機能の導入
・商品出品ページの表示とデータの保存
MVCの流れを作る
ルーティング設定
コントローラーにアクションを追加
ビューの作成
実装後ルーティングエラーが発生
ルーティングエラーの場合、ルーティングが間違っているか、ビューにルーティングが送られていないことが原因である
今回はビューでミスがあった
form_with についてもっと勉強が必要
修正後カテゴライズされたデータのみ保存されないエラーが発生
コントローラーとビューは問題なかったが
バリデーションに問題があった
class Item < ApplicationRecord
has_one_attached :image
belongs_to :user
with_options presence: true do
validates :image
validates :name
validates :explanation
validates :price
with_options numericality: { other_than: 1, message: "Select" } do
validates :category
validates :deliver_fee
validates :shipping_area
validates :shipping_day
validates :status
end
end
extend ActiveHash::Associations::ActiveRecordExtensions
belongs_to :category
belongs_to :deliver_fee
belongs_to :shipping_area
belongs_to :shipping_day
belongs_to :status
end
アソシエーションとバリデーションの違いが理解できていなかった
アソシエーションはモデルにつけるものなのでidがいらない
バリデーションはカラムにつけるものなのでcategory_idなどのようになる
またアソシエーションにはpresence trueは自動で実装されるためいらない
修正すると
class Item < ApplicationRecord
has_one_attached :image
belongs_to :user
with_options presence: true do
validates :image
validates :name
validates :explanation
validates :price
end
with_options numericality: { other_than: 1, message: "Select" } do
validates :category_id
validates :deliver_fee_id
validates :shipping_area_id
validates :shipping_day_id
validates :status_id
end
extend ActiveHash::Associations::ActiveRecordExtensions
belongs_to :category
belongs_to :deliver_fee
belongs_to :shipping_area
belongs_to :shipping_day
belongs_to :status
end
このようになる
・単体テストコードの実装
factory.botでのuserをどうするか悩み過去カリキュラムに戻った
・javascriptで金額入力時に販売手数料や販売利益の計算結果が表示されるようにする
表示がNaNとなってしまうエラーが発生
その時のコードが
エラー
window.addEventListener('load', () => {
// 金額を入力した数値をpriceInputという変数に格納する
const priceInput = document.getElementById("item-price");
priceInput.addEventListener("input", () => {
const addTaxDom = document.getElementById("add-tax-price");
addTaxDom.innerHTML = Math.floor ( inputValue * 0.1 )
const profitDom = document.getElementById("profit");
profitDom.innerHTML = Math.floor ( inputValue - addTaxDom )
})
});
定義したaddTaxDomという値がエラーを起こしていた
解決方法が２種類あり
１つ目がaddTaxDomを計算では使わない方法
window.addEventListener('load', () => {
// 金額を入力した数値をpriceInputという変数に格納する
const priceInput = document.getElementById("item-price");
priceInput.addEventListener("input", () => {
const addTaxDom = document.getElementById("add-tax-price");
addTaxDom.innerHTML = Math.floor ( inputValue * 0.1 )
const profitDom = document.getElementById("profit");
profitDom.innerHTML = Math.floor ( inputValue * 0.9 )
})
});
２つ目が addTaxDomを変数として定義し直す方法
window.addEventListener('load', () => {
// 金額を入力した数値をpriceInputという変数に格納する
const priceInput = document.getElementById("item-price");
priceInput.addEventListener("input", () => {
const addTaxDom = document.getElementById("add-tax-price");
addTaxDom.innerHTML = Math.floor ( inputValue * 0.1 )
const tax = Math.floor ( inputValue * 0.1 );
const profitDom = document.getElementById("profit");
profitDom.innerHTML = Math.floor ( inputValue - tax )
})
});
結果として２つ目の方法の方がより良いらしい
理由は掛け算だと四捨五入が発生してしまうため、数値によっては一円の誤差が出てしまうからである
コードレビューをしてもらい、いくつか細かいところを修正してLGTMをもらった
感想
似たようなエラーが起き、前の記録をみたいことが多くあった
今後タグや強調表示を上手く使いながら
似たエラーの時すぐに調べられるようにしたい
