Turbolinks on ララジャパン

Turbolinks on ララジャパン https://www.larajapan.com/categories/turbolinks/ Recent content in Turbolinks on ララジャパン Hugo -- gohugo.io ja Sun, 19 Nov 2017 02:24:02 +0900 turbolinksで画面の表示をスピードアップ (2) <script> https://www.larajapan.com/2017/11/19/turbolinks%E3%81%A7%E7%94%BB%E9%9D%A2%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%82%92%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89%E3%82%A2%E3%83%83%E3%83%97-2-script/ Sun, 19 Nov 2017 02:24:02 +0900 https://www.larajapan.com/2017/11/19/turbolinks%E3%81%A7%E7%94%BB%E9%9D%A2%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%82%92%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89%E3%82%A2%E3%83%83%E3%83%97-2-script/ <p>前回に続いて、turbolinksの話。</p> <p>今回は、turbolinksをもとで、ページに含まれる<code><script></code>がどう実行されるか説明します。</p> <p>前回と同様に以下の２つのファイルを用意します。</p> <div class="code-filename">index.html</div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">html</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">"ja"</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">head</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">"utf-8"</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">title</span>>Turbolinks</<span style="color:#f92672">title</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.0.3/turbolinks.js"</span>></<span style="color:#f92672">script</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"</span>></<span style="color:#f92672">script</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span>> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(document).<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">'turbolinks:load'</span>, <span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">"#button"</span>).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">"#box"</span>).<span style="color:#a6e22e">animate</span>({<span style="color:#a6e22e">left</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'250px'</span>}); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> </<span style="color:#f92672">script</span>> </span></span><span style="display:flex;"><span> </<span style="color:#f92672">head</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">body</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">h1</span>>Turbolinks</<span style="color:#f92672">h1</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">ul</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">li</span>><<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"page1.html"</span>>ページ 1</<span style="color:#f92672">a</span>></<span style="color:#f92672">li</span>> </span></span><span style="display:flex;"><span> </<span style="color:#f92672">ul</span>> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">button</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"button"</span>>箱を動かす</<span style="color:#f92672">button</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"box"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"background:#98bf21;height:100px;width:100px;position:absolute;"</span>></<span style="color:#f92672">div</span>> </span></span><span style="display:flex;"><span> </<span style="color:#f92672">body</span>> </span></span><span style="display:flex;"><span></<span style="color:#f92672">html</span>> </span></span></code></pre></div><p>CDNでturbolinksとjqueryを読み込んでいるところ注意してください。</p> <div class="code-filename">page1.html</div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>html lang="ja"> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">head</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">"utf-8"</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">title</span>>ページ 1</<span style="color:#f92672">title</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span>> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(document).<span style="color:#a6e22e">ready</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">"#button2"</span>).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">"#box"</span>).<span style="color:#a6e22e">animate</span>({<span style="color:#a6e22e">left</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'10px'</span>}); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> </<span style="color:#f92672">script</span>> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> </<span style="color:#f92672">head</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">body</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">h1</span>>ページ 1</<span style="color:#f92672">h1</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">p</span>><<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"index.html"</span>>戻る</<span style="color:#f92672">a</span>></<span style="color:#f92672">p</span>> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">button</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"button"</span>>箱を動かす</<span style="color:#f92672">button</span>> <<span style="color:#f92672">button</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"button2"</span>>箱を戻す</<span style="color:#f92672">button</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"box"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"background:#98bf21;height:100px;width:100px;position:absolute;"</span>></<span style="color:#f92672">div</span>> </span></span><span style="display:flex;"><span> </<span style="color:#f92672">body</span>> </span></span><span style="display:flex;"><span></<span style="color:#f92672">html</span>> </span></span></code></pre></div><p>最初のページで、「箱を動かす」のボタンをクリックすると、箱が右へ移動します。</p> <p>「ページ１」をクリックして、ページ１に行くと今度も同じく「箱を動かす」のボタンをクリックすると、箱が右へ移動します。このjqueryのコードがページ１(page1.html)になくても。</p> <p>以下にアップしたので、そこで体験できます。</p> <p><a href="https://larajapan.lotsofbytes.com/turbolinks/2/index.html" rel="noopener noreferrer" target="_blank"><a class="link" href="https://larajapan.lotsofbytes.com/turbolinks/2/index.html" target="_blank" rel="noopener" >https://larajapan.lotsofbytes.com/turbolinks/2/index.html</a></a></p> <p>ここで大事なのは、通常なら、</p> <div class="code-filename">index.html</div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>$(document).ready(function() { </span></span><span style="display:flex;"><span>.. </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div><p>とするところ、</p> <div class="code-filename">index.html</div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>$(document).on('turbolinks:load', function() { </span></span><span style="display:flex;"><span>.. </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div><p>とします。<code>window.onload</code>やjQueryの<code>ready</code>は、index.htmlがロードしたときにのみ実行されますが、ページ１のリンクのクリックでページ１をajaxで読み込むときには実行されません。ゆえに、ページ１では「箱を動かす」ボタンをクリックしても箱は移動しません。</p> <p>一方、<code>turbolinks:load</code>を使用すると、リンク先のページにjavascriptのコードがなくとも、index.htmlのコードを実行します。</p> <p>さらに、turbolinksは、リンク先のファイル（ここではpage1.html）に、現在のファイル（ここではindex.html）に存在しない、<code><script></code>のコードがあるなら、それもロードしてくれます。それゆえに、「箱を動かす」のボタンをクリックすると、箱が右へ移動するし、「箱を戻す」をクリックすると、箱は左に移動します。</p> <p>最後に、今回の例はturbolinksの機能の説明のために、このようなjavascriptのコードとなること理解してください。実際にはpage1.htmlがブックマークされていて、次回のアクセスがそこから始まるなら現在のpage1.htmlのコードでは困ります。つまり、page1.html自体が更新されても同様な動作となる必要があります。</p> turbolinksで画面の表示をスピードアップ (1) https://www.larajapan.com/2017/11/17/turbolinks%E3%81%A7%E7%94%BB%E9%9D%A2%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%82%92%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89%E3%82%A2%E3%83%83%E3%83%97-1/ Fri, 17 Nov 2017 14:47:54 +0900 https://www.larajapan.com/2017/11/17/turbolinks%E3%81%A7%E7%94%BB%E9%9D%A2%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%82%92%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89%E3%82%A2%E3%83%83%E3%83%97-1/ <p>Laravelのフレームワークのおかげで、自分で作成した古いフレームワークもどきや、CodeIgniterの「もうサポートしません」（注１）フレームワークを脱出できて、以前よりしっかりした開発の領域に入ってきたと感じているこの頃。そして、ファサード、ネームスペース、クロージャ、トレイトなどを活用して、とてもモダン。しかし、最近人気が出てきたJavascriptのフレームワーク、Angular, React, Vuejsを使用したシングルページアプリ（SPA）がとても気になります。</p> <p>Laravelは基本的にサーバーサイドで、Angularなどはクライアントサイドなので、共存は可能と言えばそうなのだけれど、せっかく時間かけてマスターしたLaravelのプログラムを書き直すとか、今度はどのJavascriptフレームワークをマスターすればよいのとか、ajaxばかりでプログラム複雑になるのでは、とか、過去には、CodeIgniterで苦い目にあったし、最近やっと大きいプロジェクトを3年かけてLaravelに書き直したばかりなので、ちょっとポジティブにはなれません。</p> <p>そんな中で、知り合ったのが題名の<a href="https://github.com/turbolinks/turbolinks" rel="noopener noreferrer" target="_blank">turbolinks</a>。このテクノロジーの謳い文句は、</p> <blockquote>Javascriptのフレームワークを使用して複雑にすることなしに、シングルページアプリ（SPA）のパフォーマンスが得られる！</blockquote> <p>なんか「何もしなくても痩せる！」というダイエットサプリメントのような感じですが、今の私にピッタリ。とりあえず、紹介しましょう。</p> <p>まず、メカニズムですが、そう難しくはありません。ページ内に同じサイト内のリンク、つまり<code><a href= ..></code>があると、turbolinksはajaxでそのページを取ってきてその中の<code><body></code>のデータを現在のと取り換えます。<code><head></code>は同じなので、結果的には、</p> <img src="ezgif.com-resize.gif" alt="" width="400" height="175" class="alignnone size-full wp-image-2441" /> <p>のように、タブのところに表示される「ページロード中」のぐるぐるがなくなります。さらに、<code><title></code>やURLも正しく変わります。</p> <p>インストールはいたって簡単。</p> <p>以下の２つのファイルを用意してください。最初のファイルだけに、<code>turbolinks.js</code>が入っていることに注意してください。</p> <div class="code-filename">index.html</div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">html</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">"ja"</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">head</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">"utf-8"</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">title</span>>Turbolinks</<span style="color:#f92672">title</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.0.3/turbolinks.js"</span>></<span style="color:#f92672">script</span>> </span></span><span style="display:flex;"><span> </<span style="color:#f92672">head</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">body</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">h1</span>>Turbolinks</<span style="color:#f92672">h1</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">ul</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">li</span>><<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"page1.html"</span>>ページ 1</<span style="color:#f92672">a</span>></<span style="color:#f92672">li</span>> </span></span><span style="display:flex;"><span> </<span style="color:#f92672">ul</span>> </span></span><span style="display:flex;"><span> </<span style="color:#f92672">body</span>> </span></span><span style="display:flex;"><span></<span style="color:#f92672">html</span>> </span></span></code></pre></div><div class="code-filename">page1.html</div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">html</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">"ja"</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">head</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">"utf-8"</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">title</span>>ページ 1</<span style="color:#f92672">title</span>> </span></span><span style="display:flex;"><span> </<span style="color:#f92672">head</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">body</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">h1</span>>ページ 1</<span style="color:#f92672">h1</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">p</span>><<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"index.html"</span>>戻る</<span style="color:#f92672">a</span>></<span style="color:#f92672">p</span>> </span></span><span style="display:flex;"><span> </<span style="color:#f92672">body</span>> </span></span><span style="display:flex;"><span></<span style="color:#f92672">html</span>> </span></span></code></pre></div><p>これらのファイルをサーバーにアップして、「ページ1」や「戻る」リンクをクリックしてください。タブの部分において、もうロード中のぐるぐるは見えませんね。「すっ」とページが変わる感じです。また、URLやタイトルも正しく更新されています。</p> <p>しかし、ページ１においてブラウザの更新ボタンを押して画面を更新した後に、「戻る」のリンクをクリックするときは、ロード中のぐるぐるが見えます。これはpage1.htmlには、turbolinksがないからです。</p> <p>以下のデモでも体験できます。</p> <p><a href="https://larajapan.lotsofbytes.com/turbolinks/index.html" rel="noopener noreferrer" target="_blank"><a class="link" href="https://larajapan.lotsofbytes.com/turbolinks/index.html" target="_blank" rel="noopener" >https://larajapan.lotsofbytes.com/turbolinks/index.html</a></a></p> <p>ブラウザのインスペクトツールでも、ajaxが使用されていることがわかります。</p> <img src="inspec.png" alt="" width="759" height="216" class="alignnone size-full wp-image-2457" /> index.htmlのturbolinksをコールしている<code>script</code>の行を削除して違いも見てください。 <p>CDNではなく、turbolinksのファイルが欲しいなら、</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>$ wget https://github.com/turbolinks/turbolinks/archive/master.zip </span></span></code></pre></div><p>で取得可能です。unzipしてから、<code>dist/turbolinks.js</code>のファイルが取り出せます。</p> <p>知っておくこととして、</p> <p>ページの特定のリンクにおいてturbolinksを無効にしたいなら、<code>data-turbolinks=“false”</code>を入れてください。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>.. </span></span><span style="display:flex;"><span> <<span style="color:#f92672">body</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">h1</span>>Turbolinks</<span style="color:#f92672">h1</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">ul</span>> </span></span><span style="display:flex;"><span> <<span style="color:#f92672">li</span>><<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"page1.html"</span> <span style="color:#a6e22e">data-turbolinks</span><span style="color:#f92672">=</span><span style="color:#e6db74">"false"</span>>ページ 1</<span style="color:#f92672">li</span>> </span></span><span style="display:flex;"><span> </<span style="color:#f92672">ul</span>> </span></span><span style="display:flex;"><span> </<span style="color:#f92672">body</span>> </span></span><span style="display:flex;"><span>.. </span></span></code></pre></div><p>クリック先のページを読み直したいときとかに必要です。私の経験では、ページを変更してセッションに値を入れるときには、これが必要でした。期待した動作にならないとか問題があるときに試してみること必要です。それから、<code>href</code>のリンクのクリックは<code>GET</code>のアクションとなりますが、<code>POST</code>のアクションには、turbolinksは関与しないので、フォームの投稿はスピードアップはしません。通常の画面の更新となります。</p> <p>実際のプロジェクトで使用となると、他にも知る必要なことがいくつか（たくさんではない）あります。例えば、Google Analyticsは正しく反映されるのか、とか、Wordpressでも使用できるかとか。知識を整理して、将来により情報を共有します。</p> <h2>注1</h2> <p>CodeIgniterは私が初めて使用したPHP言語のフレームワークです。どこかのサイトで紹介されていて簡単そうなので使い始めました。日本語のデータ処理に問題があったので使える部分はほとんどコントローラの部分だけでしたが、いくつかのお客さんのプロジェクトの開発に使いました。当時は一番人気のフレームワークでしたが、その絶頂期の2013年にCodeIgniterを開発した会社がリソースがないことを理由に開発を辞める宣言をしました。そこで開発が止まり1年後にはカナダの専門学校がメンテナーとなり現在はそこでオープンソースとして管理されています。</p> <p>ということで、CodeIgniterはまったく消え去ったわけではありませんが、Laravelを使い始めて振り返ると、CodeIgniter自体のフレームワークはその時点ですでに古く、現在のPHP言語のネームスペースに基づくcomposerのパッケージを基本として作成されたものでもなく、より複雑になるウェブアプリの開発にはそのままでは不可能です。</p>