Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@iijima-naoya-45b(飯島 直也)

Form_withヘルパー【虎の巻】

Last updated at Posted at 2023-08-28

【概要】

Railsでフォームを作成する際には、form_withヘルパーが必須知識となります。ぜひマスターして使いこなせるようになりましょう！
またセットでrenderを使用することがありますが、そちらの詳細については別紙で解説しております。

環境

この記事は下記の実行環境で動作確認しております。
・Rails 7.0.4
・Ruby 3.1.4

Rails5.1以前のバージョンについては割愛しますので、そちらをご使用の方は下記記事をご参照ください。

【Rails】form_forの基本の基

Form_withヘルパーとは

まずは、Form_withヘルパーについて整理しておきましょう。
Form_withヘルパーとは下記のような機能を実装する手助けとなるものです。

・Viewファイル内で簡潔にフォームを生成することができるヘルパーを生成できます。

・入力値の送信先も設定できる為、コントローラへのデータ引き継ぎもスムーズに行うことができます。

From_withヘルパーを使用することで、上記のような恩恵を受け取ることができます！
(HTMLでのデータのやり取りをRailsでもできると考えてくれるとわかりやすいと思います。)

Form_withの基本的な使用方法

Form_withヘルパーがどのようなものか理解していただいたかと思います。

では実際にはどのように使用すればいいのでしょうか？
下記にサンプルを示しますので、MVCモデルから少しずつ紐解いていきましょう！

◇Model◇

<!-- db/schema.rb -->
ActiveRecord::Schema[7.0].define(version: 2022_07_27_061048) do
  create_table "users", charset: "utf8mb4", force: :cascade do |t|
    t.string "email", null: false
    t.string "crypted_password"
    t.string "salt"
    t.string "first_name", null: false
    t.string "last_name", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["email"], name: "index_users_on_email", unique: true
  end

◇Controller◇

<!-- app/controllers/users_controller.rb -->
  def create #ストロングパラメータから、値を取得
    @user = User.new(user_params)
    if @user.save
    ~

private
#private配下に取得したいスロトングパラメータを設定(ストロングパラメータについては、説明を割愛します。)
  def user_params
    params.require(:user).permit(:first_name, :last_name, :email, :password, :password_confirmation)
  end
end

◇View◇

<!-- app/views/users/new.html.erb -->
<div class="container">
    #以下、form_withヘルパーの実装になります。
      <%= form_with model: @user do |f| %>
        <div class="mb-3">
          <%= f.label :last_name, class: "form-label" %>
          <%= f.text_field :last_name, class: "form-control" %>
        </div>
        <div class="mb-3">
          <%= f.label :first_name, class: "form-label" %>
          <%= f.text_field :first_name, class: "form-control" %>
        </div>
        <div class="mb-3">
          <%= f.label :email, class: "form-label" %>
          <%= f.email_field :email, class: "form-control" %>
        </div>
        <div class="mb-3">
          <%= f.label :password, class: "form-label" %>
          <%= f.password_field :password, class: "form-control" %>
        </div>
        <div class="mb-3">
          <%= f.label :password_confirmation, class: "form-label" %>
          <%= f.password_field :password_confirmation, class: "form-control" %>
        </div>
        <%= f.submit "登録", class: "btn btn-primary" %>
      <% end %>

◇yml◇ ※i18n使用の場合

<!-- config/locales/activerecord/ja.yml -->
ja:
  activerecord:
    models:
      user: ユーザー
    attributes:
      user: #i18nを使用している場合は、labelから名称を取得できます。
        email: メールアドレス
        last_name: 姓
        first_name: 名
        password: パスワード
        password_confirmation: パスワード確認

上記が実装のサンプルです！
ここまでの流れを整理すると、1〜3までの流れになります。

1.Modelの定義
2.Controllerでストロングパラメータ及び、パラメータを取得するアクションを定義
3.対応するViewでform_withヘルパーを使用

ここからはform_withヘルパーを掘り下げていきましょう!

基本構文

<%= form_with(モデル or スコープ or URL [,オプション]) do |f| %>

使用できるオプションの種類

※railsでは下記のlocal以降の項目に関して、自動で設定しているので初心者の方は上記3つを覚えてください！
(ただし、明示した方がコードリーディングする側にとって親切です。)

オプション 説明 設定項目(例)
:model モデル指定 @postなど
:url URL指定 boards_pathなど
:local リモート送信の無効
:remote リモート送信 true
:method HTTPメソッドの指定 post(ただし、Rails のフォームヘルパーは、適切な HTTP メソッドを自動的に選択)
:id id属性を指定
:class class属性を指定

