f.hidden_fieldとhidden_field_tagの使い方【Ruby on Rails】

Ruby on Railsでは、form_withやform_forタグの中でパラメータをユーザが直接フォームから入力させないまま、値を受け渡したい時に使用するものとして

hidden_fieldとhidden_field_tag

があります。

controller で保持している user_id を次のアクションに渡したい、といった時に利用します。 formではユーザの名前などの情報を入力してもらって、裏側でuser_idを渡すイメージです。

使い方に少し注意が必要であるため、使用方法をまとめました。

また Ruby on Railsチュートリアルや初心者にとってこのふたつの違いはわかりにくいですし、混乱すると思うのでなるべくわかりやすく解説しようと思います。

対象読者

• Rails触り始めた人、入門者
• フォームを実装している人

f.hidden_fieldとhidden_field_tagの使い方

おおまかな違いは、 form_withやform_forの内部で使用するか、単体で使用するか、という使い方にあります。

form_withやform_forで渡すインスタンスがある場合(もしくはそれらのヘルパーを使っている場合)は、f.hidden_fieldを使います。

一個だけパラメータを他のアクションへ単体で渡したい時は、hidden_field_tagを使います。

hidden_field_tag は独立して利用できます。

hidden_field_tagについて

hidden_field_tagの方が使用方法はシンプルです。

<%= hidden_field_tag :email, @user.email %>

上記では、emailというパラメータに、 @user.emailの情報を渡しています。

rails serverで立ち上げているターミナルで、送信されたパラメータをチェックしてみましょう。

Parameters: {"utf8"=>"✓", "authenticity_token"=>"estvl2Qof29PNJrhiq59BmjeFMlVfXI4JqlzAY3oC/AyP3gTOKhj4VT5fyIm8FMPUEVTZ7rRHJ0LoYTVLaa2Zw==", "completed_item"=>{"title"=>"aaa"}, "email"=>"aaa", "commit"=>"できた！"}

"email"=>"aaa"といったようにパラメータが送信されているのがわかります。

公式ドキュメントの例はこちら。

hidden_field_tag 'tags_list'
# => <input id="tags_list" name="tags_list" type="hidden" />

hidden_field_tag 'token', 'VUBJKB23UIVI1UU1VOBVI@'
# => <input id="token" name="token" type="hidden" value="VUBJKB23UIVI1UU1VOBVI@" />

hidden_field_tag 'collected_input', '', onchange: "alert('Input collected!')"
# => <input id="collected_input" name="collected_input" onchange="alert('Input collected!')"
#    type="hidden" value="" />

第一引数に:idのようにシンボルで記述します。第二引数はvalue、つまり渡したい値になります。 HTMLとしての出力も書かれているので非常にわかりやすいです。

hidden_field_tag どのようなシンボルに(第一引数)、どの値を渡すか(第二引数)、という記述ですね。

注意点

params[:email]のようにハッシュを使って値を取り出す際に注意が必要です。

以下のコードはRails tutorialの10章より抜粋

<%= form_for(@user, url: password_reset_path(params[:id])) do |f| %>
      <%= render 'shared/error_messages' %>

      <%= hidden_field_tag :email, @user.email %>

      <%= f.label :password %>
      <%= f.password_field :password, class: 'form-control' %>

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation, class: 'form-control' %>

      <%= f.submit "Update password", class: "btn btn-primary" %>

このように<%= hidden_field_tag :email, @user.email %>では、
params[:email]で中身を参照できます。

hidden_fieldについて

次はform_withの中で使うケースが多いhidden_fieldを見ていきましょう。

こちらはhaml形式の記述になります。

hidden_fieldは以下のように、

第一引数にパラメータ名(シンボル)、第二引数部分にvalueとして受け渡す必要があります。

= f.hidden_field :shampoo_id, :value => shampoo.id

もしくは @shampoo をform_forで渡しているのであれば、

= f.hidden_field :shampoo, :value => shampoo.id

でも大丈夫です。

公式ドキュメントによると、

hidden_field(:signup, :pass_confirm)
# => <input type="hidden" id="signup_pass_confirm" name="signup[pass_confirm]" value="#{@signup.pass_confirm}" />

hidden_field(:post, :tag_list)
# => <input type="hidden" id="post_tag_list" name="post[tag_list]" value="#{@post.tag_list}" />

hidden_field(:user, :token)
# => <input type="hidden" id="user_token" name="user[token]" value="#{@user.token}" />

となっています。 form_forの部分で@userなどといったインスタンスを渡しているので、そのインスタンスの属性と値を指定してあげます。

()を省略するとスマートな記述に見えますね。

= f.hidden_field :shampoo_id, value: shampoo.id

まとめると、f.hidden_field そのインスタンスの属性、渡したい値は何か、という書き方ですね。

注意点

こちらの記述だと、paramsで引用する際には
params[:user][:email]に保存されます。

理由は、パラメータがネストしているためです。userが持つ、emailは、中身とかけば伝わりやすいでしょうか。

Userのモデルのnameカラムや、emailカラム、それぞれに受け渡したい場合は、こちらを利用するとわかりやすいでしょう。

f.hidden_fieldとhidden_field_tagのまとめ

Ruby on Railsを使った時のf.hidden_fieldとhidden_field_tagの違いをまとめました。

form_withを使っているviewファイルではf.hidden_fieldを利用することがほとんどで、それ以外ではhidden_field_tagで個別にパラメータに好きな情報を送ることができます。

ユーザに直接入力させることなく何かの値の受け渡しを行いたい場合は利用してみましょう。

公式ドキュメント

詳しい内容は公式ドキュメントを参照しましょう。
Ruby on Rails API

参考

qiitaの記事も参考にしました。
Ruby on Rails - hidden_fieldの使い方 - Qiita