【turbolinks】この挙動について教えて下さい

簡単なプログラムを書いて「turbolinks」について勉強してますが、
java scriptの動作についてどうしても分からない点があります。

rails 6.1.3
ruby 3.0.0
chrome 89.0.4389.72

前提

・ブラウザの「戻る」と「進む」を繰り返す度にturbolinksによって要素が増える際のスクリプトの動作を確認してます。

・スクリプトは<body>内に直接書いてます。

該当のソースコード

リンク元

ruby
1<h3><%= link_to "リンク先へ", tasks_issue1_path %></h3>

リンク先

ruby
1<div id="target">
2</div>
3
4<script>
5    console.log("script load");
6    $('#target').append('<b>javascriptから追加しました</b><br>');
7</script>

ブラウザキャッシュを使った時のconsole.logには１回ずつ出力される

1.一度リンク先に移動（console.logに"script load"が１回出力）
2.ブラウザの「戻る」で戻る
3.ブラウザの「進む」で移動する→要素が増える（console.logに"script load"が１回出力）

ログは合計２回

対して、リンクを踏んで移動した場合、console.logには２回ずつ出力される

1.一度リンク先に移動（console.logに"script load"が１回出力）
2.ブラウザの「戻る」で戻る
3.リンクをクリックして移動する→要素は増えてない（この時console.logには"script load"が２回出力！？）
※以下繰り返す度、２回、２回と増える

ログは合計３回

この結果が分からないのです。
・２回目以降のconsole.log出力が、なぜ２回ずつなのか？
・console.logは走ってるのに、なぜ要素追加は実行されないのか？どちらも同じスクリプト内に書いてるのに

どうか教えていただけないでしょうか。
先輩方宜しくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

スクリプトは<body>内に直接書いてます。

Turbolinksを使うなら、「<body>にスクリプトを書く」ということ自体が適切ではありません。

投稿2021/03/06 03:14

maisumakun

総合スコア145975

pecchan

2021/03/06 03:21

有難う御座います。それは承知の上であえて確認してる所でした。 rails6なのですが、「ページ単位で個別のscriptを使う」のは Turbolinksには適さないでしょうか？ Turbolinksを使いたいなら、application.jsにまとめるべきでしょうか？

pecchan

2021/03/06 03:23 編集

これは、turbolinksの挙動確認のためで、実際には、view最下部で<%= javascript_pack_tag 'items/show' %> のように個別のscriptを呼ぼうと思っておりました。

maisumakun

2021/03/06 03:24

> rails6なのですが、「ページ単位で個別のscriptを使う」のは Turbolinksには適さないでしょうか？ Turbolinksを使いたいなら、application.jsにまとめるべきでしょうか？はい、そのとおりです。「全ページで同じJavaScriptを使う」のがTurbolinksの大前提です。

pecchan

2021/03/06 03:26

なるほど！有難う御座います！！

pecchan

2021/03/06 03:27

大前提を理解してませんでした。有難う御座います。

行動規範の内容に同意します