You are here
Home > フロントエンド > turbolinksで画面の表示をスピードアップ (2) <script>

turbolinksで画面の表示をスピードアップ (2) <script>

前回に続いて、turbolinksの話。

今回は、turbolinksをもとで、ページに含まれる<script>がどう実行されるか説明します。

前回と同様に以下の2つのファイルを用意します。

<html lang="ja">                                                                                                                                                                                                   
  <head>                                                                                                                                                                                                           
    <meta charset="utf-8">                                                                                                                                                                                         
    <title>Turbolinks</title>                                                                                                                                                                                      
    <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.0.3/turbolinks.js"></script>                                                                                                                  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                                                                                                                      
    <script>                                                                                                                                                                                                       
    $(document).on('turbolinks:load', function() {                                                                                                                                                                 
      $("#button").click(function(){                                                                                                                                                                               
        $("#box").animate({left: '250px'});                                                                                                                                                                        
      });                                                                                                                                                                                                          
    });                                                                                                                                                                                                            
    </script>                                                                                                                                                                                                      
  </head>                                                                                                                                                                                                          
  <body>                                                                                                                                                                                                           
    <h1>Turbolinks</h1>                                                                                                                                                                                            
    <ul>                                                                                                                                                                                                           
      <li><a href="page1.html">ページ 1</a></li>                                                                                                                                                                   
    </ul>                                                                                                                                                                                                          
                                                                                                                                                                                                                   
    <button id="button">箱を動かす</button>                                                                                                                                                                        
    <div id="box" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>                                                                                                                    
  </body>                                                                                                                                                                                                          
</html>                                                                                                                                                                                                            

CDNでturbolinksとjqueryを読み込んでいるところ注意してください。

html lang="ja">                                                                                                                                                                                                   
  <head>                                                                                                                                                                                                           
    <meta charset="utf-8">                                                                                                                                                                                         
    <title>ページ 1</title>                                                                                                                                                                                        
    <script>                                                                                                                                                                                                       
    $(document).ready(function() {                                                                                                                                                                                 
      $("#button2").click(function(){                                                                                                                                                                              
        $("#box").animate({left: '10px'});                                                                                                                                                                         
      });                                                                                                                                                                                                          
    });                                                                                                                                                                                                            
    </script>                                                                                                                                                                                                      
                                                                                                                                                                                                                   
  </head>                                                                                                                                                                                                          
  <body>                                                                                                                                                                                                           
    <h1>ページ 1</h1>                                                                                                                                                                                              
    <p><a href="index.html">戻る</a></p>                                                                                                                                                                           
                                                                                                                                                                                                                   
    <button id="button">箱を動かす</button> <button id="button2">箱を戻す</button>                                                                                                                                 
    <div id="box" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>                                                                                                                    
  </body>                                                                                                                                                                                                          
</html>  

最初のページで、「箱を動かす」のボタンをクリックすると、箱が右へ移動します。

「ページ1」をクリックして、ページ1に行くと今度も同じく「箱を動かす」のボタンをクリックすると、箱が右へ移動します。このjqueryのコードがページ1(page1.html)になくても。

以下にアップしたので、そこで体験できます。

https://larajapan.lotsofbytes.com/turbolinks/2/index.html

ここで大事なのは、通常なら、

$(document).ready(function() {
..
});

とするところ、

$(document).on('turbolinks:load', function() { 
..
});

とします。window.onloadやjQueryのreadyは、index.htmlがロードしたときにのみ実行されますが、ページ1のリンクのクリックでページ1をajaxで読み込むときには実行されません。ゆえに、ページ1では「箱を動かす」ボタンをクリックしても箱は移動しません。

一方、turbolinks:loadを使用すると、リンク先のページにjavascriptのコードがなくとも、index.htmlのコードを実行します。

さらに、turbolinksは、リンク先のファイル(ここではpage1.html)に、現在のファイル(ここではindex.html)に存在しない、<script>のコードがあるなら、それもロードしてくれます。それゆえに、「箱を動かす」のボタンをクリックすると、箱が右へ移動するし、「箱を戻す」をクリックすると、箱は左に移動します。

最後に、今回の例はturbolinksの機能の説明のために、このようなjavascriptのコードとなること理解してください。実際にはpage1.htmlがブックマークされていて、次回のアクセスがそこから始まるなら現在のpage1.htmlのコードでは困ります。つまり、page1.html自体が更新されても同様な動作となる必要があります。

Leave a Reply

Top