(5)Railsで簡単なメモアプリを作ってみる
今回はエラーハンドリング を行っていきます。
エラーハンドリング とはエラーが発生した時のアクションを決める事です。
例えば、今回の投稿機能に空文字不可を追加してみます。
バリデーションをかける
app/models/memo.rb
class Post < ApplicationRecord
validates :content, {presence: true}
end
validatesはバリデーションと言って制約をかける事です。
presence: trueをつける事で、存在している事！となります。
要約するとPostテーブルのcontentカラムには空で保存できない
では実際に見てみます。
保存はできなくなりましたが、なぜ保存できなかったのかわかりません。
エラーハンドリング をする（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
endcreateの部分をif文を使い、条件分岐します。
saveできたらフラッシュメッセージ（投稿できました）を表示させ
トップページへ戻す
できなかったら（文字を入力してください）を表示させ
新規投稿ページへ留める
続いてどこに表示させるかですが
サイト上部に表示させると見やすそうです。
また全てのページへ記述するのは面倒なのでlayoutに記載します。
app/views/layouts/application.erb
<body>
<%= flash[:notice] %>
<%= flash[:alert] %>
<%= yield %>
</body><%= yield %>より上に書くことで、各ページの上部に表示させることができます。実際に見てみましょう。
成功！！
失敗！！
こんな感じで投稿が成功したか、失敗したかがわかるようになりました。
アラートっぽくするために、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;
}
}もう一度投稿を試すと、フラッシュに修飾されていることがわかります。
同じ要領で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
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
endapp/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クラスを追加しました。
SCSSに同じような記述があるので次回はmixinを使って
リファクタリングしていきます。
ここまで読んでくださり、ありがとうございました。
間違いなどありましたらコメントいただけると嬉しいです。