form_withを使って、ユーザーが新規作成される仕組みを理解する

webサービスで新規登録やユーザログインのときに使われる、form_withというヘルパーメソッド。

Railsチュートリアルなどで突然登場して、なんとなく使い方が分かってるけど説明はできない「曖昧状態」になっていませんか。

今回は、form_withを使って、ユーザーが新規作成される仕組みを理解する記事を書いていこうと思います！

そもそも「フォーム」とは？

• nameとvalueがペアになってサーバに送られる

• nameとvalueはinputやselectやradioなどに付与される

• action属性に指定されたURLに対して入力値が送られる

引用記事:
[https://qiita.com/DaichiSaito/items/cd66115569b0a75f1bfa#11-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%A8%E3%81%AF%E3%81%8C%E6%9B%96%E6%98%A7]

この3つをはじめてみたとき？？？という感じでした。

例を挙げて説明してみます。

railsチュートリアルから以下のコードを引っ張ってきました。

<%= form_with(model: @user, local: true do |f| %>
      <%= f.label :name %>
      <%= f.text_field :name %>

      <%= f.submit "Create" %>
    <% end %>

これがHTMLソースに変換されると

<form accept-charset="UTF-8" action="/users" class="new_user"
      id="new_user" method="post">
  
  <label for="user_name">Name</label>
  <input id="user_name" name="user[name]" type="text" />

  <input  name="commit" type="submit"
         value="Create" />
</form>

※local: trueとは？
local: trueがない場合、Rails5ではAjaxによる送信という意味になる。
HTMLとしてフォームを送信する場合にlocal: trueが必要になります。

例えば、フォームの名前に「たろう」と入力されると

  <input id="user_name" name="user[name]" type="text" value="たろう" />

このようになります。

そしてformタグのaction属性に指定されたURL("/users" )に対して、nameとvalueが送られます。

コントローラ

    @user = User.new(params[:user])

params[:user]というのは、送られてきたnameに対応しています。今回であればname="user[name]" value="たろう"が送られてきているので、@userというインスタンスにname:"たろう"が格納されます。

form_withのしていること

<%= form_with(model: @user, local: true do |f| %>
      <%= f.label :name %>
      <%= f.text_field :name %>

整理すると、

• model: @user・・・入力値を格納するインスタンスとaction属性を指定("/users")

• local: true・・・HTMLとしてフォームを送信する場合にlocal: true必要

• <%= f.label :name %>・・・フォームのラベルを決めている

• <%= f.text_field :name %>・・・HTMLに変換されるとname="user[name]" type="text"になる

何が起きているかわからないとなってしまうform_withですが、
HTMLコードに分解して考えると、理解しやすいですね。
ブラウザの開発者ツールからHTMLソースを見る癖をつけていきましょう。