t_kusakabe74さんがrails寄りの話だったので、
今度は私がJavaScript側の話をします。
質問箇所以前に説明して置かなければならない箇所がいくつかありそうですね。
JavaScript
1$("#like-buttons").html("<%= j(render partial: 'like', locals: { tweets: @tweets, likes: @likes, like: @like}) %>")
HTML+JSの世界には<%= xxx %>
などという書き方は存在しません。
ファイル名がxxx.erb
であることから、eRubyという任意のテキストにRubyスクリプトを挿し込む機能を使う想定であると考えられます。
https://magazine.rubyist.net/articles/0017/0017-BundledLibraries.html
RailsはWebサーバと呼ばれる役割で、
Chrome等のWebブラウザからリクエストを受け取ったら、
即興のHTMLファイルを生成して返す事が仕事になります。
Railsは_like.html.erb
を読み取り、
eRubyのルールに従いながら文字列を生成します。
なので、出来上がってブラウザに配信される実際のHTMLは下記のような具体的な文字列に展開されたものになっているはずです。
JavaScript
1$("#like-buttons").html("<iframe>Twitterのアプリ的なもの</iframe>")
JavaScript世界に入った先の話をします。
eRubyは私も詳しくありませんし、ブラウザにHTMLが届いた時点でRubyとかもう何も関係ないので別途勉強してください。
JavaScript
1$("#like-buttons").html("<iframe>Twitterのアプリ的なもの</iframe>")
この$
は正式なJavaScriptの決まった書き方ではありませんが、
一般的にjQueryライブラリの関数であるという慣習があります。
JavaScriptの主な用途は、HTMLの要素(DOMツリー)を書き換える事で見た目を変更することです。
jQueryはネイティブのJSの至らない所を補佐するライブラリで、
読み込むとグローバル変数領域にjQuery
と$
という関数をぽんと生成します。
質問文のコードは$
関数を"#like-buttons"
という文字列を引数として実行していますね。
jQueryではDOMツリーをCSSセレクターで検索出来れば素敵じゃない?という思想で作られており、文字列の先頭が#
ならid名、.
ならclass名でDOMツリーを検索できます。
https://api.jquery.com/id-selector/
これで$("#like-buttons")
でHTMLのid="like-buttons"
のDOMを捕まえました。
次に.html(文字列)
を見ていきましょう。
https://api.jquery.com/html/#html-htmlString
.html()
は引数空の状態で実行すると、現在のDOMの中に入っているHTML文字列を返します。
.html("<div>hogehoge</div>")
という風に文字列を引数に設定して実行すると、
現在のDOMの中に入っているHTML文字列を捨てて、引数の文字列を新しいHTML文字列として差し替えます。
こうすることでブラウザのDOMツリー構造が変化し、
実際にブラウザに表示されている内容が切り替わります。