javascriptで非同期通信による実装でレスポンスの表示がうまくいきません。

Question

前提

チャットアプリを製作中でして、非同期通信でメッセージを送信できるように実装中です。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• エラーを解決してメッセージを表示したいです。

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

送信ボタンを押した際にブラウザに反映されず、下記のようなエラーがでてしまいました。

上記のエラーをクリックすると下記のようにでてきます。

該当のソースコード

Rails.application.routes.draw do
  devise_for :users
  root to: "rooms#index"
  resources :users, only: [:show, :edit, :update]
  resources :rooms, only: [:new, :create, :destroy] do
    resources :messages, only: [:index, :create]
  end
end

class Message < ApplicationRecord
  belongs_to :room
  belongs_to :user
  has_one_attached :image

  validates :content, presence: true, unless: :was_attached?

  def was_attached?
    self.image.attached?
  end
end

class MessagesController < ApplicationController
  before_action :set_room, only: [:index, :create]

  def index
    @message = Message.new
    @messages = @room.messages.includes(:user)
  end

  def create
    @message = @room.messages.new(message_params)
    @user = @message.user
    if @message.save
      render json:{ message: @message, user: @user}
    else
      @messages = @room.messages.includes(:user)
      render :index
    end
  end

  private

  def set_room
    @room = Room.find(params[:room_id])
  end

  def message_params
    params.require(:message).permit(:content, :image).merge(user_id: current_user.id)
  end
end

const buildHTML = (XHR) => {
  const item = XHR.response.message;
  const user = XHR.response.user
  const html = `
    <div class="message">
      <div class="upper-message">
        <div class="message-user">
          ${user.name}
        </div>
        <div class="message-date">
          ${item.created_at}
        </div>
      </div>
      <div class="lower-message">
        <div class="message-content">
          ${item.content}
        </div>
        <img src= ${item.image} width="300" height="300" class: ”message-image" if message.image.attached?>
      </div>
    </div>`;
  return html;
};

function message (){
  const submit = document.getElementById("submit");
  if (!submit){ return false;}
  submit.addEventListener("click", (e) => {
    e.preventDefault();
    const form = document.getElementById("messageform");
    const formData = new FormData(form);
    const XHR = new XMLHttpRequest();
    const url = location.pathname
    XHR.open("POST", url, true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      if (XHR.status != 200) {
        alert(`Error ${XHR.status}: ${XHR.statusText}`);
        return null;
      };
      const list = document.getElementById("messagelist")
      const formText = document.getElementById("content");
      list.insertAdjacentHTML("afterend", buildHTML(XHR));
      formText.value = "";
    };
  });
 };
 
 window.addEventListener('load', message);

<%= render "shared/header" %>

<div class="wrapper">
    <div class="sidebar">
      <%= render "side_bar" %>
    </div>
    <div class="chat">
      <%= render "chat" %>
    </div>
</div>

〜略〜
<div class="messages">
  <%= render partial: 'message', collection: @messages %>
</div>

<%= form_with model: [@room, @message], class: 'form', id: 'messageform' do |f| %>
  <div class="form-input">
    <%= f.text_field :content, class: 'form-message', placeholder: 'メッセージを入力', id: "content" %>
    <label class="form-image">
      <span class="image-file">画像</span>
      <%= f.file_field :image, class: 'hidden' %>
    </label>
  </div>
  <%= f.submit '送信', class: 'form-submit', id: "submit" %>
<% end %>

<div class="message", id="messagelist" >
</div>

試したこと

エラー分で検索してもいまいちヒットしません。

console.log(item)を実行し、確認しました。レスポンスが返ってきているとは思うのでconst htmlの所の書き方がいけないんでしょうか...

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

以下、404エラーのターミナルです。

以下、@messagesの出力結果です。

Answer 1

console.log(item)の内容を見るに、itemの中にuser_idはありますが、userは存在しないのではないでしょうか？
以下のように、user部分を省けばエラーは発生しないようになるかと思います。

const html = `
        <div class="message">
          <div class="upper-message">
            <div class="message-user">
-              ${item.user.name}
            </div>
            <div class="message-date">
              l ${item.created_at}
            </div>
          </div>
          <div class="lower-message">
            <div class="message-content">
              ${item.content}
            </div>
            <img src=${item.image}, class: ”message-image">
          </div>
        </div>`;

