railsチュートリアル第七章 ユーザー登録フォーム

ユーザー登録フォーム

今度はユーザー登録フォームを作成しましょう。
signupのページに示したとおり、ユーザー登録ページはまだ空白のままなので、このままではユーザー登録できません。
この節の目標は、登録欄を作成することです。

form_withを使用する

ユーザー登録ページで重要な要素は、ユーザー登録に不可欠な情報を入力するフォームです。
Railsでform_withヘルパーメソッドを使います。
このメソッドはActive Recordのオブジェクトを取り込み、そのオブジェクトの属性を使ってフォームを構築します。

ユーザー登録ページ /signup のルーティングは、Usersコントローラーのnewアクションに既に紐付けられていることを思い出してください。
したがって、次のステップは、form_withの引数で必要となるUserオブジェクトを作成することになります。
必要となる@user変数の定義は、下のようになります。

class UsersController < ApplicationController

  def show
    @user = User.find(params[:id])
    # データベースからユーザー情報を取り出す
  end

  def new
    @user = User.new
    #新しくユーザーオプジェクトを作成する
    # オブジェクトの属性をつける
  end
end

フォームそのものは下に示します。7.2.2で詳しく触れますが、まずはSCSSで見栄えを整えてみましょう。
box_sizingミックスインをリスト 7.2から再利用していることに注目してください。
これらのCSSルールが一度適用されると、ユーザー登録ページは図 7.13のようになります。

新規ユーザーのためのユーザー登録フォーム

app/views/users/new.html.erb

<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_with(model: @user, local: true) do |f| %>
      <%= f.label :name %>
      <%= f.text_field :name %>
      <!--名前をつける欄を作成-->

      <%= f.label :email %>
      <%= f.email_field :email %>
      <!--email-->

      <%= f.label :password %>
      <%= f.password_field :password %>
      <!--パスワード-->

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation %>
      <!---->

      <%= f.submit "Create my account", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

ユーザー登録フォームのCSS

app/assets/stylesheets/custom.scss

/* forms */

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  @include box_sizing;
}

input {
  height: auto !important;
}

演習

1.試しに、ブロックの変数fをすべてfoobarに置き換えてみて、結果が変わらないことを確認してみてください。
確かに結果は変わりませんが、変数名をfoobarとするのはあまり良い変更ではなさそうですね。その理由について考えてみてください。
確認　成功。