【Rails6】ラジオボタンの使いづらさ解消 ＆ Bootstrap5.3を使ったレイアウト調整

はじめに

Railsを使って学習を進めていると、機能として動いてはいるんだけどなんだか使いづらい…という場面に多々遭遇します。
今回は、絶妙に使いづらかったラジオボタンの使い勝手を、ちょっとだけ向上させたときの内容をご紹介します。

基本の記述

form_withでtext_fieldなどを呼び出すときのように、ラジオボタンを作成しようと思うと、以下のような形になります。

絶妙に使いづらいラジオボタン

<%= form_with model: @item, url: items_path do |form| %>
    
    <%= form.radio_button :is_active, :true %>
    <%= form.label :is_active, "公開" %>
    
    <%= form.radio_button :is_active, :false %>
    <%= form.label :is_active, "非公開" %>

<% end %>

これでもラジオボタン自体は表示されるのですが、このままではラジオボタン部分からしか選択できず、labelに指定した「公開」と「非公開」の文字を押してもフォーム部分が反応してくれません。

この問題に関しては単純で、こちらの記事を参考にさせていただきました。

つまり、先ほどのラジオボタンの場合、label部分の指定を変えることでクリック判定を付けることが出来るようです。

ちょっと使いやすいラジオボタン

<%= form_with model: @item, url: items_path do |form| %>

     <%= form.radio_button :is_active, :true %>
-    <%= form.label :is_active, "公開" %>
+    <%= form.label :is_active_true, "公開" %>
    
     <%= form.radio_button :is_active, :false %>
-    <%= form.label :is_active, "非公開" %>
+    <%= form.label :is_active_false, "非公開" %>

<% end %>

単純ですが、これだけでラジオボタンの使いやすさ全然違います。

Bootstrapを使ったレイアウト調整

まず前提として、私は、bootstrap5.3をCDNで導入しています。
他のバージョンですと上手く反映されない場合もありますのでご注意ください。

ちなみに完成イメージはこんな感じです。

このラジオボタンを作るためのビューがこちら…

Bootstrapを適応したラジオボタン

<%= form_with model: @item, url: items_path do |form| %>
    <%= form.radio_button :is_active, true, class: "form-check-input" %>
    <%= form.label :is_active_true, "公開", class: "form-check-label text-success fw-bold ps-2" %>
    
    <%= form.radio_button :is_active, false, class: "form-check-input" %>
    <%= form.label :is_active_false, "非公開", class: "form-check-label text-danger fw-bold ps-2" %>
<% end %>

細かい文字色やすき間の設定については置いておいて、フォーム自体は単純にBootstrapが用意してくれている「form-check-label」や「form-check-input」を設定してます。

「label」に「form-check-label」を指定するのはなんとなく分かると思いますが、
「radio_button」に「form-check-input」を設定する理由はRailsガイドを見るとはっきりと分かります。

<%= form.radio_button :age, "child" %>
<%= form.label :age_child, "I am younger than 21" %>
<%= form.radio_button :age, "adult" %>
<%= form.label :age_adult, "I am over 21" %>

出力は以下のようになります。

<​input type="radio" id="age_child" name="age" value="child" />
<​label for="age_child">I am younger than 21
<​input type="radio" id="age_adult" name="age" value="adult" />
<​label for="age_adult">I am over 21

このように、「form.radio_button」を記述するとHTMLとしてはinputタグが生成されます。

合わせてBootstrapのチェックボックスを作るための記述例を見ると、

<​input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<​label class="form-check-label" for="flexCheckDefault">
Default checkbox
<​/label>

inputタグにform-check-inputが指定されているのが分かります。
これでformタグへのclass指定の意味がつながりました。

ちなみに、Railsガイドのラジオボタンの説明をよく見ると、
<%= form.radio_button :age, "child" %>
<%= form.label :age_child, "I am younger than 21" %>
のように、ラベル部分もクリックできるようになる記述方法で書かれていました。
最初のクリック判定もきちんと公式に明記されていたようです。
しっかりと公式から正しい記述を確認することの重要性が分かりますね…。

Bootstrapの色を変更

絶妙にラジオボタンの色がサイトの雰囲気に合わなかったので、変更することにしました。

scss

label.text-danger {
    color: #C33E4C!important;
}

label.text-success {
    color: #008276!important;
}

.form-check-input:checked {
  border-color: #EAEAEA!important;
  background-color: #F69BA2!important;
}

ちなみに、既に記述してしまっていた他の部分もまとめて変更したかったため、今回はBootstrapの「text-danger」や「text-success」を直接上書きしています。

チェックした時の色は「.form-check-input:checked」で設定しています。

検索後にラジオボタンのチェックが外れないようにする

検索フォームにラジオボタンを設定していると、検索後の画面でラジオボタンが外れてしまい、連続して検索したいときが少し使いづらくなってしまいます。

そこで、検索後に、ラジオボタンが選択されている状態かどうかを判定してビューへ渡すことにします。

完成イメージはこんな感じです。

コントローラの記述

※検索のロジックについてはややこしくなっているので、今回はある程度省略しています。

searches_controller.rb

  def search
:
    @content = params[:content]
    @model = params[:model].presence || 'item'
    @search = if @model.in?(['address', 'shop'])
                { model: @model }
              else
                { model: 'item' }
              end

    if @search[:model] == 'item'
      @records = Item.where('name LIKE? OR introduction LIKE?','%'+@content+'%','%'+@content+'%')
                     .order(updated_at: 'DESC')
:
:
    end
:
:
end

ポイントは、@​searchの部分です。
今回は検索方法をmodelで指定しており、デフォルトを「商品（item）」検索にしたかったのでmodelが送信されていない状態ではitemにチェックが入るようにしています。

@​modelが「住所（address）」か 「ショップ（shop）」だったらそのまま@​modelを指定して、そうでなければ「商品（item）」を指定してます。

ビューの記述

先ほどコントローラで定義した「@​search」をビューで呼び出して、ラジオボタンが選択されているかどうかの判定を行います。

text

<%= f.radio_button :model, 'item', checked: @search[:model] == 'item', class: "form-check-input" %><%= f.label :model_item, "商品", class: "form-check-label text-white fw-bold ps-2" %>
<%= f.radio_button :model, 'address', checked: @search[:model] == 'address', class: "form-check-input" %><%= f.label :model_address, "住所", class: "form-check-label text-white fw-bold ps-2" %>
<%= f.radio_button :model, 'shop', checked: @search[:model] == 'shop', class: "form-check-input" %><%= f.label :model_shop, "ショップ", class: "form-check-label text-white fw-bold ps-2" %>

「checked: @​search[:model] == 'item'」の部分で判定しています。

checked属性についてはこちら…

論理属性で、チェックボックスが既定で（ページが読み込まれたときに）チェックされているかどうかを示します。チェックボックスが現在チェックされているかどうかを示すものではありません。チェックボックスの状態が変化した場合、このコンテンツ属性は変化を反映しません。（HTMLInputElement の checked IDL 属性のみが更新されます。）

今回の場合、@​search[:model] == 'item'がtrueの場合、checkedが設定され、このラジオボタンが選択された状態になります。

これで、私が気になったラジオボタンの使い勝手の悪さ解消はひとまず完了です。

おわりに

いかかでしょう？
ちょっとしたことですが、これだけで操作時のストレスが少し軽減されたのではないでしょうか。

機能として取り入れるだけだと単純ですが、使いやすさを考えるといくらでも改良の余地はあることが分かります。
まだまだ修正できる部分はあるはずなので、ユーザービリティを考慮しながら開発を進められるように気を配っていきたいです…！