Ruby on Rails インスタンス変数がjavascriptに渡されない

Question

私は今railsでチャットアプリを作っており、current userのメッセージは右側に表示、相手のメッセージは左側に表示、とそれぞれ配置を分けるために@idと@message.from_id(メッセージ送信者)を読み取ってその処理をjavascriptにさせています。もしイコール(@id = @message.from_id)であれば右側に配置させるという処理です。

そこで問題なのですが@idというインスタンス変数をjavascriptに渡しているのですが、一番最初のチャット開始の時（最初のメッセージ送信時）だけcurrent_user_idがnilになります。それ以後はリロードしたりすると値が渡されています。

どのように解決すればよいのでしょうか？

#controller
def show
    @id = current_user.id
    @user = User.find(params[:id])
    @room_id = message_room_id(current_user,@user)
    @messages = Message.recent_in_room(@room_id)
end

#show.html.erb view
....
<section class="message_box" id="po">
  <div id="messages" class="msg_box p-4 rounded">
    <%= render @messages %>
  </div>
</section>
....

#_message.html.erb

<div class="message">
  <% user = User.find_by(id: message.from_id) %>
  <p class="<%= message.id %> px-2 mb-1" id="message_sender" ><%= user.profile.username %></p>
  <p class="<%= message.id %> p-3 border rounded received" id="message_content"><%= message.content %></p>
  
  <script type="text/javascript">
    var from_id = <%= message.from_id %>;
    var current_user_id = <%= raw @id %>; #ここのcurrent_user_idが一番最初のチャットの時だけnilになっている。
    
    if(from_id == current_user_id){
      $('p.' + <%= message.id %>).css('text-align', 'right');
      $('p.' + <%= message.id %>).css('margin-left', 'auto');
    }else{
      $('p.' + <%= message.id %>).css('text-align', 'left');
      $('p.' + <%= message.id %>).css('margin-right', 'auto');
    }
  </script>

</div>

Answer 1

チャット開始時のみということで if(from_id == current_user_id || cuurrent_user_id == "")とすることで解決しました。

#_message.html.erb

<div class="message">
  <% user = User.find_by(id: message.from_id) %>
  <p class="<%= message.id %> px-2 mb-1" id="message_sender" ><%= user.profile.username %></p>
  <p class="<%= message.id %> p-3 border rounded received" id="message_content"><%= message.content %></p>

  <script type="text/javascript">
    var from_id = <%= message.from_id %>;
    var current_user_id = <%= raw @id %>;

    if(from_id == current_user_id || current_user_id == "" ){ #修正部分
      $('p.' + <%= message.id %>).css('text-align', 'right');
      $('p.' + <%= message.id %>).css('margin-left', 'auto');
    }else{
      $('p.' + <%= message.id %>).css('text-align', 'left');
      $('p.' + <%= message.id %>).css('margin-right', 'auto');
    }
  </script>

</div>

Answer 2

まずはデバックで値を確認してみてはいかがでしょうか？
@id = current_user.id
byebug
@user = User.find(params[:id])

ここで@id = current_user.id
が入っていないのが分かると思うので
その元のcurrent_userの部分でbyebugすると原因が特定できるのではないでしょうか？

Comments

[MrKametyou]

指摘いただきました@id = current_user.idですが値は入ってます。
質問文の中にも述べている通りチャット開始時の時だけnilになります

[shuzi]

ccurrent_user_idが一番最初のチャットの時だけnilになるときでもサーバー側では値が入っているのを確認されているということですか？

[MrKametyou]

はい