form_withについて

form_withについて

吉田先生

form_withというヘルパーメソッドを使用したときのリンクのとび先に注目しましょう。

• form_withについて

form_withについて

<%= form_with(model: @article, local: true) do |form| %>

といきなり1行目から見たことのないコードがでてきて混乱するかと思います。

新規記事作成（new.html.erb）のフォーム作成の時は

<meta charset="utf-8">

&lt;%= form_with scope: :article, url: articles_path, local: true do |form| %>

というコードでした。

実はform_withというヘルパーメソッドは

form_with(model: 〇〇, scope: 〇〇, url: 〇〇, format: 〇〇, ・・・)

というように後に続くコード（オプションと呼びます）がたくさん種類があります。

url: 〇〇というオプションの場合は、送信ボタンを押すとそのurlへ飛ぶようになっています。

しかし、今回の

<%= form_with(model: @article, local: true) do |form| %>

にはurlがありません。

これはなぜなのでしょうか。

form_withは、オプションの@aritcleという変数の中身から次に遷移するページを予測することができます。

form_withはとても賢いため、@articleの中身が空っぽの場合（@article = Article.new）は、url: articles_path（createアクション）へデータを送って中身を作るんだなと予想します。

@articleに何かデータがある場合（@article = Articles.find(〇))は、url: edit_article_path(editアクション)へデータを送って更新するんだなと予想します。

<%= form_with(model: @article, local: true) do |form| %>

とは

<%= form_with　model: @article,url: edit_article_path, local: true do |form| %>

と同じ意味です。

3.送信したデータの行方

編集用のフォームが表示されるようになりました。

記事の内容を変更し、送信するとデータはどこへ行くのでしょうか。

記事の内容を変更して送信してみます。

updateというアクションがないよ！とエラーが出ています。

editアクションで保存しようとしたデータはupdateアクションに飛ぶということがわかります。

articlesコントローラにupdateアクションを追加して、app/viewsフォルダに新しくupdate.html.erbファイルを作成しておきましょう。

ブラウザを更新するとupdate.html.erbファイルの中身が表示されるようになりました。

ここまでの記事の編集の流れ

・投稿された記事の編集リンクを押すとeditアクションへ飛ぶ

・editアクションでは編集したい該当の記事データを@article = Article.find(params[:id])で取得する

・編集フォーム（edit.html.erb）が表示されるので内容を変更して送信

・送信されたデータはupdateアクションへ飛ぶ

4.updateアクションに追記する

updateアクションに下記のコードを追加してください。

def update

  @article = Article.find(params[:id])



  if @article.update(article_params)

    redirect_to @article

  else

    render 'edit'

  end

end

updateアクションは受け取ったデータがどの記事のデータかわかりません。

ですので、updateアクションでも該当の記事のデータを見つけられるように

def update

@article = Article.find(params[:id])

end

と@articleを定義します。

そしてその@articleの記事をupdatesしてねと指示をします。

def update

@article = Article.find(params[:id])

end

ここまでのコードで、updateアクションに飛んできた記事データの上書きはできそうです。

しかし、このblog記事はタイトルが空白だったり、4文字以下だと登録できないようにバリデーションを設定しています。

その為、もし@article.updateが成功したら～そうでなければ～というif~else~のコードを追加します。

@article.updateが成功したら、登録した記事はこの内容ですよと詳細を表示します。

もし失敗した場合は編集画面から画面が遷移しないように設定します。

if @article.update(article_params)

redirect_to @article

else

render 'edit'

end   

これはcreateアクションで記事の登録に使ったコードと同じですね。

コードを保存してブラウザを更新してみましょう。

5.コントローラでデータを受け取りDBレコードを更新する流れ

今回の記事の編集～更新までの流れを見てみましょう。

createアクションで保存してきたarticleのデータはデータベースに保存されています。

記事の編集や更新を行うときはこのデータベースの中から、まず編集したい該当のデータを見つける必要があります。

編集したフォームの送信ボタンを押すとデータを受け取ったコントローラのアクションがパラメータのidとデータベースを照合して該当の記事を見つけます。

見つけた記事は、@article.updateというアクション内の指示によってデータベースに上書きされます。