【jQuery】非同期化の際のidとメソッドの注意点

今回は投稿を非同期化する際のメソッド選びやidの位置を失敗したのでメモしておきます。非同期化の作業自体はコメントとほぼ同じだったのでこちらを参照ください！
https://zenn.dev/sudoukky/articles/8188ecb07bb99b

事例

投稿を非同期化させるのにまずは部分テンプレートにして作成しますが、each文の中身だけ部分テンプレート化させそこにidを付与、そしてjsファイルには下記のメソッドを使用しました。

create.js.erb

$('#post_board').append('<%= j(render partial: "post_board") %>');

その結果、投稿されたものが変な順番で表示されるようになりました笑
そしてリロードすると正しい順番になるということで非同期に問題があるとことがわかります。

原因１（each文の中にid）

まず、ここで起きた過ちの一つはidの位置、idをeach文の中に入れることは、一般的には推奨されていないということ。idは、HTML要素を一意に識別するために使用されるため、idが重複すると、JavaScriptやCSSなどのコードで要素を特定する際に問題が発生する可能性があります。
今回はidの位置の関係で新規投稿の位置がわからなくなり、一番上の投稿の次に割って入るようになりました笑

原因２（メソッド）

今回使用されたappendというメソッドは、指定した要素の最後に、引数で指定したコンテンツを追加することができるものになります。そのため、先ほどのidの位置を修正しeach文の外にすることでeach文の中身がまるまる増えるような形になります。

上の図のように「テスト2」と投稿すると最初にあった「tesuto」もまとめて「tesuto」の次に表示されてしまいます。

正しい記述

今回のようにeach文を使用する際の正しい記述は下記のようにhtmlメソッドを使用してあげることです。

create.js.erb

$('#post_board').html('<%= j(render partial: "post_board") %>');

htmlメソッドは、HTMLコンテンツを取得または設定することができるメソッドで、簡単に言うと対象の要素の中身を丸ごと変えるため、今回だと新しく投稿があるたびにeach文の中身が丸ごと変わり反映されるため下記のように「テスト2」の投稿が正しく表示されます。

まとめ

今回のミスはidの位置関係やidの働き、メソッドについての理解が無かったために起こりました。jQeryに関しても、javascriptに関してもここからはおおもとの意味をより意識して理解しながら取り組んでいければと思います。