javascriptの既読機能で400エラー

Question

前提・実現したいこと

メモの既読機能をjavascriptで実装しています。
メモをクリックすると灰色の色が付いて既読を判断する仕組みです。

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

実際にクリックをすると４００エラーになってしまい実行できません。
検証でXHR.send()のところがうまくいいていないみたいなのですが、何が原因かがわかりません。何が原因でしょうか？

エラーメッセージ
Failed to load resource: the server responded with a status of 400 (Bad Request)

該当のソースコード

function check() {
  const memos = document.querySelectorAll(".memo");
  memos.forEach(function (memo) {
    if (memo.getAttribute("data-load") != null) {
      return null;
      }
    memo.setAttribute("data-load", "true");
    memo.addEventListener("click", () => { 
      const memoId = memo.getAttribute("data-id");
      const XHR = new XMLHttpRequest();
      XHR.open("GET", `/memos/${memoId}`, true);
      XHR.responseType = "json";
      XHR.send();
      XHR.onload = () => {
        if (XHR.status != 200) {
          alert(`Error ${XHR.status}: ${XHR.statusText}`);
          return null;
          }
        const item = XHR.response.memo;
        if (item.checked === true) {
        memo.setAttribute("data-check", "true");
        } else if (item.checked === false) {
        memo.removeAttribute("data-check");
        }
      };
    });
   });
  }
  setInterval(check, 1000);

<div class="memos">
  <% @memos.each do |memo| %>
    <div class="memo" data-id = <%= memo.id %>data-check=<%= memo.checked %>>
      <div class="memo-item"><%= memo.item %></div>
      <div class="memo-text"><%= memo.text %></div>
    </div>
  <% end %>
</div>

class MemosController < ApplicationController

  def index
    @memos = Memo.all.order(id: "DESC")
  end

  def new
    @memo = Memo.new
  end

  def create
    @memo = Memo.create(memo_params)
    
    if @memo.valid?
      @memo.save
      redirect_to root_path
    else
      render :new
    end
  end

  def checked
    memo = Memo.find(memo_params[:id])
    if memo.checked then
      memo.update(checked: false)
    else
      memo.update(checked: true)
    end

    item = Memo.find(memo_params[:id])
    render json: { memo: item }
  end

  private
  def memo_params
    params.require(:memo).permit(:item, :text)
  end
end

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

ruby '2.6.5'
gem 'rails', '~> 6.0.0'
gem 'mysql2', '0.5.3'

Comments

[m.ts10806]

「急」 の意図が分かりませんが、書いたところで大して効果はないどころか、回答者を遠退けるだけなのでやめたほうが良いかと。
あと、再現するブラウザと、ルーティングの定義もご提示ください。
※firegrapeというユーザーは雑な回答(時に大嘘もある)を繰り返してるだけなので、相手にしない方が良いです。時に質問者より分かってません

[think49]

> 【急】javascriptの既読機能で400エラー

回答から3日後にコメントをつける人から緊急質問された人の気持ちを考えて欲しいのですが…。虫のいい話です。
https://teratail.com/questions/298470

[退会済みユーザー]

m.ts10806
ご意見有難うございます。

think49
自分で考えた末にわからなかったのと、やらなければならない期日が迫っているので緊急にさせてもらいました。
不快にさせる意はなかったのですがそう受け取ってしまったのなら申し訳ありません。

[m.ts10806]

>やらなければならない期日が迫っているので緊急にさせてもらいました。
赤の他人からすれば「そんなの知らん」です。
本当に急ぎなら、何の前提や背景も知らない・いつ確認するかも分からない場所に質問して答えを待つという非効率なことをやっているのは誰にも理解されないと思います。

[退会済みユーザー]

>やらなければならない期日が迫っているので緊急にさせてもらいました。
赤の他人からすれば「そんなの知らん」です。
何故他の人との会話に入ってくるのかはわかりませんが、そこの部分はあなたが深めなくてもいいのでは？
私は自分で考えた末にteratailさんの力を借りようと思っただけで、あなたに理解されようと思ってやってはいません。質問した後も考え方を変えるなど自分でできることはしています。

質問が削除できない形式ですので、このままスルーしてもらえるとありがたいです。

[m.ts10806]

もともと「”急”は不要である」と指摘したのは私です。
ただ、未解決のまま無責任に退会する人に指摘されるいわれはありません。
反論したいなら指摘されない質問内容にしてから言ってください。

Answer 1

javascriptで実装しています

イベント処理は正しく実装してください。

インターバル(1000[msec])で実行される check() 関数内で memo.addEventListener("click", /* omitted */) とイベントリスナを登録してはいけません。

１秒毎に繰り返して登録することになるので、クリックするとイベントリスナは経過秒数分のリスナ実行となります。15秒経過していたとすると、XHRは15回同じURLにGET要求するスパム実装になっています。

400 Bad Request になるのは、サーバー側がスパム検知しているからではないでしょうか。

追記）
他の質問でイベントの多重登録について回答したことがあります
（繰り返してイベントリスナが登録される例としてforループ内での addEventListener()を示しています）。

Comments

[退会済みユーザー]

そうなのですね。
教えていただいたところを見直そうと思います。
有難うございました。

Answer 2

こんな感じに変えてもだめでしょうか？
XHR.open("GET", /memos/${memoId}, true);
↓
XHR.open("GET", "/memos/" + memoId, true);

Comments

[退会済みユーザー]

試してみましたがうまくいかずに同様のエラーがでてしまいます…

[firegrape]

memoIdをconsole.log
で確認すると、どんな感じですか？

[退会済みユーザー]

consoleでは正常に"1"とでてきます。
sequelproでも保存されていますが、checkのカラムだけnullのままです
https://gyazo.com/df942c705facade1d9f780442522ba44

debuggerを使ってみたのですが、以下のようにsendの部分がundefinedとなってしまいます。
https://gyazo.com/47eac18715d62fedd79c447a9fda1790