アプリ作成5〜7日目ー商品出品機能

商品出品機能は大きく2つに分けられます。
1️⃣商品を登録できるようにする
2️⃣金額入力時に販売手数料や販売利益の計算結果が表示されるようにする

1️⃣商品を登録できるようにする、を細分化します。

• 手順1 商品出品情報を保存するためのモデルとテーブルを作成する

• 手順2 ActiveStorageを導入する

• 手順3 ActiveHashを導入する

• 手順4 バリデーションを設定する

• 手順5 商品出品ページを表示できるようにする

• 手順6 出品した商品の情報をテーブルに保存できるようにする

• 手順7 モデルの単体テストコードを書く

<手順1>商品出品情報を保存するためのモデルとテーブルを作成する

rails g model item(単数系！間違えないで！)
生成されたマイグレーションファイルに、カラムの詳細情報を記載
rails db:migrateし、userモデルとのアソシエーションも記載

<手順2>ActiveStorageを導入する

画像を投稿する場合に必要なのがActiveStorage。
まずは画像加工のツールを導入してから
ActiveStorageを導入していきます。
画像加工のツールはImageMagickってやつですが、
Railsで使えるものを2つ導入しておきます。
まずはターミナルで下記を実行。

brew install imagemagick

ImagemagickをRailsで使うためにMiniMagickってのがあるので
Gemfileの一番下に下記を記載したらbundle installを実行。

gem 'mini_magick'
gem 'image_processing', '~> 1.2'

rails sで再起動したらActive Storageの導入に入ります。
ターミナルで下記を実行しrails db:migrateを実行。

rails active_storage:install

ここまできたらやることが2つ。
・Active Storageのテーブルとitemsテーブルのアソシエーションを定義
・items_controller.rbにて、imageカラムの保存を許可(後でもよさそう)

アソシエーションの定義ではhas_one_attached :imageを記載
コントローラーへはストロングパラメーターの記載（下記参照）

　　　　private

  def item_params
    params.require(:item).permit(:content, :image).merge(user_id: current_user.id)
  end

<手順3>ActiveHashを導入する

ActiveHashは変更されないデータで使うgemです。
手順をさらに細分化します。

• ActiveHashのGemをインストールする

• ActiveHashを利用するモデルファイルを作成する

• ActiveHashを利用するモデルファイルと商品モデルのアソシエーションを記述する

• 商品モデルでActiveHashを利用するための記述をする

• ActiveHashを利用するモデルクラスは、ActiveHash::Baseを継承する

まずgemfileの一番下にgem 'active_hash'を記載しbundle install。

それぞれプルダウンで示すファイルを手動で作成し、内容を記載していく。
下記に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

<手順4>バリデーションを設定する

ここまででまだ触れていない、商品の名前や内容、価格についても含めて
item.rbにバリデーションを記載していく。

<手順5>商品出品ページを表示できるようにする

newアクションでMVCを意識しながら書いていく。

<手順6>出品した商品の情報をテーブルに保存できるようにする

createアクションでMVCを意識しながら書いていく。基本に忠実に。

<手順7>モデルの単体テストコードを書く

ユーザー管理機能のところで
FactoryBotやFakerは導入しているので、rails g rspec:model itemで
テストコードを記載するファイルを作成します。

必要な項目を洗い出して正常系、異常系に分けて書く！

※私はここでよくスペルミスをしてエラー出しまくるので、
みなさんはスペルミス注意^^;

---

2️⃣金額入力時に販売手数料や販売利益の計算結果が表示されるようにする

ここにくるまでに親族のイベントや体調不良が重なりえらい時間かかった^^;

手順は5つ。

• 手順1 必要なJSファイルを作成する

• 手順2 必要な要素を取得する

• 手順3 入力するたびにイベントを発火できるようにする

• 手順4 必要なvalue属性を取得できるようにする

• 手順5 HTMLをJavaScriptで作成し、ブラウザ上に描画できるようにする

<手順1>必要なJSファイルを作成する

販売手数料などを書くファイルをjavascript配下に作成し、以下のように記載。

window.addEventListener('load', () => {
   console.log("OK"); });

application.jsに下記のように記載。←ディレクトリにマジで注意！！

require("../item_price");

書いたらアプリのコンソールを開いて、OKがでるか確認。

<手順2> 必要な要素を取得する

今欲しいのは「金額を入力したら、販売手数料と販売利益を表示すること」

欲しいセレクタは3つ。

• 金額を入力する場所のidセレクタ

• 販売手数料を表示する場所のidセレクタ

• 販売利益を表示する場所のidセレクタ

いずれもビューファイルに記載のあるidを参考に書いていきます。
その都度console.logで確認しながら進めましょう。

<手順3>入力するたびにイベントを発火できるようにする

以下のような記載（例）で金額を入力すると「イベント発火」と出るようにします。

});が1つ抜けてミスったので、気をつけて^^;

<手順4>必要なvalue属性を取得できるようにする

金額を入力してその値を取得し、それを元に自動で手数料と利益を計算していくので、
まずそれが値として取得できるかを確認していく。

このように入力したら、画面のコンソールで値をいれて確認。

<手順5>HTMLをJavaScriptで作成し、ブラウザ上に描画できるようにする

parseIntという文字列を数字に変換するものを用いています。
また計算結果はMath.floorメソッドを使用して整数に変換しています。
これは必須ではありませんが、toLocaleStringメソッドを使用して3桁ごとにカンマを挿入するように設定しました。

ここまでくるになかなか長かったですが、注意点としては
自分で設定したカラム名は最後まで守って、テストコードも書くようにする。

そうでないと後々不具合がでます。

また前回のユーザー管理機能のテストコードでもそうでしたが、
必要なテスト項目の洗い出しがきちんとできるようにすることも大事。

時間はかけ過ぎずに、きっちり洗い出せるスキルを磨いていきたいもんです。

ここまでで感じたことは
FactoryBotやFakerがもう少しスムーズに使えるようになりたいな、ということ。
公式サイトを見たり、いろいろなアプリを作成していく中で磨いていきたいと思いますが、

先輩のみなさま方がもしご覧でしたら、テストコードの勉強法をご教授いただければ幸いです。