2020/12/14~2020/12/16
今週の内容
・商品詳細表示機能の実装
・商品詳細ページへのリンク
トップページから詳細ページへのリンクを作る
ルーティング、コントローラーに詳細ページへのコードを記入
rails routesでshowへのpathを探す
ビューに書き込む
<%= link_to item_path(item.id), method: :get do %>
・詳細ページの編集
トップページでは画像のリンクを
<%= image_tag item.image, class: "item-img" %>
と書いていたが
詳細ページでは
<%= image_tag @item.image, class:"item-box-img" if @item.image.attached? %>
と＠を付けないとエラーになった
理由がわからなかったため明日メンターさんに質問する
・条件によって詳細画面の表示を変更
if文を用いて、条件分岐を作成する
<% if current_user.id == @item.user_id %>
current_userの時は.ドットでidとつなげ
@itemの時は_アンダーバーで繋ぐ
違う理由は
current_userのidを取得
＠itemからuser_idを取得するからである
感想
問題が解決してもなんでそうなったのかわかるようにしていく
今日の疑問点の質問を明日忘れずに解決する
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をもらった
感想
似たようなエラーが起き、前の記録をみたいことが多くあった
今後タグや強調表示を上手く使いながら
似たエラーの時すぐに調べられるようにしたい
2020/12/2~2020/12/6 20hレベル上げ
毎日更新があまりできていない現状から
週一でブログ更新という形に変えていく
今週の内容
・ユーザー管理機能の実装終了
メンターさんからのレビューでLGTMをいただいたのでherokuへデプロイしたところ新規登録画面やログイン画面へ移動できないエラーが発生した。
原因はherokuでのDBのマイグレーションが上手くいっていないことだった
heroku run rails db:migrate
でDBのマイグレーションを行い
再度
git push heroku master
をしたら無事動作が確認できた
・商品出品機能の導入
・商品出品情報を保存するためのモデルとテーブルを作成する
itemsテーブルの作成 rails g model item
カラムの追加
アソシエーションの追加
・ActiveStorageを導入する
gemで導入するものだと思っていたが
rails active_storage:install で導入
has_one_attached :カラム名 でカラムと結びつき画像が保存できる
最後にrails db:migrate をする
この時結びつけるカラム名をitemsテーブルにimageカラムを作らないといけないのかと思い、エラーがおきた
Active_storageでdbは作成されるので他のdbと関連付ける必要はなかった（ビューのカラム名と合っていればいい）
また、忘れていた部分として一度migrateしたdbにカラムを追加するにはroll backしてstatusをoffにする必要がある
感想
ブログを毎日更新は難しいが、やったことは忘れないようにアウトプットは続けていきたい
2020/12/13 10hレベル上げ
今日の内容
・商品一覧表示機能の実装
ルーティング、コントローラーにindexを追加
ビューを変更
商品一覧画面でactive_hashで記述した配送料の負担の項目を表示させたい
しかし、
<span><%= item.price %>円<br><%= item.deliver_fee_id %></span>
現在の表記だとidの数字として表示されてしまう
nameが欲しいので
<span><%= item.price %>円<br><%= item.deliver_fee.name %></span>
となる
この部分でdeliver_fee_id.nameと書いていたためエラーが発生してしまった
itemとアソシエーションで紐付いているのはdeliver_fee_idではなくモデル名のdeliver_feeなのでこのような記述になる
商品がある場合には表示されないようにしたいが条件式が上手くいかなかった
<%# 商品がある場合は表示されないようにしましょう %>
nilは空の何もない状態であり
@itemsには配列が読み込まれているので何もない状態にはならない
<%# 商品がある場合は表示されないようにしましょう %>
<% if @items.length == 0 %>
配列の数を数えることで条件を満たすことができる
感想
まだまだ進捗はよくない
カリキュラムを一緒に学んでいるかたからチーム開発をやってみないか？という話をいただいたのでそちらも同時に進めていきたい
2020/11/2 2hレベル上げ
今日の内容
・ログイン画面のエラー解消
新規登録は上手くいき、DBにも保存できたが、ログインは上手くできなかった
原因はログインビューのform_withの設定ができていなかった
<%= form_with model: @user, url: user_session_path,class: 'registration-main', local: true do |f| %>
urlのpathはrails routesでの
devise/sessions#create のPrefixとなる
user_session_pathとなる
感想
もっと早くメンターさんに質問すれば良かった
調べる力も必要だが質問した方が知りたいことがわかるし、説明はわかりやすいことがわかった
今日の一言
『努力は裏切らない』
2020/11/27 8hレベル上げ
今日の内容
・ユーザー管理機能のバリデーションの修正
バリデーションを設定
”＠”がないとエラーになるというバリデーションを設定したかったが
inclusion: { in: "@" }
と入力したがうまく表示されなかった
”＠”がないとエラーになるというバリデーションはdeviseに元から導入されているので改めて書く必要のないものだった。
数字と文字を含める
validates :password, format: { with: /\A(?=.*?[a-z])(?=.*?\d)\w{6}\z/
空だと保存できない、全角ひらがな、全角カタカナ、漢字でないと保存できない
validates :sei, presence: true, format: { with: /\A[ぁ-んァ-ン一-龥]+\z/ }
・新規登録のテストコード作成
テストコードはエラーメッセージ名を変更した際はそっちに合わせないと保存できない
validates :password, format: { message: "Include both letters and numbers" }
it 'passwordが半角英数字混合でないと登録できない' do
@user.password = 'aaaaaa'
@user.valid?
expect(@user.errors.full_messages).to include('Password Include both letters and numbers')
end
感想
思ったよりエラーがでてしまう
バリデーション 、deviseの理解が浅いので時間がある時にまとめを作りたい
今日の一言
『諦めたらそこで試合終了』
2020/11/26 2hレベル上げ
今日の内容
ユーザー新規登録画面でデータを入力して実行してもデータベースに記録されないエラーが発生
ターミナルを見ると
Unpermitted parameter: :encrypted_password
と書いてあり
encrypted_passwordが許可されていないということのようだ
スペルミス等をチェックし、検索して調べたが解決できなかったためメンターさんに質問
結果
ビューファイルで定義しているencrypted_passwordはdeviseの実行と共に定義されるものであるから
ビューファイルでのアクションはpasswordのみになるとのこと
ビューファイル変更後エラーが解決し、データベースにも保存できた
感想
今日でユーザー管理機能のレビュー依頼を出す予定だったが新たなエラーによって止まってしまった
明日はこれを解決し、レビュー依頼まではいきたい
今日の一言
『夢は逃げない、逃げるのは自分』
