ギークなエンジニアを目指す男

SIerが機械学習系の知識を蓄えようとするブログ

MENU

ドットインストールで作るブログアプリその7(RubyonRails)

例のごとくドットインストールの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

ここまでで、記事が削除できるようになっていると思います。
ブログとしての機能は一通り実装できたので、次回からはブログにコメントをつけれる様な機能を実装していきます。

ソースコードは下記においてあります。

github.com