【Rails】コメント機能を非同期通信にしたい

Question

前提

プログラミング初学者でして、質問させていただくにあたって、わかりにくい表現をしてしまってたり、情報が足りなくなってしまっている場合があるので、お気づきの際はご指摘していただけたら、幸いです。よろしくお願いします。

Ruby on Railsで投稿を行うアプリケーションを作成しました。
投稿に対して、コメント機能を実装しました。

実現したいこと

コメント機能をAjaxの方針の元、非同期通信を実現したいです。
まずは、コメントの投稿のみ実装を行なっており、コメントの削除を非同期通信を実現したいです。

発生している問題・エラーメッセージ

コメントの投稿ボタンを押すと、フォームにテキストが残ったまま固まり、リロードを押すと投稿されます。
https://gyazo.com/6825628df82eb446f91dec3a9fa5aecd

該当のソースコード

<div class="recipe-comments">
    <%= render 'comments', comment: @comment %>
      <%= form_with model: [@recipe, @comment] do |f| %>
      <div class = 'form-group'>
        <%= f.text_area :content, class: "form-control", id:"comment_content", placeholder: "コメントを記入してください" %>
      </div>
        <%= f.submit "コメントする", class: "btn btn-primary" , id: "submit" %>
      <% end %>
  </div>

form_withのlocal trueを外し、create.js.erbを呼び出す様にしています。

class CommentsController < ApplicationController
before_action :authenticate_user!, only: [:create, :destroy]
  def create
    @recipe = Recipe.find(params[:recipe_id])
    @comment = Comment.new(comment_params)
    @comment.user_id = current_user.id
    @comment.recipe_id = @recipe.id
    @comment.save
  end

  def destroy
    @recipe = Recipe.find(params[:recipe_id])
    @recipe_comments = @recipe.comments
    if Comment.find_by(id: params[:id], recipe_id: params[:recipe_id]).destroy
      redirect_to recipe_path(@recipe)
    end
  end

  private
  def comment_params
    params.require(:comment).permit(:content)
  end
end

redirectはさせず、jsファイルを探しにいくようにしています。

$("text_area").val("");
$("input").val("");
$('.recipe-comments').html("<%= escape_javascript(render 'comments', comment: @comment) %>")

recipes_controllerの追記

class RecipesController < ApplicationController
  before_action :authenticate_user!, except: [:index, :show]
  before_action :set_recipe, only: [:show, :destroy, :edit, :update,]
  before_action :contributor_confirmation, only: [:edit, :update, :destroy]
  def index
    @recipes = Recipe.order(id: 'DESC')
  end

  def new
    @recipe = Recipe.new
  end

  def show
    @comment = Comment.new #新規コメント用
    @comments = @recipe.comments.includes(:user) #コメント表示用投稿に関連づくコメントの取得
  end

  def edit
  end

  def update
    if @recipe.update(recipe_params)
      return redirect_to recipe_path(@recipe)
    else
      render 'edit'
    end
  end

  def destroy
    @recipe.destroy
    redirect_to root_path
  end

  def create
    @recipe = Recipe.create(recipe_params)
    if @recipe.save
      redirect_to root_path
    else
      render 'new'
    end
  end

  def search
    @q = Recipe.ransack(params[:q])
    @recipes = @q.result
  end

  private
  def recipe_params
    params.require(:recipe).permit(
      :dish_name,
      :ingredient,
      :make,
      :introduction,
      :image,
      :moon_age_id,
      :classification_id)
      .merge(user_id: current_user.id
      )
  end

  def set_recipe
    @recipe = Recipe.find(params[:id])
  end

  def contributor_confirmation
    redirect_to root_path unless current_user == @recipe.user
  end
end

試したこと

create.js.erbファイルの記述に自信がなく、１〜２業目でテキストエリアを空にして、３行目でshow.html.erbの”recipe-commentsクラス”を呼び出し、投稿したコメントを呼び出しているので、動作すると思ったのですがうまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

ruby 2.6.5
Ruby on Rails 6.0.0

わかりにく質問になってしまっているかもしれませんが、よろしくお願いいたします。
情報が足りないなどございましたら、コメントいただけると幸いです。

Answer 1

存在しない要素の val を呼び出そうとしてエラーになってるんだと思います。誤字を修正してみてください。

正 textarea
誤 text_area

- $("text_area").val("");
+ $("textarea").val("");
  $("input").val("");
  $('.recipe-comments').html("......");

また、3行目で .recipe-comments の中身を書き換えていますが、これだと textarea や submit も巻き込まれ、画面から消えてしまいます。
以下のように、ピンポイントでコメント部分のみ書き換えるようにした方が良いかなと思いました。

  <div class="recipe-comments">
-   <%= render 'comments', comment: @comment %>
+   <div id="comments"><%= render 'comments', comment: @comment %></div>
    <%= form_with model: [@recipe, @comment] do |f| %>
      <div class = 'form-group'>
        <%= f.text_area :content, class: "form-control", id:"comment_content", placeholder: "コメントを記入してください" %>
      </div>
      <%= f.submit "コメントする", class: "btn btn-primary" , id: "submit" %>
    <% end %>
  </div>

  ---------------------

  $("textarea").val("");
  $("input").val("");
