railsで非同期通信実装中でのエラーについて

Question

現在チャットアプリを非同期通信で行いたく実装を進めているところです。
非同期通信実装中出ているエラーについてご教授願いたく投稿させて頂きます。

投稿を行うとデータの保存はされます

Parameters: {"authenticity_token"=>"dI20SOvuLzNeOYpg2d+2HVWPooFoW3JEH7H38HSaX6e5JyNjQYUwpclisTB6xmf7+m0z7q4vM64f+Wo03qRkgw==", "chat_message"=>{"message"=>"lllll"}, "commit"=>"送信", "chat_id"=>"44"}
  User Load (0.5ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
  ↳ app/controllers/chat_messages_controller.rb:13:in `chat_message_params'
   (0.3ms)  BEGIN
  ↳ app/controllers/chat_messages_controller.rb:5:in `create'
  User Load (0.6ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
  ↳ app/controllers/chat_messages_controller.rb:5:in `create'
  Chat Load (0.5ms)  SELECT `chats`.* FROM `chats` WHERE `chats`.`id` = 44 LIMIT 1
  ↳ app/controllers/chat_messages_controller.rb:5:in `create'
  ChatMessage Create (0.4ms)  INSERT INTO `chat_messages` (`message`, `user_id`, `chat_id`, `created_at`, `updated_at`) VALUES ('lllll', 1, 44, '2020-12-03 09:30:34.892409', '2020-12-03 09:30:34.892409')
  ↳ app/controllers/chat_messages_controller.rb:5:in `create'
   (0.5ms)  COMMIT
  ↳ app/controllers/chat_messages_controller.rb:5:in `create'
Completed 200 OK in 15ms (Views: 0.5ms | ActiveRecord: 2.7ms | Allocations: 6974

function message() {
  const submit = document.getElementById("submit");
  submit.addEventListener("click", (e) => {
    const formData = new FormData(document.getElementById("form"));
    const XHR = new XMLHttpRequest();
      XHR.open("POST", `/chats/:chat_id => (${chat.id}/chat_messages`, true);
      console(XHR)
      XHR.responseType = "json";
      XHR.send(formData);
      XHR.onload = () => {
        if (XHR.status != 200) {
          alert(`Error ${XHR.status}: ${XHR.statusText}`);
          return null;
        }
        const chat = XHR.response.post;
        const messages = document.getElementById("messages");
        const formText = document.getElementById("content");
        const HTML = `
          <div>
            ${chat.message}
          </div>`;
        message.insertAdjacentHTML("afterend", HTML);
        formText.value = "";
      };
      e.preventDefault();
  });
}
window.addEventListener("load", message);

６行目のXHR.openでエラーが出ます

Uncaught ReferenceError: chat is not defined
    at HTMLInputElement.<anonymous> (message.js:6)

その他の記述の以下の通りです

require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("./preview")
require("./message")
//= require 'jquery'
//=require "popper"
//=require "bootstrap-sprockets"

class ChatMessagesController < ApplicationController

  def create
    @chat_message = ChatMessage.new(chat_message_params)
    if @chat_message.save
      render json:{ chat_message: @chat_message}
    end
  end

  private

  def chat_message_params
    params.require(:chat_message).permit(:message).merge(user_id: current_user.id, chat_id: params[:chat_id])
  end
end

<%= form_with(model: [@chat, @chat_message], id: "form" ) do |f| %>
  <%= f.text_field :message, id:"content" %>
  <%= f.submit '送信', id:"submit" %>
<% end %>
<div id='messages'>
</div>

def show
   @chat_message = ChatMessage.new
   @chat = Chat.find(params[:id])
   @chat_messages = @chat.chat_messages.includes(:user)
end

---

行なったこと
エラーの起こっている６行目は、元々下記のような記述だったのですが、

XHR.open("POST", `/chats/:chat_id/chat_messages`, true);

これでは、chat_idを参照できないので、書き換えてデータの保存はできるようになった形です。
application.jsの書き順なども変えてみたのですが、効果はありませんでした。

以上、何かアドバイスをいただけないでしょうか。
よろしくお願いいたします。

---

環境
ruby:2.6.5
rails:6.0.3.4

Answer 1

６行目以前でchatが定義されていません。
恐らくそのためです。
如何でしょうか？

Comments

[tatsu-koharu]

ご回答頂きありがとうございました。
投稿後に６行目以前にchatの定義を行おうとしたのですが、
私自身未熟で定義する方法が分からず断念しました。
現在は、送信したtextが最上部に来るようにして
非同期っぽく見えるような形で実装しました。
PC の性能によっては少々気怠く感じる実装になってるかもしれません。

[tomtomtomtom]

ご解決おめでとうございます。
あまりお役に立てなかったようで申し訳ありません。
また機会がありましたら宜しくお願い致します。

[tatsu-koharu]

とんでも無いです。
コメント頂きありがとうございました。
こちらこそよろしくお願いします。