Turbolinks 5とTurbolinks Classic(2.x)の比較

  • 59
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

変わりすぎて面食らう

ひょんな拍子にTurbolinks 5を使うことになったのですが、新機能を使わない状況であっても、ことごとくと言っていいぐらいに記法が変化していました。

なお、「Turbolinks Classic」は、Turbolinks 5が出た後に、Turbolinks 2.xに付けられた名称です。

<head>内の記述

Turbolinks Classicでは、JavaScriptやCSSの変化を検知するために、data-turbolinks-trackという属性を指定することになっていましたが、Turbolinks 5では、このdata-turbolinks-track属性にreloadという値を指定する必要があります。

<!-- classic -->
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>

<!-- 5 -->
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => 'reload' %>

キャッシュ

Classicでも、過去に見たページはキャッシュした上で、戻った時にそれを表示するというような処理を行っていましたが、Turbolinks 5では、そのキャッシュを、同じアドレスに再度アクセスした際にもプレビューとして表示する、という仕組みが取り入れられています。これを止めてClassic相当の処理に戻したい場合は、メタタグで制御することとなります。なお、content=no-cacheとした場合、戻った時にもキャッシュが効かず再読み込み、という挙動になります。

<meta name="turbolinks-cache-control" content="no-preview">

一部止める

Classicでは、data-no-turbolink属性のついたリンク、あるいはこの属性が付く要素の中にあるリンクについてはTurbolinksが無効となっていましたが、Turbolinks 5ではdata-turbolinks="false"という指定が必要となります。なお、Turbolinksを無効にした親要素の中で、一部のリンクだけ有効にすることもできるようになっています。

<div data-turbolinks="false">
  <a href='...'>このリンクは親要素で無効になっているのでTurbolinksが無効</a>
  <a href='...' data-turbolinks="true">こっちは有効</a>
</div>

イベント名

Turbolinksの動作ごとにdocumentでJavaScriptのイベントが発生しますが、これまた別な名前となっています。

Turbolinks 5 Classic イベントの発動タイミング
turbolinks:click (なし) Turbolinksの効いたリンクをクリックした時
turbolinks:before-visit page:before-change Turbolinksによる遷移が始まる直前(キャンセル可能)
turbolinks:visit (なし) Turbolinksによる遷移が始まった時
turbolinks:request-start page:fetch XHRのリクエストが飛ぶ直前
turbolinks:request-end page:receive XHRのリクエストが終了したタイミング
turbolinks:before-cache (なし?) 現在のページをキャッシュに保存する直前
turbolinks:before-render page:before-unload DOM描画の直前
turbolinks:render page:change/page:restore DOM変更の完了
turbolinks:load page:load ページの表示時

loadイベントのタイミングとjquery.turbolinks

名前は違えどどちらでもloadイベントは起きますが、少し違いがあります。

  • Turbolinks Classic…最初の読み込み時にはpage:load起きない
  • Turbolinks 5…最初の読み込み時にもturbolinks:load起きる

ということで、Classic時代に$(document).on('ready page:load')と書いていたようなコードは、Turbolinks 5では$(document).on('turbolinks:load')だけでよくなります1。一方で、jquery.turbolinksを使って、ページ遷移のたびにreadyが発動するようにしていた場合、jquery.turbolinksのイベント名だけを書き換えて適用しようとすると、イベントが2回発動してしまいます。以下のように書いて、readyturbolinks.loadに変換してしまいましょう。

jquery-turbolinks5.js
(function($){
  'use strict';
  $.fn.ready = function(func){
    $(document).on('turbolinks:load', function () {
      func($);
    });
  };
})(jQuery);

  1. もっとも、ready.onで登録すること自体が非推奨となっているとのことです。