テクノロジー

2018年12月28日

HTMLソースからコントローラへ値が送られる仕組み①

Aws4 request&x amz signedheaders=host&x amz signature=5aa17610ca54722061b53edfacc46e302bfe51673feb4ae7f2b02bfa2b83b7ff

HTMLソースからコントローラへ値が送られる仕組み①

フォームから値を入力して送信した後、DBに値が保存される。
言葉にすれば簡単ですが、裏側では複雑な処理が行われています。具体的には以下の通りです。

  1. form_forがHTMLソースに変換される
  2. 入力した値がparamsに乗ってコントローラに届く
  3. ストロングパラメータでDBに保存する値を絞り込む

今回は3回に分けてHTMLソースからコントローラへ値が送られる仕組みを見ていきましょう。

form_forがHTMLソースに変換される流れ

そもそもフォームを作るときはビューファイルにformタグをベタ書きで実装してしまえば済む話です。ではなぜform_forが存在しているのでしょうか?

答えは簡単で、form_forで書けば圧倒的に簡単にフォームを作ることができるからです。このように、HTMLタグだけで実装できるものの、使うと圧倒的に楽に実装できるお助けメソッドのことを「ヘルパーメソッド」と呼びます。
ヘルパーメソッドの例としては、link_toがあげられます。

では、ブログ投稿機能を例にform_forを見ていきましょう。

[app/views/new.html.erb]

<%= form_for(@blog, url: blogs_path) do |f| %>
  <%= f.text_field :title %>
  <%= f.text_area :content %>
  <%= f.submit %>
 <% end %>

form_forの()内には、モデルのインスタンスと送信先を書きます。form_forの定義は、「モデルに紐づいたフォームを生成する」となっているのでここでは必ずモデルのインスタンスを入れなければなりません。

モデルのインスタンスとは、newメソッドで生成された「空のレコード」または既存のレコード1つ分を指します。

このhtml.erbファイルが変換されて全て静的なHTMLソースになると以下のようになります。

<form class="new_blog" id="new_blog" action="/blogs" accept-charset="UTF-8" method="post">
  <input type="text" name="blog[title]" id="blog_title" />
  <textarea name="blog[content]" id="blog_content">
  <input type="submit" name="commit" value="Create Blog" />
</form>

さらにform_forにはもう1つルールがあります。それは、HTTPメソッドがデフォルトで「POST」となっていることです。
以下のようにmethodがpostになっているのがわかります。

<form () method='post'>

以上のことを図解するとこうなります。

https://diveintocode.gyazo.com/d854bf58a01726ba0fb08a3c572c65f5

注目すべきは、blog[title], blog[content]です。
この2つの値が「params」という乗り物に乗ってリクエストと一緒に行き先(/blogs)に「POST」で送信されます。

次回 は「params」という乗り物の正体について解説していきます。

DIVE INTO CODEのことをもっと知ってみませんか?