7.2 ユーザー登録フォーム
ユーザー登録フォームを作成していく 見本はRailsチュートリアル本文参照
7.2.1 form_forを使用する
ユーザー登録ページで重要な点は、ユーザー登録に欠かせない情報を入力するためのformです。Railsでform_forヘルパーメソッドを使います。このメソッドはActive Recordのオブジェクトを取り込み、そのオブジェクトの属性を使ってフォームを構築します。
ユーザ登録ページの/signupのルーティングはUsersコントローラーのnewアクションに紐づけられている (5.4.1 Usersコントローラ参照) →form_forの引数として必要なUserオブジェクトを作成 →@user変数を定義する
class UsersController < ApplicationController
def show
@user = User.find(params[:id])
end
def new
@user = User.new
end
end
フォームの見た目を整える(組み込みのコードについては後程7.2.2にて)
<% provide(:title, 'Sign up') %>Sign up
#customなCSSで定義されていないクラス名はBootstrapの固有クラスっぽい<%= form_for(@user) do |f| %> <%= f.label :name %> <%= f.text_field :name %> <%= f.label :email %> <%= f.email_field :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 %>
.
.
.
/* forms */
#上記のコードに含まれていない要素名・クラス名がある!
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
#box_sizingミックスインを再利用している!
@include box_sizing;
}
input {
height: auto !important;
}
#上記のviewとCSSでブラウザに描写されたHTMLはこちら #viewのコードには含まれていなかったinputという要素名が書き出されている→定義したスタイルが適用される #セレクタで指定されている要素とクラスがnew.html.erbで描画されたテンプレート内で全て使われている訳ではないけど #追々どこかで使うんじゃないかな?
演習
- 試しに、リスト 7.15にある:nameを:nomeに置き換えてみましょう。どんなエラーメッセージが表示されるようになりますか?
- 試しに、ブロックの変数fをすべてfoobarに置き換えてみて、結果が変わらないことを確認してみてください。確かに結果は変わりませんが、変数名をfoobarとするのはあまり良い変更ではなさそうですね。その理由について考えてみてください。
1. NoMethodError in Users#new
undefined method `nome’ for #<User:0x00007f9a52820368> Did you mean? name
→Users#newにメソッドがないよ!というエラー →Userクラスのメソッドにはnomeって定義されてないんですけど!? →もしかしてnameじゃない?(親切!)
2. 変数名は好きに付けられる言えばつけられるけど意味を持たせた方が良い(良いではなくて、持たせるべき?) foobarはhogeなどと同意で意味を持たない文字列なので良くない 因みにこの場合、「f」は「form」のf
7.2.2 フォームHTML
新規ユーザーのためのユーザー登録フォーム(app/views/users/new.html.erb)を読み解く<blockquote class="quote-rort">通常、Railsヘルパーを使っている場合、実装の詳細について知っておく必要はありません。ただしfというオブジェクトが何をするのかは知っておく必要があります。</blockquote> と、言う事なのでざっくりしますが form_forヘルパー = フォームを作るに当たり 渡された引数の持つ属性とオブジェクト(f)を結び付けていい感じのHTMLにしてくれる便利な奴
><%= form_for(@user) do |f| %> . . . <% end %>
form_forヘルパーは引数(@user変数)の為のformタグを作る 更にブロックを取る そのブロック変数(f)は第一引数に渡したオブジェクト(@user)の属性に対するinputタグを生成するメソッドを呼び出す 参考↓ [blogcard url=”https://www.atmarkit.co.jp/ait/articles/1403/28/news035_3.html”]
それぞれの埋め込みrubyのコードと作成されたHTML
#これが <%= f.label :name %> <%= f.text_field :name %> #HTMLに出力されるとこうなる #これが <%= f.label :email %> <%= f.email_field :email %> #HTMLに出力されるとこうなる #これが <%= f.label :password %> <%= f.password_field :password %> #HTMLに出力されるとこうなる
type=”text” 内容をそのまま表示 type=”email” 内容をそのまま表示(モバイル端末では英数キーボードが出る様になったりする) type=”password”入力した文字を隠して表示
inputごとにある特殊なname属性
上記コードのハイライト部分の事 詳しくは7.4、7.3などとの事