Turbolinks on ララジャパン

Turbolinks on ララジャパン https://www.larajapan.com/tags/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>