例のごとくドットインストールのRails5の動画を元に学んでいきます!
前回までは記事の編集処理の実装まで行ったので
本日は共通部品の作成から行います!(21章あたりからです)
また、本日はGithubにソースコードも上げれたらなと思っています。
前回記事はこちら taxa-program.hatenablog.com
共通部品(Partial)の作成
現状、下記2つの新規登録のviewファイルと、編集のviewファイルの内容はほとんど同じ処理が記述されていると思います。
app/views/posts/new.html.erb
app/views/posts/edit.html.erb
この共通部分を一つにまとめていきます。
一つにまとめたファイルをPartialと呼ぶそうです。
また、このPartialファイルは頭文字を'_'から始めるのがルールです。
app/views/posts/_form.html.erb
<%= form_for @post do |f| %> <!-- タイトルcolumnに対応するフィールド --> <p> <%= f.text_field :title, placeholder: 'enter title' %> <!-- エラーがあるかチェック --> <% if @post.errors.messages[:title].any? %> <!-- エラーがあった場合、そのメッセージの内容を表示する。メッセージは最初の一つを表示する。 --> <span class="error"><%= @post.errors.messages[:title][0] %></span> <% end %> </p> <!-- ボディcolumnに対応するフィールド --> <p> <%= f.text_area :body, placeholder: 'enter body text' %> <!-- エラーがあるかチェック --> <% if @post.errors.messages[:body].any? %> <!-- エラーがあった場合、そのメッセージの内容を表示する。メッセージは最初の一つを表示する。 --> <span class="error"><%= @post.errors.messages[:body][0] %></span> <% end %> </p> <p> <%= f.submit %> </p> <% end %>
そして、共通化された新規登録と編集のviewファイルには下記の様に、Partialの'_'を削除した記述をしてあげます。
<%= render 'form' %>
上記の様にすると、全体のコード量が減らせるだけで無く、
メンテナンスも容易になることが分かると思います。
削除リンクの作成
投稿した記事を削除できるようなリンクを作成します。
ルーティングを確認するとDELETEのルーティングがあることが分かります。
Prefix Verb URI Pattern Controller#Action posts GET /posts(.:format) posts#index POST /posts(.:format) posts#create new_post GET /posts/new(.:format) posts#new edit_post GET /posts/:id/edit(.:format) posts#edit post GET /posts/:id(.:format) posts#show PATCH /posts/:id(.:format) posts#update PUT /posts/:id(.:format) posts#update DELETE /posts/:id(.:format) posts#destroy root GET / posts#index
まずはviewファイルに削除リンクを追加します。
app/views/posts/index.html.erb
<!-- 削除ボタンの追加 --> <!-- deleteの場合は明示的にdeleteメソッドだということを記述する(method: :delete) --> <!-- data: { confirm: 'Sure??'}の部分で確認ダイアログを表示させる --> <%= link_to '[Delete]', post_path(post), method: :delete, class: 'command', data: { confirm: 'Sure??'} %>
次にdestoryメソッドを定義していきます。
app/controllers/posts_controller.rb
def destroy # 削除する記事の特定 @post = Post.find(params[:id]) # 削除 @post.destroy # 記事一覧へリダイレクト redirect_to posts_path end
ここまでで、記事が削除できるようになっていると思います。
ブログとしての機能は一通り実装できたので、次回からはブログにコメントをつけれる様な機能を実装していきます。
ソースコードは下記においてあります。