【Ruby on Rails】簡単なメモアプリの作成｜非同期通信でフラッシュメッセージの実装

動画で解説を見る

1 開発環境
2 Ruby on Railsで非同期通信にフラッシュメッセージの実装手順
3 おわりに

開発環境

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」のフォルダ内に作成します。

<% if flash[:notice] %>
    <div class="wrapper green-color">
        <div class="container notice-text">
            <%= flash[:notice] %>
        </div>
    </div>
<% end %>

<% if flash[:alert] %>
    <div class="wrapper red-color">
        <div class="container notice-text">
            <%= flash[:alert] %>
        </div>
    </div>
<% end %>

<% if flash[:notice] %>

<%= flash[:notice] %>

</div>

<% end %>

<% if flash[:alert] %>

<%= flash[:alert] %>

</div>

<% end %>

次に「memo_app\app\views\layouts\application.html.erb」でフラッシュメッセージのテンプレートを呼び出します。

<!DOCTYPE html>
<html>
  <head>
    <title>MemoApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@rails/ujs@6.0.2/lib/assets/compiled/rails-ujs.js"></script>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  </head>

  <body>
    <div class="wrapper header-color">
      <div class="container">
        <h1>MemoApp</h1>
      </div>
    </div>

    <div id="notice">
      <%= render "layouts/notice" %>
    </div>

    <%= yield %>
  </body>
</html>

<body>

<h1>MemoApp</h1>

</div>

<%= render "layouts/notice" %>

</div>

<%= yield %>

</body>

後程、非同期通信でフラッシュメッセージを再度呼び出すため、「ID」を付与しておきます。

コントローラーでフラッシュメッセージに値を渡す

次にコントローラーでフラッシュメッセージに値を渡すプログラムを記述します。

class MemosController < ApplicationController
  def index
    @memo_new = Memo.new
    @memos = Memo.all
  end

  def create
    @memo_new = Memo.new(memos_params)
    @memos = Memo.all
    if @memo_new.save
      redirect_to root_path
    else
      render action: "index"
    end
  end

  def update
    @memo = Memo.find(params[:id])
    @memo.update(memos_params)
    redirect_to root_path
  end

  def destroy
    @memo = Memo.find(params[:id])
    @memo.destroy
    redirect_to root_path
  end

  def ajax_create
    @memo_new = Memo.new(memos_params)
    @memos = Memo.all

    if @memo_new.save
      flash.now[:notice] = "メモの保存に成功しました。"
    else
      flash.now[:alert] = "メモの保存に失敗しました。"
    end
  end

  private

  def memos_params
    params.require(:memo).permit(:title, :description)
  end
end

def ajax_create

@memo_new = Memo.new(memos_params)

@memos = Memo.all

if @memo_new.save

flash.now[:notice] = "メモの保存に成功しました。"

else

flash.now[:alert] = "メモの保存に失敗しました。"

end

if文でDBへの保存に成功した時と失敗した時でフラッシュメッセージに渡す値を分岐させています。

また、「flash」と「flash.now」では、フラッシュメッセージが残るスコープ範囲が異なりますが、今回はレンダーで一度のみ表示したいため、「flash.now」で記述しています。

JavaScriptでフラッシュメッセージを呼び出す

次に、非同期通信でフラッシュメッセージを呼び出すために「ajax_create.js.erb」を編集していきます。

$('#memo-list').html("<%= j(render "memos/list", memos: @memos) %>");
$('#errors').html("<%= j(render "layouts/errors", obj: @memo_new) %>");
$('#memo-post').find('.form-box').val('');
$('#notice').html("<%= j(render "layouts/notice") %>").show().fadeOut(2000);

$('#memo-list').html("<%= j(render "memos/list", memos: @memos) %>");

$('#errors').html("<%= j(render "layouts/errors", obj: @memo_new) %>");

$('#memo-post').find('.form-box').val('');

$('#notice').html("<%= j(render "layouts/notice") %>").show().fadeOut(2000);

フラッシュメッセージに動きをつけたいため、JQueryライブラリの「show」と「fadeOut」を使用しています。

注意点としては、非同期通信の場合は画面の変異がないためWebページは再読み込みされないので、JSでアニメーションをつける場合も処理の順番を考える必要があります。

例えば、「表示があったものを非表示にする」だけにした場合、1度目で非表示にしてしまっているため、2回目以降はフラッシュメッセージが表示されないことになります。

そのため、1度目は「表示があったものを表示して非表示にする」ことにより、2回目以降は「非表示だったものを表示して非表示にする」という処理を行っています。

フラッシュメッセージのデザインを調整

最後にフラッシュメッセージのデザインを調整していきます。

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #696969;
    font-size: 16px;
    font-family: sans-serif;
    list-style-position: inside;
}

.header-color {
    background-color: #4169e1;
}

.green-color{
    background-color: green;
}

.red-color{
    background-color: red;
}

.notice-text {
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
}

h1 {
    font-size: 36px;
    color: #ffffff;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 24px;
}

.wrapper {
    width: 100%;
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: 1170px;
}

.col-box-1{
    width: 100%;
    padding: 6px;
}

.col-box-2{
    width: 50%;
    padding: 6px;
}

.col-box-3{
    width: 33.3%;
    padding: 6px;
}

.col-box-4{
    width: 25%;
    padding: 6px;
}

.flex-start {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

.memo-header {
    width: 100%;
    padding: 6px;
    min-height: 40px;
    background-color: #ffd700;
    border-radius: 6px 6px 0 0;
}

.memo-center {
    width: 100%;
    padding: 6px;
    min-height: 100px;
    background-color: #fffacd;
}

.memo-footer {
    width: 100%;
    padding: 6px;
    background-color: #ffd700;
    border-radius: 0 0 6px 6px;
    text-align: center;
}

.memo-other {
    width: 100%;
    padding: 6px;
    text-align: right;
}

.form-box {
    background-color: transparent;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 6px;
    width: 100%;
}

textarea {
    min-height: 80px;
}

.btn {
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 3px 12px;
}

.field_with_errors {
    display: contents;
}

.green-color{

background-color: green;

}

.red-color{

background-color: red;

}

.notice-text {

color: #ffffff;

font-weight: bold;

text-align: center;

padding: 10px 0;

}

色は好みになってくると思いますが、日本だと成功したときの色は「緑色」、失敗したときの色は「赤色」がイメージしやすいかと思います。

おわりに

Ruby on Railsでフラッシュメッセージの実装について解説してきましたが、いかがだったでしょうか。

今回は新規投稿の非同期通信にエラーメッセージが表示されるように実装していきましたが、通常の動機通信でも同じ理屈でフラッシュメッセージを実装することができます。

是非、ユーザーがWebアプリケーションを使いやすいようにするためにも、フラッシュメッセージの実装にチャレンジにしてみてください。