かずきの日記

エンジニア・起業・人生の日記

Ruby on Rails初心者必見！条件付き（カテゴリ・順番・数・状態など）でトップページに物を表示する方法　

gem Ruby on Rails Ruby IT TECH::EXPERT プログラミング初心者 プログラミングスクール プログラミング スクール エンジニア

どうもかずきです！

 

今回は

Ruby on Rails　条件付きでトップページに出品したものを表示する方法

という内容でお送りします！

 

関連画像

開発段階のローカル環境で機能を確認したい方必見です！

※データベースの作成はできている状態として説明していきます

 

投稿機能を作れている人、投稿した人、済んでいる人は②からご覧ください

 

①データ情報db/seeds.rb に仮データを突っ込む

テーブル毎にレコードを作る書き方

Sequel Proなどを利用して書く方法が一般的ですが、今回はseeds.rbでの書き方を紹介します！

テーブル量が多いと管理しづらいので、書くテーブル毎の書き方がオススメです

 

dbの下にseedsディレクトリを作り、モデル名.rbファイルを生成

 

db/seeds/post.rb

Post.create (
  [
     {
     },
  ]
)

 上記の例で言えば、postsテーブルの情報作成準備ができました

 

db/seeds/post.rb

Post.create (
  [
    {
　    id: 1,
      name: "test-1",  
 　   text: "test-1です",
　　  level: 500,
　    condition: 0,
      category_id: 5
      user_id: 1,
    },
    {
　    id: 2,
      name: "test-2",  
 　   text: "test-2です",
　　  level: 1000,
　    condition: 0,
      category_id: 4
      user_id: 1,
    },  
    {
　    id: 3,
      name: "test-3",  
 　   text: "test-3です",
　　  level: 300,
　    condition: 1,
      category_id: 9
      user_id: 2,
    },  
  ]
)

 複数ある場合はこのように書きます

ここで気を付けなければならないのが、データベース作成時の制約でnull :falseとなっているものは書き忘れや型の表記ミスがないようにしましょう

 

アソシエーションを意識（重要）

上記の中のuser_idや、category_idなどはpostに紐づいている別テーブルなので

post.rbと同じように別ファイルを作成しましょう

これをやらないとデータ作成するときに外部キーエラーが起こります

 

コマンド　bundle exec rails db:seed:モデル名を実行

ターミナル

$ bundle exec rails db:seed:post

 

このように書くことで各データを分割して生成できるわけです

 

②コントローラに表示したいデータ情報を書き込む

postsコントローラを例にすると、表示させたいとある条件のpostsを全て表示する場合は以下のように書きます

 

app/controllers/posts_controller.rb

@表示させたい物のインスタンス変数名 = モデル名.all

 

これを基本形として考えて次の内容で条件をつけてみましょう

 

カテゴリーの階層がある場合

数種類カテゴリーがあってシンプルなカテゴリーid指定をしてあげる方法なら簡単ですが、gem 'ancestry'などを使って階層にしている場合の指定がわからないときがあると思います

 

例えばアパレル系のサイトみたいに。。

メンズ＞トップス＞ジャージ

のようになっている時です

 

この時、メンズアイテム全てを表示したい時、

categoryテーブルのid(一番左) の並びがこうなってる場合

 

app/controllers/posts_controller.rb

@posts = Post.where.(category_id: 200)

 このように指定してあげたとしても、category_idが200のメンズしか持ってこれず、その配下の物は対象外になってしまいます

カテゴリーを孫要素まで指定しないといけない規律を作っている場合などはなおさらアウトです

 

なので、idを複数指定や範囲指定してあげたいときは以下の書き方のなります

 

（例）category_id 1と5と10のように複数指定

app/controllers/posts_controller.rb

@posts = Post.where.(category_id: 1, 5, 10)

 

・（例）category_id 1から10のように範囲指定

app/controllers/posts_controller.rb

@posts = Post.where.(category_id: 1..10)

 

これでidだけでも自由に指定が可能です　この２つの混合ももちろんできます 

順番

順番指定するときはorderメソッドが無難でしょう

先ほどのid指定（1から10）に加えて書いてみます　↓

 

app/controllers/posts_controller.rb

@posts = Post.where.(category_id: 1..10).order('条件にしたいカラム名　順番')

 

有名どころの投稿された時間の昇順だとこうなりますね　↓

 

app/controllers/posts_controller.rb

@posts = Post.where.(category_id: 1..10).order('created_at　DESC')

 

数

ここでいう数とは、表示したい数の制限のことです

これはlimitメソッドを使いましょう　10個にしたいときは。。。

 

app/controllers/posts_controller.rb

@posts = Post.where.(category_id: 1..10).order('created_at　DESC').limit(10)

 こうなります　

状態

statusのような状態カラムを作っている場合

例えばこんなとき使いたいですよね

 

・商品アプリなどで売られている物と、売れた物を分けるとき

・タスクアプリなどの一覧で未完了、完了、実行中を分けるとき

 

このような場合、売れた商品を出したくないときや、完了したタスクを出したくないときありますよね？

 

このときにあらかじめデータを保存するときや更新するときにstatusを変更する記述をコントローラに書いている前提とすると

※statusの型をintegerとしているとき（商品アプリの売られている状態をデフォルト指定して値を0、売れた状態の値を1とする）且つ、売られている商品を出したい時

 

app/controllers/posts_controller.rb

@posts = Post.where.(category_id: 1..10).order('created_at　DESC').limit(10).where.not(condition: 1).where(condition: 0)

 このようにwhere.notとwhere両方書いている方が確実でわかりやすいかも

まあ簡単にいうとwhere.notを使えば、出したくない条件をつけられます

 

 

 

 

③ビューに反映させる

情報の反映

eachメソッドを使う

index.html.haml

- @posts.each do |post|
  -# eachメソッドで複数のデータを一つ一つ取り出す  ||の中身は変数で、１つ１つの個別データ

画像やその他文字列も可能

 

  .post.name
    #{post.name}
  -# 変数である個別データの名前(nameカラムとする)を変数文字列として表示
  -# 基本形は#{変数.カラム名}

これが値を表示する基本的な方法です 

 

他にも情報を表示させたいときに使いそうなパターンを紹介します

・ログインしているユーザーのプロフィール画像

index.html.haml

.post-image
  = image_tag current_user.image
  -# devise機能を使えば、ログインしているユーザの写真(imageカラムとする)をcurrent_userから引っ張れる

・コメント数やレベルや値段などに使いがちな数値

index.html.haml

.post-comments-count
  #{post.comments.count}
  -# この場合はpostに紐づいたコメントの数　テーブルに紐づく値なので複数形

 

 ざっくりですがこれで表示できるはずです

 

いかがだったでしょうか

データベース作成などについては省いてしまいましたが、これらを使えば簡単な投稿アプリなどは作れると思います

 

今回はこの辺で

今後もわかりやすい内容を意識して発信していきたいと思います！ 

また、プログラミングスクールに興味がある方向けの記事や

私が3ヶ月前に完全未経験から通い始めたTECH::EXPERTの体験談も書いています！

以下のような特典もあるのでぜひチェックしてみてください！

〜TECH::EXPERTお得な情報　受講料最大２万円OFF！！〜

  1. 紹介者欄に『奥田和記』と記入→受講料１万円OFF
  2. 上記に加えて無料カウンセリング参加→さらに受講料１万円OFF

この他に割引特典などももらえることがあります！

 

それでは！