

## 実行環境

  * ruby ver3.1.2
  * ruby on rails ver6.1.7.3
  * node ver16.20.0

## 質問内容

### 現状

現在、ruby on railsでturbolinksを使った際の挙動に悩んでいます。  
トップページとアバウトページを作っており、以下のようなコードを書いています。

top.html.erb

[code]

    <p>top page</p>
    <%= link_to 'top page', homes_top_path %>
    <%= link_to 'about page', homes_about_path %>
    
    <script type="text/javascript">
      document.addEventListener('turbolinks:load', function() {
        let x = 'test1';
        let y = 'test2';
        let z = 'test3';
        console.log(x);
        console.log(y);
        console.log(z);
      });
    </script>
    
[/code]

about.html.erb

[code]

    <p>about page</p>
    <%= link_to 'top page', homes_top_path %>
    <%= link_to 'about page', homes_about_path %>
    
    <script type="text/javascript">
      document.addEventListener('turbolinks:load', function() {
        let x = 'test4';
        console.log(x);
      });
    </script>
    
[/code]

この状態でトップページを最初に読み込むと、console上で以下のようになります。  
[![画像の説明をここに入力](https://i.stack.imgur.com/LHB9K.png)](https://i.stack.imgur.com/LHB9K.png)

その後、アバウトページにリンクを押して遷移すると、console上で以下のようになります。  
[![画像の説明をここに入力](https://i.stack.imgur.com/j2MBr.png)](https://i.stack.imgur.com/j2MBr.png)

### 実現したいこと

turbolinksを使った画面遷移を行った際、とび先のページに存在するscriptタグのコードのみを実行したいです。  
今回の例でいうと、トップページからアバウトページに遷移した際に、console上でtest4だけが表示されるようにしたいです。  
turbolinksはソースをキャッシュするというのは何となく知っているのですが、どうすれば上記のことを実現できるのかわかりません。


CC BY-SA 4.0
2023-04-22T03:37:50.063
94609
2023-04-22T03:37:50.063
58026
question
javascript ruby-on-rails ruby
ruby on railsでのturbolinksの挙動