Comments

[退会済みユーザー]

回答ありがとうございます。

指摘していただいたように${item.name}としたところ、今度は下記のエラーがでました。
GET http://localhost:3000/rooms/10/undefined, 404 (Not Found)

ここのitem.user.nameというのはuserテーブルのnameを表示する記述ですが、やはりここがあやしいでしょうか？

[hayato7]

${item.user.name}を${item.name}に書き換えるということではなく、この部分の記述を完全に削除したら動くのでは？という内容でした。

message.js内のitemというのは、HTTPレスポンスに含まれるmessageを取得しています。
const item = XHR.response.message;

そしてその中身はというと、MessagesControllerのcreateメソッドの以下の部分だと思います。
jsonを返す時にuserが含まれていませんので、js側からはuserを取得できません。
if @message.save
render json:{ message: @message}

[退会済みユーザー]

${item.user.name}を消すということでしたか。申し訳ないです。
指摘の通りにしましたら、送信されました。
render json:{ message: @message}という記述からuserが取得できていないということで、挑戦していますが、苦戦中です。userテーブルのnameを取得したいため、下記のようにしてみたりしていますがエラーがでて、解決しません。恐縮ですが、助言頂けないでしょうか。
```messages_controller
〜省略〜
def create
@message = @room.messages.new(message_params)
+ @user = User.find(params[:user_id])
if @message.save
+ render json:{ message: @message, user: @user}
else
〜省略〜
```
```message.js
〜省略〜
XHR.onload = () => {
const list = document.getElementById("messagelist")
const formText = document.getElementById("content");
const item = XHR.response.message;
+ const user = XHR.response.user
const html = `
<div class="message">
<div class="upper-message">
<div class="message-user">
+ ${user.name}
</div>
〜省略〜
```

+部が追記したものです。

[退会済みユーザー]

itemにuser_idが格納されているのでconst user = XHR.response.userの記述は必要無い気がしてきました。
itemにあるuser_idをどう返すかですよね。悩ましいです。引き続き、粘っていますので空いてる時間にでもお助けいただけると幸いです。

[hayato7]

> userテーブルのnameを取得したいため、下記のようにしてみたりしていますがエラーがでて、解決しません。恐縮ですが、助言頂けないでしょうか。

こちらのエラーはどういった内容のものでしょうか？

[退会済みユーザー]

返信ありがとうございます。
上記のコードを記述し、でたエラーの画像を補足情報にアップロードしました。
よろしくお願いいたします。

[hayato7]

ありがとうございます。
サーバーサイド(rails)の方でエラーが発生し、404が返ってきているように思います。
railsの方でログファイルを確認すると、エラー内容が見られるかと思います。

おそらくuser_idの部分に問題があると思うので、以下のような形にすればuserを取得できるようになるのではないかと思います。
@message = @room.messages.new(message_params)
+ @user = @message.user
// または、 @user = User.find(current_user.id)

[退会済みユーザー]

@user = @message.userに修正することでuserのnameを表示することができました。
修正後、404エラーをターミナルにて確認すると下記のように表示されています。
```ターミナル
Started GET "/rooms/10/undefined" for ::1 at 2022-10-12 15:01:15 +0900

