ブックマーク機能のAjax化について

こんばんは、くになかです。

学習したことの備忘録を書いて行きたいと思います。

はじめに

ブックマーク機能のAjax化する際の、javascriptを記載した時、分からなかったメソッドを書き残したいと思います。

JavaScriptのコード

ajax化するには、remote: trueなどもするのですが、今回はjs.erbの記述で詰まったのでそこについて書きます。

create.js.erb

$("#js-bookmark-button-for-board-<%= @board.id %>").replaceWith("<%= j(render('boards/unbookmark', board: @board)) %>”);

jメソッドについて

j(render …) の j は escape_javascriptのエイリアスメソッドです。

改行コード、シングルクオート、ダブルクオートの中を、エスケープしてくれるヘルパメソッドです。

使う理由としては、JavaScriptが読み取れる文字列に変換するためと、XSS対策のためだそうです。

今回の場合、render 'boards/unbookmark'なので、 app/views/boards/_unbookmark.html.erbで出力した文字列が入ります。

replaceWithメソッドについて

replaceWithメソッドは、1 回の呼び出しで DOM からコンテンツを削除し、HTML形式の文字列を渡しています。

htmlメソッドは要素をhtmlで返すのに対し、replaceWithメソッドは実際の要素(文字列)を返す感じです。

まとめ

javascriptに関してなれてない部分が多く、メソッドの使い方や文法などに戸惑いました。

ajax化する際やvue.jsなどのフレームワークを使う場合はjavascriptの知識が必須なのでなれておかないとなと思いました。

参考文献

https://api.jquery.com/replaceWith/ https://api.rubyonrails.org/v5.2.4/classes/ActionView/Helpers/JavaScriptHelper.html#method-i-escape_javascript

以上です。最後まで読んでいただきありがとうございます。