こんにちは!まろんぼーいです。
今回の記事は、form_with文の使用法についてのメモです。
このブログでは、過去に完全初心者の僕が作った(しょぼい)Webアプリを参考に、
初心者なりに試行錯誤しながらその改良版を作っていく過程をお見せしています。
このシリーズを追っていくだけで、初心者なりのRailsを使ったWebアプリの作り方が見ていただけると思います。
同じ初心者の方の参考になればうれしいです!
〇form_with文とは?
form_with文についてはググると多くの解説記事がありますので、詳しい定義等はそちらを参考にしていただければと思いますが、
このブログでは初心者向けにざっくりイメージがわかるよう説明します。
form_with文を使う場所は、
アプリのユーザが情報を入力して送信する際に用いる文です。
例えば、「投稿」だったり、ユーザ等の「登録」だったりの際に使います。
よくサイトで見る四角い入力欄がありますよね?
あれを作るのが、form_with文です。
〇form_with文の具体的な書き方
・記述方法は大きく2種類
form_with文の書き方は大きく2つあります。
それは、入力した情報をModelに登録するか否かです。
Modelに登録する場合は、まさに上記した、投稿機能やユーザ登録機能です。
投稿内容やユーザ情報をそれぞれのModelに登録して使用しますよね。
一方で、Modelに登録しない場合にはどのような場合があるでしょう。
これは少し想像が難しいかもしれません。
例えば、「検索機能」がこれに当てはまります。
一般的にサイト内で検索をかける際、検索フォームにキーワード等を入力して、検索ボタンを押して検索しますよね。
この場合、検索フォームに入力したキーワードはどこのModelにも登録されません。
キーワードを含んだ項目がないか調べるだけです。
こういった場合は、上記のModelに登録する場合とは別の記述方法をとります。
・Model登録ありの場合の記述方法
それぞれの場合の記述方法を書きます。
まず、投稿やユーザ登録など、Modelに情報を登録する場合。
1 2 3 |
<%= form_with(model: インスタンス変数, local: true) do |f| %> <!-- ここにフォームを記述する --> <% end %> |
注目する場所は、一行目の「model: インスタンス変数」部分。
これを記述することで、form_withとendで囲まれた中で設けたフォームに入力した情報を、
指定したインスタンス変数に登録することができます。
例えば、name項目とemail項目のユーザ情報をインスタンス変数@userに登録する場合は、以下のようになります。
(form-group、form-control等のbootstrapの使用についての説明は割愛しちゃいます)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<%= form_with(model: @user, local: true) do |f| %> <div class="form-group"> <%= f.label :name, 'ユーザ名' %> <%= f.text_field :name, class: 'form-control' %> </div> <div class="form-group"> <%= f.label :email, 'Email' %> <%= f.email_field :email, class: 'form-control' %> </div> <%= f.submit '登録', class: 'btn btn-primary btn-block' %> <% end %> |
ここでフォーム部分の記述を見ると、「f.label」、「f.text_field」、「f.email_field」、「f.submit」があります。
こちらの説明については簡単に紹介しておきます。
・「f.label」:フォームの名前。四角い入力欄の上に表示される。
・「f.text_field」:四角い入力欄のフォーム。文字列を入力する専用。
・「f.email_field」:四角い入力欄のフォーム。email専用なので、@などがないとエラーとなる。
・「f.submit」:送信フォーム。だいたいボタンで作られる(上記のコードでもclassをbtnとすることでボタン仕様にしている)
・Model登録なしの場合の記述方法
一方でModelに登録しない場合は、以下のように記述します。
1 2 3 |
<%= form_with url: パス(~_path), local: true do |f| %> <!-- ここにフォームを記述する --> <% end %> |
Model登録ありの場合と異なる部分は、「url: パス(~_path)」の部分です。
Model登録ありの場合は登録するModelのインスタンス変数を指定しましたが、
Model登録がない場合は代わりに、パスを指定します。
この場合、フォームを入力して「f.submit」されると、指定したパスに飛ぶようになります。
また、Modelに登録はしないけど、他のシステムにデータを入れたりする場合があります。
例えば、ログインする場合はSessionというシステムにデータを保存送って保存する必要があります。
その際は、スコープという機能を使って以下のように書くことができます。
1 2 3 |
<%= form_with url: パス(~_path), <span class="marker">scope: :session</span>, local: true do |f| %> <!-- ここにフォームを記述する --> <% end %> |
このように、「scope: :○○」として贈り先を指定することもできます。