ActionController::RoutingError (No route matches [GET] "/rooms/10/undefined"):
```
"/rooms/10/undefinedがありませんといった意味でしょうか。
なぜundefinedになっているのかわかりません。
エラー分からコントローラー、ルーティングを確認していますが異常は無い気がします。

[hayato7]

> 修正後、404エラーをターミナルにて確認すると下記のように表示されています。

404エラーは、どのタイミングで発生しているのでしょうか？

Started GET "/rooms/10/undefined" (...略)
上記の内容から、GETメソッドが利用されていることがわかるので、フォームの送信とは、関係ないように思えます。

[退会済みユーザー]

送信後にエラーがでています。
質問フォーマットのソースコードの方、現在のものに更新し、補足の方にターミナルの画像を載せました。
度々申し訳ありませんが、よろしくお願いいたします。

[退会済みユーザー]

これもしかしてjavascriptの方でimageが返されていないとかっていう原因ありますかね？
試しに画像を送信してみても表示されなかったので。

[hayato7]

ありがとうございます。
状況おそらく理解できました。

ryosukeさんの仰るとおり、imageがないですね。
なので、下記を削除するとエラーが発生しないのではないでしょうか？
```
<img src=${item.image}, class: ”message-image">
```

${item.image}がundefinedになるので、結果的に、/rooms/10/undefinedというURLをリクエストしてしまっています。

[退会済みユーザー]

おっしゃる通り、削除しましたら、エラー消えました。
ありがとうございます。
アクティブストレージを使って画像を保存していますが、javascriptに別の記述が必要ってことですね？

[hayato7]

正しい画像URLを取得する必要がありますね。
アクティブストレージに保存している画像のURLは、どのように管理されているのでしょうか？

例えば、1メッセージに添付できる画像が1つだけなのであれば、messageテーブルにimg_urlカラムを用意し、そこでURLを持たせていたりします。

[退会済みユーザー]

1メッセージにつき、画像一つですが、messagesテーブルにimageに関するカラムは現状ありません。
active_storage_blobsテーブルとactive_storage_attachmentsテーブルが存在し、javascriptによるajax通信に取り組む前は表示できていたんですが、javascriptに反映させるためにはimg_urlといったカラムを用意する必要があるんですね？

[hayato7]

管理の例としてあげただけですので、カラムを用意する必要はありません。

> javascriptによるajax通信に取り組む前は表示できていた
このときは、どのようなコードで表示されていましたか？

[退会済みユーザー]

messageモデルにhas_one_attached :imageで紐づけています。

[hayato7]

であれば、
バックエンド側で、message.imageで取得できるということですよね。

userの場合と同じく、それでフロント側にimageのurlも渡すことができるのではないでしょうか？

[退会済みユーザー]

たしかにmessage.imageにて取得できていました。
すみません。挑戦中ですが書き方がわかなくて...
render json:{ message: @message, user: @user}ここにimageも返すように追記すればいいということですよね？
下記のようにしてみましたが
```messages_controller
@image = message.image
render json:{ message: @message, user: @user, image: @image}
```
```message.js
const image = XHR.response.image
<img src= ${image} >
```
こちらの記述は正しくなく、下記のエラーがでてしまいます。
POST http://localhost:3000/rooms/10/messages 500 (Internal Server Error)

[hayato7]

> render json:{ message: @message, user: @user}ここにimageも返すように追記すればいいということですよね？

そうです。

フォーム送信時に500エラー(サーバー側でエラーが発生)になっているので、
@image = message.imageを追加してエラーが発生した可能性が高いと考えられます。

[hayato7]

調べてみたところ、blobのまま送信しようとしてエラーが発生している可能性があります。
アクティブストレージをAPIで利用する場合、通常の方法ではだめなようです。

以下の記事なんかが参考になるかと思います。
https://sato-s.github.io/2018/08/25/active-storage-in-API.html

[退会済みユーザー]

わざわざ調べてくださり、ありがとうございます。
閲覧中です。

ダイレクトアップロードという機能がActive Storageに備わっているみたいですがこちらはどうでしょう？
http://railman.net/railsguides/6.1/active_storage_overview.html#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC

[hayato7]

> ダイレクトアップロードという機能がActive Storageに備わっているみたいですがこちらはどうでしょう？

ダイレクトアップロードというのは、Railsサーバーを通さずに例えば、Amazon S3などのクラウドサービスに直接アップロードする機能です。そのため、今は関係ないですね。

[退会済みユーザー]

hayatoさんが送ってくれたURLのイメージのアップロードのところですが、『普通のフォームを使うことで』というのは私で言うとform_withのことになるんですかね。
その下の『レスポンスにイメージ格納先のURLを追加する。』というところが解決への糸口になりそうですね。

[退会済みユーザー]

ダイレクトアップロードの件、なるほどです。

[退会済みユーザー]

https://sato-s.github.io/2018/08/25/active-storage-in-API.html
上記のURLのレスポンスにイメージ格納先のURLを追加するを実際にやってみましたが実際に返ってきているのか確認の仕方がわかりません。

```app/models/message.rb
include Rails.application.routes.url_helpers
def image_url
image.attached? ? url_for(image) : nil
end
```
```config/environments/development.rb
Rails.application.routes.default_url_options[:host] = 'localhost'
Rails.application.routes.default_url_options[:port] = 3000
```
```app/controllers/messages_controller.rb
render json:{ message: @message, user: @user, methods: [:image_url]}
```

[hayato7]

この時フォーム送信を行うとどうなりますか？

[hayato7]

確認の仕方についてですが、apipry-railsを利用してデバッグする方法があります。

[退会済みユーザー]

上記まではできたのですが、javascriotの方にどう記述したらimage画像を取得できるのかわからなくて...
下記のような感じでやってみたりしましたが、
const image = XHR.response.image_url
<img src= "{url_for('static', filename='image')}">
おそらく書き方があってなくて下記のエラーが表示されてしまいました。
GET http://localhost:3000/rooms/10/%7Burl_for('static',%20filename='image_url')%7D 404 (Not Found)

[退会済みユーザー]

const image = XHR.response.image_url
<img src= "${image}">
ともやってみましたが、下記のエラーでやはりimageが取得できていないようです。
GET http://localhost:3000/rooms/10/undefined 404 (Not Found)

[hayato7]

```
const image = XHR.response.image_url
<img src= "${image}">
```
上記コードがundefinedになっているので、rails側でimage_urlがうまく作成できていない可能性が高いですね。
APIを利用したデバッグが難しそうなのであれば、以下のindexの方であればデバッグも行いやすいと思います。
```
def index
@message = Message.new
@messages = @room.messages.includes(:user)

