0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Rails6で複数のラジオボタンを使って評価機能を実装する

Last updated at Posted at 2020-04-25

前置き

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
[timestanp]_add_rate_to_microposts.rb
class AddRateToMicroposts < ActiveRecord::Migration[6.0]
  def change
    add_column :microposts, :rate, :string
  end
end

上記の様なマイグレーションファイルができるかと思います。
ここまできたら、

rails db:migrate

これでデータベースの用意は完了です。

コントローラの編集

micropostsコントローラ内のmicropost_paramsで定義されている部分に:rateを追加します。

microposts_controller.rb
class MicropostsController < ApplicationController

  private
    def micropost_params
      params.require(:micropost).permit(:content, :picture, :rate)
    end

end

viewの作成

new.html.erb
<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"と記述すると、あらかじめチェックが入った状態でラジオボタンを用意することができます。
私はチェックなしの状態で投稿されたくないと考えたのでこのように書きました。
バリデーションもあるとなお良しだと思います。

_micropost.html.erb
<li id="micropost-<%= micropost.id %>" data-micropost-id="<%= micropost.id %>">
  (略)
  <span>
    <p>海水浴場の評価</p>
    <%= micropost.rate %>
  </span>
</li>

終わりに

該当コードのみざっと書いてしまったのでわかりづらくなってしまったかもしれません。
気づいたことがあれば今後も改良していきます。
また、改善点等ありましたらコメントで教えていただけると嬉しいです!

参考

Railsガイド
テックアカデミー記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?