【Ruby on Rails】簡単なメモアプリの作成｜非同期通信でフラッシュメッセージの実装
開発環境
- Ruby:version 3.1.2
- Ruby on Rails:version 7.0.4
- Visual Studio Code:version 1.73.0
- OS:Windows10
Ruby on Railsで非同期通信にフラッシュメッセージの実装手順
Ruby on Railsのフラッシュメッセージは、Create（生成）、Read（読み込み）、Update（更新）、Delete（削除）などはもちろん、ユーザーのログイン成功やログアウト成功などでも当たり前に行われています。 今回はメモアプリの作成で使用した「フラッシュメッセージ」のコードを用いて解説していきます。
フラッシュメッセージの部分テンプレートを作成
まずはフラッシュメッセージの部分テンプレートを作成していきます。 今回はWebアプリケーション全体で使用するテンプレートなため、「memo_app\app\views\layouts」のフォルダ内に作成します。
1# memo_app\app\views\layouts\_notice.html.erb 2<% if flash[:notice] %> 3 <div class="wrapper green-color"> 4 <div class="container notice-text"> 5 <%= flash[:notice] %> 6 </div> 7 </div> 8<% end %> 9 10<% if flash[:alert] %> 11 <div class="wrapper red-color"> 12 <div class="container notice-text"> 13 <%= flash[:alert] %> 14 </div> 15 </div> 16<% end %>
次に「memo_app\app\views\layouts\application.html.erb」でフラッシュメッセージのテンプレートを呼び出します。
1# memo_app\app\views\layouts\application.html.erb 2 3 <body> 4 <div class="wrapper header-color"> 5 <div class="container"> 6 <h1>MemoApp</h1> 7 </div> 8 </div> 9 10+ <div id="notice"> 11+ <%= render "layouts/notice" %> 12+ </div> 13 14 <%= yield %> 15 </body>
後程、非同期通信でフラッシュメッセージを再度呼び出すため、「ID」を付与しておきます。
コントローラーでフラッシュメッセージに値を渡す
次にコントローラーでフラッシュメッセージに値を渡すプログラムを記述します。
1# memo_app\app\controllers\memos_controller.rb 2 3 def ajax_create 4 @memo_new = Memo.new(memos_params) 5 @memos = Memo.all 6 7+ if @memo_new.save 8+ flash.now[:notice] = "メモの保存に成功しました。" 9+ else 10+ flash.now[:alert] = "メモの保存に失敗しました。" 11+ end 12 end 13
if文でDBへの保存に成功した時と失敗した時でフラッシュメッセージに渡す値を分岐させています。 また、「flash」と「flash.now」では、フラッシュメッセージが残るスコープ範囲が異なりますが、今回はレンダーで一度のみ表示したいため、「flash.now」で記述しています。
JavaScriptでフラッシュメッセージを呼び出す
次に、非同期通信でフラッシュメッセージを呼び出すために「ajax_create.js.erb」を編集していきます。
1# memo_app\app\views\memos\ajax_create.js.erb" 2$('#memo-list').html("<%= j(render "memos/list", memos: @memos) %>"); 3$('#errors').html("<%= j(render "layouts/errors", obj: @memo_new) %>"); 4$('#memo-post').find('.form-box').val(''); 5+ $('#notice').html("<%= j(render "layouts/notice") %>").show().fadeOut(2000);
フラッシュメッセージに動きをつけたいため、JQueryライブラリの「show」と「fadeOut」を使用しています。 注意点としては、非同期通信の場合は画面の変異がないためWebページは再読み込みされないので、JSでアニメーションをつける場合も処理の順番を考える必要があります。 例えば、「表示があったものを非表示にする」だけにした場合、1度目で非表示にしてしまっているため、2回目以降はフラッシュメッセージが表示されないことになります。 そのため、1度目は「表示があったものを表示して非表示にする」ことにより、2回目以降は「非表示だったものを表示して非表示にする」という処理を行っています。
フラッシュメッセージのデザインを調整
最後にフラッシュメッセージのデザインを調整していきます。
1# memo_app\app\assets\stylesheets\application.css 2 3+ .green-color{ 4+ background-color: green; 5+ } 6+ 7+ .red-color{ 8+ background-color: red; 9+ } 10+ 11+ .notice-text { 12+ color: #ffffff; 13+ font-weight: bold; 14+ text-align: center; 15+ padding: 10px 0; 16+ }
色は好みになってくると思いますが、日本だと成功したときの色は「緑色」、失敗したときの色は「赤色」がイメージしやすいかと思います。
おわりに
Ruby on Railsでフラッシュメッセージの実装について解説してきましたが、いかがだったでしょうか。 今回は新規投稿の非同期通信にエラーメッセージが表示されるように実装していきましたが、通常の動機通信でも同じ理屈でフラッシュメッセージを実装することができます。 是非、ユーザーがWebアプリケーションを使いやすいようにするためにも、フラッシュメッセージの実装にチャレンジにしてみてください。