【Rails基礎講座 5】リンクとバリデーション >
記事の更新

記事の更新

吉田先生

記事の更新はCRUD処理のUpdate 処理にあたります。

記事の更新

Update処理の為に、記事一覧に編集リンクを作成します。

更新のリンクを作成する為に$ rake routesを確認しましょう。

編集はarticles#editにあたります。article#editのPrefixはedit_article GETですので、edit_article_pathです。

記事一覧のaritcles/index.html.erbに下記のコードを追加しましょう。

<meta charset="utf-8">

&lt;%= link_to "編集する",edit_article_path %>


ファイルを保存したら、ブラウザで記事一覧画面を表示してみます。

No route matches {:action=>"edit", :controller=>"articles"}, missing required keys: [:id]

とあります。

記事詳細のリンクを作成した時と同様に、各記事の編集の為には該当記事のidを指定する必要があります。 そのidがないので、編集へのルートがないよ!とエラーがでています。

そこで

&lt;%= link_to "編集する",edit_article_path(article) %>

と変更して保存します。

記事詳細のリンクと同様にこの(article)も

&lt;% @articles.each do |article| %>~&lt;%end %>

内でしか機能しないので注意しましょう。

記事詳細リンクと同様に各記事に対して編集リンクが必要な為、編集リンクもtableタグでマークアップします。

ここまでのコードをまとめると下記となります。

<meta charset="utf-8">

&lt;h1>記事一覧&lt;/h1>

   &lt;tr>

   &lt;th>タイトル&lt;/th>

   &lt;th>本文&lt;/th>

   &lt;/tr>

   &lt;% @articles.each do |article| %>

       &lt;tr>

       &lt;td>&lt;%= article.title %>&lt;/td>

       &lt;td>&lt;%= article.text %>&lt;/td>

       &lt;td>&lt;%= link_to "記事詳細", article_path(article) %>&lt;/td>

       &lt;td>&lt;%= link_to "編集する",edit_article_path(article) %>&lt;/td>

       &lt;/tr>

   &lt;% end %>

&lt;/table>


コードを保存したら、ブラウザを更新してください。

編集用のリンクの作成に成功しました!

1.アクションとviewファイルの追加

このまま編集するリンクをクリックするとUnknown actionとなります。

The action 'edit' could not be found for ArticlesControllerとのエラーコードの通り、編集する為のeditというアクションがarticlesコントローラにはありません。

def edit

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

end


とeditアクションを追加してファイルを保存します。

編集する為には、編集したい該当のarticleをデータの中から取得する必要がある為、editアクションにもshowアクションと同様に@article = Article.find(params[:id])というインスタンス変数を入れておきます。

ブラウザを更新すると、今度はArticlesController#edit is missing a templateとeditアクションに対応するviewファイルがないですよ!とエラーが表示されるので、viewsファイルにedit.html.erbファイルを追加します。

編集用の画面は、投稿した記事のタイトルと中身を変更できるような画面にする必要があります。

そこで、new.html.erbで作成したようなフォームを編集画面でも表示します。

コードはnew.html.erbのフォームを作成したコードとほぼ同じです。

1点違うのは、記事を投稿した後の画面の飛び先です。

new.html.erbでは記事を投稿すると記事詳細(show.html.erb)の画面へ遷移しました。 ブラウザを更新すると、edit.html.erbの中身が表示されます。 これで編集リンクの作成と、編集用のファイルの作成は完了です。

2.編集用フォームの作成

edit.html.erbファイルには投稿した記事を編集するフォームを表示させる必要があります。

new.html.erbファイルのようにフォームを表示させるコードを書きます。

以下のコードをedit.html.erbに追記して保存してください。

<meta charset="utf-8">

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

 &lt;% if @article.errors.any? %>

  &lt;% @article.errors.full_messages.each do |msg| %>

     &lt;%= msg %>

   &lt;% end %>

&lt;% end %>



&lt;p>   

&lt;%= form.label :title %>&lt;br>

&lt;%= form.text_field :title %>

&lt;/p>

&lt;p>

   &lt;%= form.label :text %>&lt;br>

   &lt;%= form.text_area :text %>

&lt;/p>

&lt;p>

   &lt;%= form.submit %>

&lt;/p>

&lt;% end %>
&lt;%= link_to "一覧へ戻る", articles_path %>


無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る