Zenn
📕

データベースなしで学ぶform_withの使い方

に公開
Rails
初学者向け
form
tech

Railsチュートリアルを始めてから1週間。現在は第5章「レイアウトを作成する」まで進みました。気分転換もかねて、今の段階で作れそうな簡単なWebアプリを作ってみようと思い立ちました。
今回考えているアプリは、「ログイン機能なし」「データベースを使わない」シンプルな体重管理アプリです。
ちょうど、フォームにデータを入力し、それをコントローラーに送信する方法として form_with の使い方を学んだばかりなので、その内容をまとめておこうと思います。

form_withとは?

そもそもですが、form_withとは、railsで情報を送信するためのヘルパーメソッドです。
これを使うことで、入力フォームに必要なHTMLを簡単に作成することができます。
form_with は入力フォームを作成するためのメソッドであり、通常は Viewファイルに記述します。
尚、form_with の基本的な使い方は以下の通りです。

form_withの基本的な使い方

  1. データベースを使わない場合（例：form_tagなど）
    form_tagのように入力された情報をデータベースに保存しない時は、以下のように記述します。
<%= form_with url: "パス" do |form| %>
  <!--フォーム内容 -->
<% end %>

上記の様に url: オプションを使って送信先を指定します。
フォームの入力内容はModelとは無関係に処理され、Controller側で params を使って受け取ります。

  1. データベースに保存する時は、以下のように記述します。
<%= form_with model: モデルクラスのインスタンス do |form| %>
  <!--フォーム内容 -->
<% end %>

今回はデータベースを使わず、シンプルな体重比較アプリを作る予定なので、
1つ目の 「データベースを使わない場合」 を使う方法を前提に進めていきます。

実際に使用しているフォームのコードは次の通りです

今回作成したシンプルな体重管理アプリは、2日分の体重を入力すると、
その増減に応じて異なる画像が表示される仕様になっています。
そのため、View側ではユーザーが2日分の体重を入力できるフォームを用意します。

実際のコードを以下に示します。

<%= form_with url: weights_judge_path, method: :post, local: true, data: { turbo: false } do %>
  <div>
    <label>1日目：</label>
    <%= number_field_tag :day1 %> kg
  </div>
  <div>
    <label>2日目：</label>
    <%= number_field_tag :day2 %> kg
  </div>
  <%= submit_tag "比較" %>
<% end %>

まず、このHTMLフォームで体重を入力して「比較」ボタンを押すと、
その入力値が params を通じて WeightsController の judge アクションに渡されます。
今回のフォームでは、number_field_tag を使って:day1 と :day2 という名前で値を送信しているため、
コントローラー側では params[:day1] と params[:day2] でそれぞれの値を取得できます。

<%= form_with url: weights_judge_path, method: :post, local: true, data: { turbo: false } do %>

せっかくなので、method:以降の記述についても簡潔ですが、説明いたしますと、
・method: :post
→入力されたデータ（params）をコントローラーのアクションに送信するためのHTTPメソッド

・local: true
→フォーム送信後、ページ全体をリロードする通常の動作にします。
Railsでは、フォームが自動的にJavaScript（非同期）で送られることがありますが、
それを無効にして「昔ながらの普通の動作」に戻すのがこの設定みたいです。
＊特に初心者やシンプルなアプリでは、この設定を入れておくと動きが分かりやすくなる！

・data: { turbo: false }
→Turbo（Railsの一部機能）を無効にします。
　Turboは画面の一部だけを更新してくれる便利な機能ですが、
今回はページ全体をリロードさせる方がシンプルなので、この設定を入れています。
＊local: true だけでは不十分な場合でも、これを入れると確実にTurboの自動処理を止めることができる。

つまり、このオプション設定により、フォームの送信方法を「POST（送信）」にしつつ、
ページをリロードして結果を表示するシンプルな動きにしている、ということです。

最後に

現在、調べながら学習を進めていますが、個人的にはまだ Turbo については十分に理解できていないため、今後調べていこうと思います。
また、form_with の書き方には他にもさまざまなパターンがあるので、こちらも調べながら進めていきます。

ここまで読んでいただきありがとうございます！
内容に誤りなどありましたら、ぜひご指摘いただけると嬉しいです！

Discussion