前置き
railsチュートリアルをベースにした自作アプリに、評価機能を実装しようとしました。
しかし、調べても出てくるのはせいぜいラジオボタン2個での実装だったりrails5とか4の古い情報・・・
ratyを使う方法は数多くヒットしましたが、どうやらjavascriptを使わなければならないようです。
javascriptに苦手意識のある私は、それを回避してどうにか簡単に実装できないかと考えました。
そこで目についたのが、ラジオボタンという機能です。これを使ってさくっと実装しちゃおうと思いました。
ということで自分が実装に至るまでやったことをまとめたいと思います。
私自身初心者ですので至らぬ部分があるかと思います。ご了承ください。
何を作る
投稿フォームにラジオボタンを並べて選択できるようにする。
micropost一覧画面で、投稿者が選択した評価をみられるようにする。
環境
Ruby on Rails 6.0.2.1
前提
railsチュートリアルにおいてmicropost投稿機能が完成していること。
実装
micropostsテーブルにrateカラム追加
rails g migration AddRateToMicroposts rate:string
class AddRateToMicroposts < ActiveRecord::Migration[6.0]
def change
add_column :microposts, :rate, :string
end
end
上記の様なマイグレーションファイルができるかと思います。
ここまできたら、
rails db:migrate
これでデータベースの用意は完了です。
コントローラの編集
micropostsコントローラ内のmicropost_paramsで定義されている部分に:rateを追加します。
class MicropostsController < ApplicationController
(略)
private
def micropost_params
params.require(:micropost).permit(:content, :picture, :rate)
end
(略)
end
viewの作成
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_with(model: @micropost, local: true) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<div class="field">
<%= f.text_area :content, placeholder: "本文を入力" %>
</div>
<div class="micropost_rate">
<p>海水浴場の評価</p>
<%= f.radio_button :rate, :"非常に悪い" %>
<%= f.label :rate, "非常に悪い", value: :"非常に悪い" %>
<%= f.radio_button :rate, :"悪い" %>
<%= f.label :rate, "悪い", value: :"悪い" %>
<%= f.radio_button :rate, :"普通", checked: true %>
<%= f.label :rate, "普通", value: :"普通" %>
<%= f.radio_button :rate, :"良い" %>
<%= f.label :rate, "良い", value: :"良い" %>
<%= f.radio_button :rate, :"非常に良い" %>
<%= f.label :rate, "非常に良い", value: :"非常に良い" %>
</div>
<span class="picture">
<%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>
</span>
<%= f.submit "投稿する", class: "btn btn-primary" %>
<% end %>
</div>
</div>
rateについて記述した部分はもっと綺麗に書けそうな気がしますが・・・。
"checked: true"と記述すると、あらかじめチェックが入った状態でラジオボタンを用意することができます。
私はチェックなしの状態で投稿されたくないと考えたのでこのように書きました。
バリデーションもあるとなお良しだと思います。
<li id="micropost-<%= micropost.id %>" data-micropost-id="<%= micropost.id %>">
(略)
<span>
<p>海水浴場の評価</p>
<%= micropost.rate %>
</span>
</li>
終わりに
該当コードのみざっと書いてしまったのでわかりづらくなってしまったかもしれません。
気づいたことがあれば今後も改良していきます。
また、改善点等ありましたらコメントで教えていただけると嬉しいです!