1. jkr_2255

    Posted

    jkr_2255
Changes in title
+Turbolinks 5とTurbolinks Classic(2.x)の比較
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,70 @@
+# 変わりすぎて面食らう
+
+ひょんな拍子にTurbolinks 5を使うことになったのですが、新機能を使わない状況であっても、ことごとくと言っていいぐらいに記法が変化していました。
+
+なお、「Turbolinks Classic」は、Turbolinks 5が出た後に、Turbolinks 2.xに付けられた名称です。
+
+## `<head>`内の記述
+Turbolinks Classicでは、JavaScriptやCSSの変化を検知するために、`data-turbolinks-track`という属性を指定することになっていましたが、Turbolinks 5では、この`data-turbolinks-track`属性に`reload`という値を指定する必要があります。
+
+```html+erb
+<!-- 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を無効にした親要素の中で、一部のリンクだけ有効にすることもできるようになっています。
+
+```html
+<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回発動してしまいます**。以下のように書いて、`ready`を`turbolinks.load`に変換してしまいましょう。
+
+```js:jquery-turbolinks5.js
+(function($){
+ 'use strict';
+ $.fn.ready = function(func){
+ $(document).on('turbolinks:load', function () {
+ func($);
+ });
+ };
+})(jQuery);
+```
+
+[^1]: もっとも、`ready`を`.on`で登録すること自体が非推奨となっているとのことです。
+