初めに

simple_formを使うことが全くなかったのでちょっと使ってみた。

使い方

bootstrapとsimple_formを使うので

gem 'bootstrap'
gem 'jquery-rails'
gem 'popper_js'
gem 'tether-rails'
gem 'simple_form'

をしておく

assets/javascripts/application.jsに



//= require jquery3
//= require jquery_ujs
//= require popper
//= require tether
//= require bootstrap

を追加する

bundle installしたのちに

rails g simple_form:install --bootstrap

とすればbootstrapに対応してくれるはず

とりあえず使ってみる


rails g scaffold user name:string
rails db:migrate

localhost:3000/usersにアクセスするとbootstrapに対応していて中身を見ると

<%= simple_form_for(@user) do |f| %>
  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>

  <div class="form-inputs">
    <%= f.input :name %>
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

となっている

今度は自動生成ではなく自分で作ってみる

rails g model person name:string age:integer
rails db:migrate
rails g controller people index new

として

people_controller.rbを


class PeopleController < ApplicationController
  def index
  end

  def new
    @person = Person.new
  end

  def create
    @person = Person.create(person_params)
    redirect_to people_path
  end 


  private 

  def person_params 
    params.require(:person).permit(:name,:age)
  end 
end

としてpersonを作成できるようにする

config/routes.rbに

resources :people

と加える。

後は

views/people/new.html.erbを

<div class="container">
    <%= simple_form_for(@person) do |f| %>
        <div class="form-group">
            <%= f.input :name %>
        </div>
        <div class="form-group">
            <%= f.input :age %>
        </div>
        <%= f.submit %>
    <% end %>
</div>

とすればbootstrapに対応してフォームができている。

それでも問題があり

こんな感じでNameやAgeと英語になってしまう。

一応

<%= f.input name:, label: '年齢' %>

みたいな感じで変えられる

ほかの方法としてlocale/ja.ymlを作ってそこで日本語化の設定を書くという方法がある。

そのためにはまずconfig/application.rbに

config.i18n.default_locale = :ja

と書いておく必要がある

そして

config/localesいかにja.ymlファイルを作成して


ja: 
  helpers:
    submit:
        create: '登録する'
        update: '更新する'
        submit: '保存する'
  simple_form:
    labels:
      person:
        name: 'ユーザー名'
        age: '年齢'
    hints:
      person:
        name: 'サインインするユーザ名を入力してください'
        age: '年齢を入力してください'
    placeholders:
      person:
        name: 'ユーザー名'
        age: '年齢'

そうすると

こんな感じでよくなってきた。

hintは下の文字でplaceholderはフォームの中に書いてある文字。

例えばhintを表示したくない場合は

<%= f.input :name, hint: false %>

とすれば表示されなくなります。

また必須項目であることを示すために何かマークや文字を入れたい場合は

required:
        html: '<abbr title="required">必須</abbr>'

みたいに書くらしいがこれだと

みたいに必須の文字の下に変なのが出て嫌なので

simple_form:
    required:
        html: '<abbr class="nec">必須</abbr>'

として

assets/stylesheets/application.scssに


.nec {
    background-color: red;
    color: white;
    font-weight: 500;
    margin-left: 20px;
    padding: 0px 4px 2px 4px;
}

を追加すれば

いい感じになります。

次にバリデーションです

people_controller.rbを

def create
    @person = Person.create(person_params)
    if @person.save 
      redirect_to people_path
    else 
      render :new 
    end 
  end

このようにして

model/person.rbに

validates :name, presence: true

を追加する。

このまま登録ボタンを押すと該当するフォームが赤くなるがメッセージが英語で出てしまう。

これを直すためにja.ymlファイルを編集しなければいけないがmodelの部分やエラーの部分などを日本語化しなくてはいけなくなり

ファイルがわけわからないことになってしまうのでya.ymlファイルを分けて保存できるようにする。

config/application.rbに

config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]

を追加

localesの下に

defaults,models,viewsフォルダを作成する。

defaultsフォルダの中にja.ymlファイルを作成して中身を

ここからコピーしたものを貼る。

modelsフォルダのしたにpersonフォルダを作成、その下にja.ymlを作って


ja:
  activerecord:
    models:
      person: ユーザー
    attributes:
      person:
        name: 名前
        age: 年齢

を追加する

viewsフォルダの下にja.ymlを作成して

ja: 
  helpers:
    submit:
        create: '登録する'
        update: '更新する'
        submit: '保存する'
  simple_form:
    required:
        html: '<abbr class="nec">必須</abbr>'
    labels:
      person:
        name: 'ユーザー名'
        age: '年齢'
    hints:
      person:
        name: 'サインインするユーザ名を入力してください'
        age: '半角英数字のみ使えます'
    placeholders:
      person:
        name: 'ユーザー名'
        age: '年齢'

これを追加する。

これで日本語化ができたので

試しにユーザー名を空欄にして登録ボタンを押すと

みたいにできる！

終わり