見出し画像

(5)Railsで簡単なメモアプリを作ってみる

じょん

今回はエラーハンドリング を行っていきます。
エラーハンドリング とはエラーが発生した時のアクションを決める事です。
例えば、今回の投稿機能に空文字不可を追加してみます。

バリデーションをかける

app/models/memo.rb

class Post < ApplicationRecord
 validates :content, {presence: true}
end

validatesはバリデーションと言って制約をかける事です。
presence: trueをつける事で、存在している事！となります。
要約するとPostテーブルのcontentカラムには空で保存できない

では実際に見てみます。

スクリーンショット 2020-06-27 6.37.20

保存はできなくなりましたが、なぜ保存できなかったのかわかりません。

エラーハンドリング をする（create)

app/controllers/memo_controller.rb

def create
   @post = Post.create(post_params)
   if @post.save
     flash[:notice] = "投稿できました"
     redirect_to root_path
   else
     flash[:alert] = "文字を入力してください"
     redirect_to new_memo_path
   end
 end

createの部分をif文を使い、条件分岐します。
saveできたらフラッシュメッセージ（投稿できました）を表示させ
トップページへ戻す
できなかったら（文字を入力してください）を表示させ
新規投稿ページへ留める

続いてどこに表示させるかですが
サイト上部に表示させると見やすそうです。
また全てのページへ記述するのは面倒なのでlayoutに記載します。

app/views/layouts/application.erb

<body>
   <%= flash[:notice] %>
   <%= flash[:alert] %>
   <%= yield %>
 </body>

<%= yield %>より上に書くことで、各ページの上部に表示させることができます。実際に見てみましょう。

成功！！

スクリーンショット 2020-06-27 6.45.33

失敗！！

スクリーンショット 2020-06-27 6.45.47

こんな感じで投稿が成功したか、失敗したかがわかるようになりました。
アラートっぽくするために、CSSを当ててみます。

app/views/layouts/application.erb

<body>
   <div class="notification">
     <div class="notice"><%= flash[:notice] %></div>
     <div class="alert"><%= flash[:alert] %></div>
   </div>
   <%= yield %>
 </body>

クラスを追加します。

app/assets/stylesheets/memo.scss

.notification {
 .notice {
   background-color: blue;
   color: white;
   text-align: center;
 }

 .alert {
   background-color: orange;
   color: white;
   text-align: center;
 }
}

もう一度投稿を試すと、フラッシュに修飾されていることがわかります。

スクリーンショット 2020-06-27 6.56.35

同じ要領でupdate（更新）もエラーハンドリング します。

エラーハンドリング をする(update)

app/controllers/memo_controller.rb

def update
   if @post.update(post_params)
     flash[:notice] = "投稿できました"
     redirect_to root_path
   else
     flash[:alert] = "文字を入力してください"
     redirect_to edit_memo_path(@post.id)
   end
 end

スクリーンショット 2020-06-27 7.04.46

editなどurlにidが必要なページには引数を入れてあげれば大丈夫です。
例えば　http://localhost:3000/memo/5/edit
ここにredirectさせるためにはPlefixのmemo_pathにidを渡すので
redirect_to edit_memo_path(@post.id)
@postにはアップデートしたレコードが代入されているので
idだけを取り出し、引数としました。

このまま削除もエラーハンドリング します。

エラーハンドリング する(delete)

app/controllers/memo_controller.rb

def destroy
   if @post.destroy
     flash[:delete] = "削除しました"
     redirect_to root_path
   else
     redirect_to root_path
   end
 end

app/assets/stylesheets/memo.scss

.notification {
 .notice {
   background-color:blue;
   color: white;
   text-align: center;
 }

 .alert {
   background-color: orange;
   color: white;
   text-align: center;
 }
 
 .delete {
   background-color: red;
   color: white;
   text-align: center;
 }
}

deleteクラスを追加しました。

スクリーンショット 2020-06-27 7.22.19

SCSSに同じような記述があるので次回はmixinを使って
リファクタリングしていきます。

ここまで読んでくださり、ありがとうございました。
間違いなどありましたらコメントいただけると嬉しいです。

この記事が気に入ったらサポートをしてみませんか？