simple_formをbootstrap,日本語対応して使う

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

#使い方

bootstrapとsimple_formを使うので

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

をしておく

assets/javascripts/application.jsに

```javascript


//= 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に対応していて中身を見ると

```erb
<%= 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を

```ruby 

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に

```ruby 
resources :people
```

と加える。


後は

views/people/new.html.erbを

```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に対応してフォームができている。

それでも問題があり

![simple_Form.png](https://qiita-image-store.s3.amazonaws.com/0/207921/c6600b6c-b5e1-b3df-cb11-c4272e62cc5e.png)


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

一応

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

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

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

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

```ruby
config.i18n.default_locale = :ja 
```

と書いておく必要がある


そして

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


```yml 

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


そうすると


![simple_form2.png](https://qiita-image-store.s3.amazonaws.com/0/207921/b993e8aa-2e8e-46ba-9ac9-12801a39620d.png)


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


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

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

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

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

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

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

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

![simple_form3.png](https://qiita-image-store.s3.amazonaws.com/0/207921/854c3e15-69c8-65d8-33c8-613f3f648273.png)

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



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

として

assets/stylesheets/application.scssに

```scss 

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

を追加すれば

![simple_form4.png](https://qiita-image-store.s3.amazonaws.com/0/207921/b12353eb-db08-5736-c73d-c5dd53031739.png)


いい感じになります。


次にバリデーションです

people_controller.rbを

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

このようにして

model/person.rbに

```ruby 
validates :name, presence: true
```

を追加する。

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

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

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



config/application.rbに

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

を追加

localesの下に

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

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

https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/ja.yml

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

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

```yml 

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


```

を追加する

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

```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: '年齢'

```

これを追加する。

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

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


![simple_form5.png](https://qiita-image-store.s3.amazonaws.com/0/207921/db84ebc2-7ad2-0fc9-44b9-fbe3b7822a81.png)




みたいにできる！


終わり:sunny: