Rails × Vue.jsのlink_toの謎の挙動について調査してみた

詳しくいうと、

![スクリーンショット 2021-12-15 21.44.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653881/5dda7e50-b45f-d1d3-a065-5c6d70ded015.png)

今画面がこんな感じになっていて、
この画面のコードはしたのようなかんじで

```erb:mandalarts/index.html.erb

# フォームの配列をeachしたものが色々あります

<%= link_to "マインドマップ" , mindmaps_path%>

```

リンク先のコードはこういう感じです

```erb:mindmaps/index.html.erb

<%= javascript_pack_tag 'mindmaps'%>
<%= stylesheet_pack_tag 'mindmaps' %>
```



実際に表示させてるvueの画面は


```maindmaps.vue


<template>

<body>


  <div v-for="mindmap in mindmaps">
    <div
      @mousedown="dragStart"
      @mousemove="draggingMethod"
      @mouseup="dragEnd"
      :style = "{styles}"
    >
      <input class="mindmap-text">{{mindmap.text}}
    </div>
    <div id="mindmapNav">
      <button @click="addMindmap">マインドマップを追加</button>
    </div>
  </div>


</body>
</template>

```

とあり、

なぜかvueの画面が、 mandalarts/index.html.erbに表示されてしまっています。


https://teratail.com/questions/320971

またこの方のエラーと同様に、link_to経由でmindmaps/index.html.erbを表示させたら

mindmaps/index.html.erbのなかにある、vueファイルが表示されなくなってしまいました。
なぜかリロードするとvueが表示されるようになります。

この方のエラーを見るとターボリンクスが原因とある。

```application.js
import Rails from "@rails/ujs"
//import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
//Turbolinks.start()
ActiveStorage.start()
```


こんな漢字でturbolinksをコメントアウトしてみる

以前、上手く言ってたrailsとvueのgitをみたら、コメントアウトしてたので、
今のアプリもコメントアウトしてみる


確かに遷移したらvueが表示されるようになったが、
画像のように遷移する前にvueが表示されてしまっている。


# そもそもturbolinksとは


https://techtechmedia.com/turbolinks-rails/

このサイトの画像にある、
3のHTMLをレスポンスとして返すってときに、
mountedメソッドが発火してないのに、
htmlを返してしまってるのかもしれません。

ちなみにmountedの中身はこんなの

```mindmaps.vue
    mounted(){
      this.setMindmaps();
    },
    methods: {
      addMindmap: function(){
        this.mindmaps.push({text: ''})
      },
      setMindmaps: function(){
        axios.get('/api/mindmaps')
          .then(response=>(
            this.mindmaps = response.data
          ))
```


と思ったが、
検証ツールで、
http://localhost:3000/mindmaps
(<%= link_to "マインドマップ" , mindmaps_path%>の遷移先)
をみてみると

mindmaps.vueのtemplateの中のHTMLがそもそもなかった。

つまり、

```erb:mindmaps/index.html.erb

<%= javascript_pack_tag 'mindmaps'%>
<%= stylesheet_pack_tag 'mindmaps' %>
```



これを直接返してた。
検証ツールで確認したらscriptはあった。


https://techtechmedia.com/turbolinks-rails/

このサイトの画像にある通りで

turbolinksは文字通り「HTMLをレスポンスとして返す」
といった挙動になってた。

#　遷移する前にvueが表示されるエラーについて。

```mandalarts/index.html.erb

<%= javascript_pack_tag 'mindmaps'%>

<table class="mandalart-table">

    <tr>
      <% @mandalarts[0..2].each do |mandalart| %>
        <td>
            <div class="mandalart-text">
              <%= mandalart.text%>
            </div>
            <%= link_to "記入", edit_mandalart_path(mandalart.id)%>
        </td>
      <% end %>
    </tr>

    <tr>
        <% @mandalarts[3..5].each do |mandalart| %>
      <td>
        <div class="mandalart-text">
          <%= mandalart.text%>
        </div>
          <%= link_to "記入", edit_mandalart_path(mandalart.id)%>
      </td>
        <% end %>
    </tr>

    <tr>
        <% @mandalarts[6..8].each do |mandalart| %>
      <td>
        <div class="mandalart-text">
          <%= mandalart.text%>
        </div>
          <%= link_to "記入", edit_mandalart_path(mandalart.id)%>
      </td>
        <% end %>
    </tr>

</table>


<%= link_to "マインドマップ" , mindmaps_path%>

```


みなさまはお気づきだろうか、、、、。。

そう、一番最上部に

<%= javascript_pack_tag 'mindmaps'%>

これが表示させてあった、、、。。

このエラーを解決するために、
マネーフォワードのエンジニアの方、実務経験バリバリある転職活動中
のエンジニアの方の時間を30分強奪ってしまいました。。。。。

いやーー、本当にしょうもないミスで、エンジニア様の時間を奪ってしまった。。。
デバッグするときは処理ミスの可能性を追わないで、
ケアレスミスの可能性もしっかり考えないと。。。。