@yamaday0uさん　Rails：form_withのオプションや特徴について整理より引用。

【基本構文】と【オプション】から実装したい機能に合わせて、適切なフォームを組み立てましょう!
それぞれ簡単なサンプルを載せますので、ご参考にしてください。

モデルの場合

・フォームに対するモデルが1件の場合

<!-- app/views/posts/edit.html.erb -->
<%= form_with(model: @post) do |f| %>
  <!-- フォームの内容 -->
<% end %>

・フォームに対するモデルがN件の場合

<!-- app/views/posts/edit.html.erb -->
<%= form_with(model: [@post, @comment]) do |f| %>
  <!-- ポストフォームの内容 -->
  <%= render 'comments/form', comment: @comment %>
<% end %>

スコープの場合

※scopeは一般的にはあまり使用しないので、さっと見をお勧めします。

<!-- app/views/posts/new.html.erb -->
<%= form_with(scope: :new) do |f| %>
  <!-- フォームの内容 -->
<% end %>

または

<!-- app/views/posts/new.html.erb -->
<%= form_with(scope: '/custom_url') do |f| %>
  <!-- フォームの内容 -->
<% end %>

URLの場合

<!-- app/views/posts/edit.html.erb -->
<%= form_with(url: edit_post_path(@post)) do |f| %>
  <!-- フォームの内容 -->
<% end %>

<!-- app/views/posts/show.html.erb -->
<%= form_with(url: post_comments_path(@post)) do |f| %>
  <!-- コメントフォームの内容 -->
<% end %>

モデル,URLがMIXパターン

<!-- app/views/comments/_form.html.erb -->
~
<%= form_with model: comment, url: board_comments_path(@board) do |f| %>
#モデル ->コメントモデルに値を設定
#URL ->コメント#アクションに対応するアクションがないために明示

ここで、モデルとURLの使い分けのみ解説します。
基本的には form_with のオプションでは model: を使用すると覚えて構いません。

ただし、次のような場合に限り、 url: オプションを使います。このポイントは抑えましょう。

・モデルとフォームが紐づかない場合（例: ログインフォーム: user_sessions）
・createやupdateを行うコントローラがモデルと単純に紐づかない場合
（例: model: @user と設定したが、 members_controller に処理が遷移して欲しい場合）

また、modelの場合は、インスタンス変数に値が残りレンダリングすれば入力値を再度表示できますが、URLの場合は、インスタンス変数で値を持っていない為、注意しましょう!!

フォーム要素を作成するヘルパー

フォームでは、上記のlabelやtext_field以外にも使用できるオプションがあります。
用途によって、下記から選んで使用しましょう！

メソッド名 機能の説明 メソッド名 機能の説明
label 検索用ボックス week_field 週ボックス
search_field ラベルを作成 telephone_field 電話番号用ボックス
text_field テキストボックス file_field ファイル選択用ボックス
email_field メールアドレス用ボックス password_field パスワード用ボックス
range_field 範囲選択バー hidden_field 隠しフィールド
number_field 数値選択 text_area テキストエリア
select 選択ボックス check_box チェックボックス
date_field 日付ボックス radio_button ラジオボタン
datetime_field 日付時刻ボックス url_field URLボックス
datetime_local_field 日付時刻ボックス color_field 色選択ボックス
month_field 月ボックス submit 提出用ボタン
time_field 時刻ボックス

@Hal_maiさん　【Rails】フォームヘルパーの種類と例より引用。

追記

再利用性高いパーシャルなどは、ローカル変数で値を管理することが多いので、renderとパーシャルファイルを適切に設定してあげましょう！
valueでインスタンス変数を設定してあげれば問題ないです!

#renderを下記のように指定
<!-- comment/new/html.erb -->
~
<%= render 'comments/comment', comment: @comment %>
#renderがローカル変数の場合

<!-- _comment.html.erb -->
<% if comment.new_record? %>
    <%= form_with(model: comment) do |f| %> 
#ローカル変数で管理する場合は、上記のようにしてください。

【引用元】

Railsガイド
https://railsguides.jp/form_helpers.html
Rails：form_withのオプションや特徴について整理
https://qiita.com/yamaday0u/items/a3689bc48a7eff55929b
【Rails】フォームヘルパーの種類と例
https://qiita.com/Hal_mai/items/1e5afd0c99dd9059839f
【Qiita】テーブルはショートカットコマンドでサッと書ける。表の挿入とフォーマット調整方法。
https://qiita.com/shizen-shin/items/d5eccb343a1c201e2f83

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?