simple_formを使って簡単に入力フォームを作成

simple_formとは

最低限の記述でformを生成することができるgemです。

simple_formを使うための設定

まずGemfileにsimple_formのgemを追加してbundle installします。

gem 'simple_form'

generatorを起動させるコマンド実行します。

$ rails generate simple_form:install

bootstrapを適用させたい場合はbootstrapオプションをつけてコマンド実行します。

$ rails generate simple_form:install --bootstrap

simple_formの書き方

実際にsimple_formを使ってビューに書いてみます。

<%= simple_form_for @user do |f| %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.button :submit %>
<% end %>

この記載だけでラベルやエラーなどの入力が含まれています。
下記のRailsのデフォルトのformヘルパーを使った書き方と比べるとコード量の違いが一目瞭然です。

<%= form_with @user do |f| %>
  <% if object.errors.any? %>
   <div id="error_messages" class="alert alert-danger">
     <ul class="mb-0">
       <% object.errors.full_messages.each do |msg| %>
         <li><%= msg %></li>
       <% end %>
     </ul>
   </div>
  <% end %>
  <div class="form-group">
    <%= f.label :username %>
    <%= f.text_field :username, class: "form-control" %>
  </div>
  <div class="form-group">
    <%= f.label :password %>
    <%= f.password_field :password, class: "form-control" %>
  </div>
  <%= f.submit (t 'defaults.register'), class: 'btn btn-primary' %>
<% end %>

入力フォームを変更する

simple_formではデフォルトでついてしまうラベルの表記などを変更したり、つけなかったり、またformヘルパーのように新たなオプションをつけることもできます。

ラベル名の変更をしてみる

<%= f.input :username, label: '名前' %>

フォームに初期値を入れてみる

<%= f.input :username, placeholder: '田中太郎' %>

バリデーションエラーメッセージを表示しない

<%= f.input :username, error: false %>

ラベルの名前はlocals配下にあるja/ymlファイルに日本語表記を準備しておけば何も定義せずに日本語に表記が変わります。これはformヘルパーの時と同じですね！

as:を使って型変更をする

またsimple_formはデータベース内の列タイプ(string型など)を調べ、列に適切な入力を使用します。たとえば、text型で作成された列は、デフォルトでtextarea入力を使用します。この入力フォームに関してもオプションをつけて変更することが可能です。
例としてarticleのtitle(string型)をtextarea入力することができるように変更してみました。

<%= simple_form_for @article do |f| %>
  <%= f.input :title, as: :text %>
  <%= f.button :submit %>
<% end %>

ラジオボタンの実装で躓いたので備忘録

画像の横幅を選択するラジオボタンをsimple_formを使って実装してみます。
画像の横幅のカラム名は:image_areaのinteger型に設定しました。

$ rails g migration AddImageAreaToArticles image_area:integer
$ rails db:migrate

enumを使って「左、中央、右」の列挙型にします。

article.rb

enum :image_area { left: 0, center: 1, right: 2 }

articleの新規作成ビューに次のように記述しました。

new.html.erb

<%= simple_form_for @article do |f| %>
  <%= f.input :image_area, as: :radio_button %>
<% end %>

ラジオボタンで選択する仕様に変わるかと思ったら、フォーム入力の設定になっていたので、検証ツールをみてみました。するとclass名に'form-control enum_radio_buttons optional'という記述があったので'form-control'について調べてみました。

input, select, textareaのようなテキスト形式のコントロールは form-control が付与されています。

Forms - Bootstrap 4.1 日本語リファレンス

と書いてあり、as: :radio_buttonで型変更を行ったけど機能していないのかなと思いました。なので公式に書いてあったinput_fieldを使うと無事にラジオボタンを実装することができました。

<%= simple_form_for @article do |f| %>
  <%= f.input_field :image_area, as: :radio_button %>
<% end %>

参考 : GitHub - heartcombo/simple_form: Forms made easy for Rails! It's tied to a simple DSL, with no opinion on markup.

またenum_helpを定義しておくとラベルを日本語表記にしてくれます。

config/locals/enum.ja.yml
ja:
  enums:
      article
          image_area:
                left: '左寄せ'
                center: '中央'
                right: '右寄せ'