0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-03-17

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

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

####【ページ内リンク】
0.環境
1.背景
2.flash.nowが作動しない・・・!?
3.色々解決。local: trueを忘れてた。
4.local: trueの役割
5.turbolinksを消すとlink_toがおかしくなる?
6.結論

#0.環境
・AWS
・Rails 5.2.4.5
・ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]

#1.背景
この記事を書く前に、既に2つ(3つ?)弊害が起きていた。

###【その1】
newcreateで何故インスタンス変数を同じにするか、redirect_torenderを何故使い分けるか、の2つの証明が出来なくなる

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

###【その2】
<table>内のform_withが作動しない

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

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

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

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

ページ内リンクへ戻る

#2.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_withform_forの違いを探してみたら、「f.submit」した際に前者は再読み込みされず、後者はされていた。
 ああ、こりゃ背景その2と同様にturbolinksが原因かな。と思いturbolinksを切ってみたら無事"登録に失敗しました"と表示された。

ページ内リンクへ戻る

#3.色々解決。local: trueを忘れてた。
 「2.」の解決方法に、form_withform_forに変えることが挙げられるが、form_forは公式に非推奨とされているので却下。
 そういえばform_withlocal: 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を付けることにより
 1.【その1】:解決!
 1.【その2】:解決出来なかった・・・
こうなった。<table>内のform_with問題は本当に分からない。
form_forに変えても解決しなかった

ページ内リンクへ戻る

#4.local: trueの役割
form_withに「local: true」を
 付ける:Ajaxによる送信
 付けず:HTMLとして送信
らしい。

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

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

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

ページ内リンクへ戻る

#5.turbolinksを消すとlink_toがおかしくなる?

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

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

ページ内リンクへ戻る

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

ページ内リンクへ戻る

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?