// ここであるmessageから、画像urlがどう取得できるか
end
```

[退会済みユーザー]

返信遅くなり、申し訳ないです。
def index
@message = Message.new
@messages = @room.messages.includes(:user)
binding.pry
end
とし、
ターミナルにて下記のようにしてみました。
pry(#<MessagesController>)> 　@message.image
=> #<ActiveStorage::Attached::One:0x00007f9eb98f48a0 @name="image", @record=#<Message:0x00007f9eb6de55b0 id: nil, content: nil, room_id: nil, user_id: nil, created_at: nil, updated_at: nil>>
と出てきましたがたぶん関係ないですよね。
下記もやってみましたがnilと表示されてしまっています。

pry(#<MessagesController>)> @message.image_url
=> nil

image_urlがやはりちゃんと作成できていないみたいですね。
挫けそうです...

[hayato7]

```
pry(#<MessagesController>)> 　@message.image
```
上記の結果は、@message = Message.newのimageを取得しているので、データが入っていないのではないでしょうか。

できれば、@messagesから1件取り出して、もう一度ターミナルで確認してみてもらえますか？

> 挫けそうです...

着実に進んでいると思いますので、もう少しの辛抱です。
githubなどでコードを共有いただければ、こちらでも環境作成して確認できますが、難しそうでしょうか？

[退会済みユーザー]

返信ありがとうございます。
binding.pryにて@messagesを出力してみましたがこれでよろしかったでしょうか？（補足に画像を追加しました）

現在、コミット前でして、うまくいかないようであれば保留にして別の追加実装をしようとも考えていたところでして,,,

[hayato7]

> binding.pryにて@messagesを出力してみましたがこれでよろしかったでしょうか？（補足に画像を追加しました）

messagesではなく、messagesからmessageを一件取得していただきたいです。

> 現在、コミット前でして、うまくいかないようであれば保留にして別の追加実装をしようとも考えていたところでして,,,

コミット前でも環境や既存のコードがわかればいいので、問題なければ共有いただければと思います。

[退会済みユーザー]

返信ありがとうございます。

> messagesではなく、messagesからmessageを一件取得していただきたいです。
すみません。どうしたらいいのかわかりません...

githubの共有というのはリポジトリのURLを貼れば大丈夫でしょうか？

[退会済みユーザー]

すみません。調べているとAction Cableという自動更新機能がrailsには備わっていて、私がやりたいことは寧ろそっちだと今更ながら思ってしまいました。

大変申し訳ないですが、そっちに切り替えようと考えています。
長々と付き合って頂いて、親切に接して頂いて、本当に感謝しています。

[hayato7]

なるほど、リアルタイム通信でやりとりできるようにしたいのですね。
であれば確かにWebSocketを利用するのがいいと思います。

こちらの質問についてはクローズしていただければと思います。

[退会済みユーザー]

hayatoさん長々と付き合って頂いて、本当にありがとうございました。
本当に感謝してます。
ありがとうございました！！！