- $('.recipe-comments').html("......");
+ $('#comments').html("......");

最後におまけです。
このままでも思った通りの動作はしてくれると思うのですが、 $("textarea") という指定だと「画面内の全てのテキストエリア」を意味してしまうので、ちょっと範囲が広すぎるような気がします。
こちらもピンポイントで「コメント用のテキストエリア」だけを指定した方が、思わぬ副作用を防止出来て良いかなと思いました。

- $("textarea").val("");
- $("input").val("");
+ $("#comment_content").val("");
  $('#comments').html("......");

他は問題ないと思います。

--

コメントの投稿ボタンを押すと、フォームにテキストが残ったまま固まり、

「固まる」ということは、サーバー側(ruby)かクライアント側(javascript)のどちらかでエラーが発生している可能性が高いです。

そういう場合は、

1. rails server のコンソールに表示されているログ
2. ブラウザの [開発者ツール(F12)] → [コンソール]

をそれぞれ確認してみてください。
エラーメッセージやエラー発生個所を見つければ、問題解決の大きなヒントになるはずです。

Comments

[yyhoshino]

ご連絡遅くなり、申し訳ございません。
丁寧な解説とご回答ありがとうございます。
コメント用のテキストエリアのみを指定して動作はするのですが、
「コメント投稿ボタンを押す→固まる→リロードすると投稿される」と言った状態になりました。
ご教示いただいたようにコンソールで状況を確認したところ、エラー分が確認できました。
https://gyazo.com/09429bea58b5095c3f2b55fc908b96bf
**ActionView::Template::Error (undefined method `each' for nil:NilClass):**
となっていまして、eachがnilになっている＝@commentsがnil　ということだと思うのですが、
**recipescontroller**では**showアクション**で@commentsには値を代入しているので、なぜこのようになっているのかが解決できません。。念の為、recipes_controllerのコードを本文に追記いたします。

リロードすると、コメントは生成されるので、JavaScript側(create.js.erb)で動作がうまくできていないのでしょうか？また、お時間ございましたら、教えていただけたら幸いです。よろしくお願いします。

[shinoharat]

コメントありがとうございます！
確認します！

[shinoharat]

RecipesController#show の処理は問題ないのですが、
CommentsController#create にも同様の処理が必要です。

```
　def create
　　@recipe = Recipe.find(params[:recipe_id])
＋　@comments = @recipe.comments.includes(:user) # ← この行を追加
　　@comment = Comment.new(comment_params)
　　@comment.user_id = current_user.id
　　@comment.recipe_id = @recipe.id
　　@comment.save
　end
```

！！！注意！！！
上記のサンプルコードには「全角スペース」が含まれていますので、コピぺする場合は「半角スペース」に変換してください。
teratail のコメント欄は半角スペースによるインデントが不可能なので、見やすくするため仕方なく全角スペースを使ってます。
！！！！！！！！

[shinoharat]

なぜ create にも @comments の設定が必要かと言うと、
「Rails がインスタンス変数を覚えているのは、ブラウザにレスポンスを返すまで」
だからです。

------------------------------------------
ブラウザから「レシピの詳細ページ（RecipesController#show）を表示して」とリクエストされる

　↓　↓　↓

Rails が RecipesController#show を実行し、以下のインスタンス変数を設定する。
　@comment
　@comments
そして、上記のインスタンス変数を使って show.html を作成し、ブラウザに返す。

（※※※この時点で Rails はすべてのインスタンス変数を忘れる※※※）

　↓　↓　↓

ブラウザは、Rails から受け取ったレスポンスを使い、レシピ詳細画面を表示する。

　---

ブラウザのコメント欄から「コメントを追加（CommentsController#create）して」とリクエストされる

　↓　↓　↓

Rails が CommentsController#create を実行し、以下のインスタンス変数を設定する。
　@comment
上記のインスタンス変数を使って create.js を作ろうとするが、 @comments が存在しないのでエラーになる。

　↓　↓　↓

ブラウザは、Rails から「ごめんエラーになったわ」とレスポンスを受け取る。
エラー時の処理が無いので、ブラウザはそれ以上なにもしない。
（ユーザーから見ると固まったように見える）
------------------------------------------

[yyhoshino]

すぐにご返事していただき、大変助かります。
comments_controllerの方でも必要だったのですね。
しかも、かなり詳しくご説明いただきありがとうございます！
とてもわかりやすく、腑に落ちました。上記のように、記述し直したら、該当のエラーは解消されました！
その後、ブラウザのコンソールで「Uncaught ReferenceError: $ is not defined」
というエラーが出て、リロードしないとコメントが反映されない状態だったのですが、「jQuery」の導入が正常にできていなかったようで、導入したら、解決し、コメントが反映されました。
今回は私でもわかるようにご回答くださり、さらにプラスアルファな知識も教えていただき、ありがとうございました！ベストアンサーとさせていただきます！