Railsのturbolinksを入れることによる影響

turbolinksはページ読み込みをしない分ページ遷移を速くするツール。しかし、エラーが起きた際にこれを消すと直ることが何回かあった。そのまとめ。
ちなみにこの記事におけるturbolinksは以下のコードを指す。

application.html.erb

↓</head>の上にあるこれ
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

【ページ内リンク】

０．環境
１．背景
２．flash.nowが作動しない･･･！？
３．色々解決。local: trueを忘れてた。
４．local: trueの役割
５．turbolinksを消すとlink_toがおかしくなる？
６．結論

０．環境

・AWS
・Rails 5.2.4.5
・ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]

１．背景

この記事を書く前に、既に2つ(3つ？)弊害が起きていた。

【その１】

newとcreateで何故インスタンス変数を同じにするか、redirect_toとrenderを何故使い分けるか、の2つの証明が出来なくなる

インスタンス変数とrenderの関係性

【その２】

<table>内のform_withが作動しない

<table>内のform_withが作動しない･･･

turbolinksを切らない方法だと<table>の外にform_withを置かなければならず、下記リンクの解決策①が出来ない場面ではbutton_toを諦めるしかなかった。

form_with内にbutton_toを入れるとmethodが変わる

まあ、この2点は自分が工夫すればどうとでも解決できるし、いざとなったら弊害が起きるページだけturbolinksを切ればいいか、ぐらいに思っていた。しかし･･･

ページ内リンクへ戻る

２．flash.nowが作動しない･･･！？

new.html.erb

<%= flash[:danger] %>   <!--失敗した際ここに表示されるはずなのに･･･-->
<%= form_with model: @user do |f| %>
  <%= f.text_field :name %>
  <%= f.submit "登録" %>
<% end %>

users_controller.rb

class UsersController < ApplicationController
  def create
    if !User.create(params.require(:user).permit(:name))
      flash.now[:danger] = "登録に失敗しました"
      render :new
    end
  end
end

　これで登録失敗しても、何も表示が出ない･･･。ちなみにform_forにすれば表示された。
　form_withとform_forの違いを探してみたら、「f.submit」した際に前者は再読み込みされず、後者はされていた。
　ああ、こりゃ背景その２と同様にturbolinksが原因かな。と思いturbolinksを切ってみたら無事"登録に失敗しました"と表示された。

ページ内リンクへ戻る

３．色々解決。local: trueを忘れてた。

　「２．」の解決方法に、form_withをform_forに変えることが挙げられるが、form_forは公式に非推奨とされているので却下。
　そういえばform_withにlocal: trueを付けて無かったことを思い出し、試してみると無事解決！正しく作動した！

new.html.erb

<%= flash[:danger] %>   <!--失敗した際ここに表示された！･･･-->
<%= form_with model: @user, local: true do |f| %>
  <%= f.text_field :name %>
  <%= f.submit "登録" %>
<% end %>

　今までlocal: trueの必要性を感じてなかったが、成程、form_withをした際に再読み込みしてくれるようになるのか。
　ちなみに、local: trueを付けることにより
　１．【その１】：解決！
　１．【その２】：解決出来なかった･･･
こうなった。<table>内のform_with問題は本当に分からない。
※form_forに変えても解決しなかった

ページ内リンクへ戻る

４．local: trueの役割

form_withに「local: true」を
　付ける：Ajaxによる送信
　付けず：HTMLとして送信
らしい。

Ajaxとは、「Asynchronous(非同期) JavaScript ＋ XML」の略らしい。調べてみたら、以下のような感じらしい。

【IT用語】Ajaxとは？初心者向けに画像と動画を使って仕組みを分かりやすく解説

再読み込みしなくていいって、turbolinksみたい。
じゃあこれからはturbolinksを消せば直る現象には、local_trueを試してみようと思った。

ページ内リンクへ戻る

５．turbolinksを消すとlink_toがおかしくなる？

example.html.erb

<%= link_to "ログアウト", logout_path, method: :delete %>

　上記のようなログアウト機能を付けた。リンクを押すとメソッドがdeleteとなるが、turbolinksを押すとメソッドが変わらずgetのままとなる。ちなみにbutton_toとするとメソッドがdeleteに切り替わった。
　結局これの原因は分からなかった。これじゃturbolinksを切りようが無い。

ページ内リンクへ戻る

６．結論

　turbolinksはページ遷移をとても速くしてくれる反面、弊害が起きることもある。しかし５のようなことがあったので、これからも末永くお付き合いしようと思う。

ページ内リンクへ戻る