【Ruby on Rails】投稿に紐づくカテゴリーの一覧ページを自作で作成する方法
- 2019.08.02
- Ruby on Rails
- Ruby on Rails
こんにちは、nishi_talk(@nishi_talk)です。
投稿を管理する、またユーザーが必要としている投稿を探しやすくするようにするために、カテゴリー分けは必須ですよね。
今回は投稿（post）に紐づくカテゴリーの一覧ページを自作で作成する方法をご紹介します。
前提条件
- ruby 2.5.1
- Rails 5.2.0
まずお断り
カテゴリー分けるをする方法を検索していたら、いろいろとアンチパターンなるものがあるらしい。
今回ご紹介する方法がベストプラクティス！っていうわけではないので、あくまで一つの方法って感じで試してみて下さい。
今回目指すところ
- 投稿（posts）と作成するときにカテゴリー（category）は一つだけ選択可能。
- https://xxxxt/posts → 投稿一覧を取得して表示
- https://xxxx/posts?category_id=1 → category_idが1に紐付いているの投稿一覧
データベース構造
データベースはこんな感じで設定しました。
メッセージ（posts）
class CreatePosts < ActiveRecord::Migration[5.2]
def change
create_table :posts, options: 'ROW_FORMAT=DYNAMIC' do |t|
t.references :category
t.text :title, null: false
t.timestamps
end
end
end
カテゴリ（categories）
class CreateCategories < ActiveRecord::Migration[5.2]
def change
create_table :categories, options: 'ROW_FORMAT=DYNAMIC' do |t|
t.string :slug, null: false
end
end
end
リレーションは１投稿に１カテゴリーが紐づくように設定しました。
（1）Posts <-> （1）Categories
マイグレーションをしてデータベースを作成
$ rails migrate
データベースはこんな感じになります。
mysql> show columns from posts; +---------------+--------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +---------------+--------------+------+-----+---------+----------------+ | id | bigint(20) | NO | PRI | NULL | auto_increment | | category_id | bigint(20) | YES | MUL | NULL | | | title | text | NO | | NULL | | | created_at | datetime | NO | | NULL | | | updated_at | datetime | NO | | NULL | | +---------------+--------------+------+-----+---------+----------------+ mysql> show columns from categories; +-------------+--------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------------+--------------+------+-----+---------+----------------+ | id | bigint(20) | NO | PRI | NULL | auto_increment | | slug | varchar(255) | NO | | NULL | | +-------------+--------------+------+-----+---------+----------------+
routeの設定
投稿が表示できるようにrouteを設定します。
config/route.rb
Rails.application.routes.draw do resources :posts, param: :id end
Modelの設定
リレーションをmodel部分に設定します。
今回は１対１なのでbelongs_toとhas_oneでリレーションをはります。
app/models/post.rb
class Post < ApplicationRecord belongs_to :category end
app/models/post.rb
class Category < ApplicationRecord has_one :post end
Controllerの設定
indexにPostの一覧を取得するようにします。
urlにcategory_id(params)がある場合は、category_idで絞った投稿を取得してきます。
それ以外はすべての投稿を取得するようにします。
- https://xxxxt/posts → 投稿一覧を取得して表示
- https://xxxx/posts?category_id=1 → category_idが1に紐付いているの投稿一覧
app/controllers/posts_controller.rb
class PostsController < ApplicationController
def index
# urlにcategory_id(params)がある場合
if params[:category_id]
# Categoryのデータベースのテーブルから一致するidを取得
@category = Category.find(params[:category_id])
# category_idと紐づく投稿を取得
@posts = @category.posts.order(created_at: :desc).all
else
# 投稿すべてを取得
@posts = Post.order(created_at: :desc).all
end
end
end
Viewの設定
最後に@postのオブジェクトをview側で表示します。
app/views/posts/index.html.erb
<% @posts.each do |item| %> <%= item.title %> <% end %>
あとは、各URLごとにアクセスして、表示できていればOKです。
データベースの知識がまったく無かったので、どうやってCategory_idに紐づく投稿を取得するかがよくわかりませんでしたが、URLで分岐すれば簡単に取得することができました。
未経験からでもエンジニアにはなれる！
中堅の年代になり、最近よくどうやってエンジニアになったんですか？と聞かれる機会が多くなりました。私は転職組で未経験からエンジニアになりました。 そこら辺のストーリーは「未経験からWebデザイナーになった経緯を紹介」で書いているのでそちらをご覧ください。
当時はWebの技術を教えてくれるスクールがあまりなく、私はWebの勉強は独学で勉強し転職したのですが、今はスクールの数も多くなっていてオンラインで受講できるところも増えてきました。
もし私が未経験でエンジニアを目指すなら活用したいスクールを紹介してますので興味ある方はぜひ参考にしてくだいさい！
tech boostオンライン
tech boostはエンジニアに特化したキャリアサービスを展開しているBranding Engineerが運営するオンラインプログラミングスクールです。
エンジニアに特化したキャリアサービスを展開しているからこそのカリキュラムを実現しています。 また、転職サポート付きでスクール卒業後もキャリアも安心です。
オンラインスクールだからいつでもどこでも受講可能！これからプログラミングを学びたい方、エンジニアにキャリアチェンジを考えている方に、 特にオススメのサービスです。
CodeCamp（コードキャンプ）
オンライン・マンツーマン指導のプログラミングスクールとしてNo.1*の実績を持つサービスです。高い学習効果が評価されテレビや新聞、ビジネス誌など*多くのメディアで紹介されています。
講師は全て現役のエンジニア。未経験から確実に習得するために開発されたオリジナルカリキュラムでWebデザイン、Webサービス開発、アプリ開発などを幅広く学習することができます。
多くの受講生が、現役エンジニアの手厚いマンツーマン指導によって確実にプログラミングを習得し、キャリアアップ・転職・独立起業などの目標を実現しています。
DMM WEBCAMP
転職を本気で考えている方向けのプログラミングスクールです。転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです！
プログラミング未経験者でも安心のサポート体制をご用意しており、特に受講者アンケートでは『サポート体制がしっかりしていて魅力的』、『転職を保証していただいていることで安心』というレビーが多くしっかとしたサポートを提供しています。
実務に近い実践的なカリキュラムで、DMM WEBCAMPはチーム開発など、実務により近い実践的カリキュラムを導入しているため、転職先・就職後にいち早く活躍できるスキル・経験を積むことができます。
Udemy
私の周りの現役のエンジニアの人も活用しています。基礎をしっかり固めたい方や、実践向けの配信など幅広く解説している動画が豊富にアップされているので活用するのはオススメです。
習得したいスキル（プログラム言語）が明確で、年収アップのために学習している方やAI・機械学習を学んでスキルアップを目指しているエンジニアの方に支持されているます。
1講座あたり数千～数万円程度で実践的なスキルアップを経済的でオススメです。
