ページの一部を指定して変更できるTurbo Frames
ここまで、Driveの基本的な動作を見てきました。このように、Scaffoldingによって生成されたページやフォームに特に手を入れなくても、ページ遷移のない高速なアプリケーションを開発できます。また、上記の通りTurboを設定で無効にすれば、従来どおりのページ遷移を伴うアプリケーションに簡単に切り替えられます。
しかしながら、やはりページのほとんどの部分を書き換えるのは無駄だとか、SPAらしくページの一部だけを書き換えたいということはあります。このような場合には、次のステップとしてTurbo Frames(以降、Frames)の機能を使ってページに「フレーム」という領域を設けて、それを必要に応じて更新していきます。
ここ以降は再びTurboの機能を使っていきますので、app/javascript/application.jsのTurboを無効にする設定は、削除するかコメントアウトしておいてください。
[NOTE]Turbolinks
Turboは、Rails 4から導入されたTurbolinksというライブラリの後継版です。Turbolinksではfetchの対象がリンク(link_toメソッド)のみでしたが、Turboではフォーム(form_withメソッド)まで拡張されました。これにより、アプリケーションの多くの局面でTurboの恩恵を受けられるようになっています。
置き換え対象のフレームを作成する
Framesの機能を使って、一覧ページ(/words)の[New word]リンクを、新規作成フォームで置き換えてみます。リンクをクリックすると、その部分がそのままフォームになるので、引き続き作業できるようになるというわけです。フレームの作成は、app/views/words/index.html.erbをリストのように変更します。
…略… <%# [New word]リンクをフレームで囲む %> <%= turbo_frame_tag 'new_word' do %> <%= link_to "New word", new_word_path %> <% end %>
リンクであるlink_toメソッドを、turbo_frame_tagメソッドのブロックで囲んでいます。turbo_frame_tagメソッドは、turbo-railsライブラリによるTurboのためのヘルパーメソッドで、Framesのためのタグ(turbo-frameタグ)を生成してくれます。引数はturbo-frameタグのid属性の値になります。これで、link_toメソッド(リンク)はフレームで囲まれますので、この部分だけの更新が可能になります。
[NOTE]turbo_frame_tagメソッドのレンダリング
turbo_frame_tagメソッドはturbo-frameタグを生成しますが、具体的なレンダリングのイメージは以下の通りです。turbo_frame_tagメソッドの替わりに直接タグを記述してもよいですが、モデルオブジェクトによるid属性の自動的な生成などのメリットがなくなるので、できるだけヘルパーメソッドを使うようにしましょう。
<turbo-frame id="new_word"> <a href="/words/new">New word</a> </turbo-frame>
置き換わるフレームを作成する
リンクのクリックで、リンクを新規作成フォームで置き換えるので、新規作成フォームであるapp/views/words/new.html.erbをリストのように書き換えます。
<%# フォームとリンクをフレームで囲む %> <%= turbo_frame_tag @word do %> <%= render "form", word: @word %> <br> <div> <%= link_to "Back to words", words_path %> </div> <% end %>
ここでも、フォームと[Back to words]リンクをturbo_frame_tagメソッドで囲っています。こちらも、これでフレームとなります。turbo_frame_tagメソッドの引数はモデルオブジェクトを指定していますので、これによりid属性は一意的に生成されます。
Framesの動作
この時点でアプリケーションを実行して、/wordsから[New word]リンクをクリックすると、[New word]リンクが新規作成フォームに置き換わることが確認できます(図7)。確かめる必要はないですが、もちろんページ遷移は発生していません。
![図7 リンクがフォームに置き換わった](http://cz-cdn.shoeisha.jp/static/images/article/16790/16790_07.png)
内部で何が行われているかを以下にまとめてみました(図8)。
- 一覧ページの[New word]リンクのクリックにより、/words/newへのfetchリクエストが発生する
- 新規作成ページであるnew.html.erbのレンダリング結果がレスポンスとして返る
- レスポンスにはturbo_frame_tagメソッドによりturbo-frameタグが含まれるので、この中身で呼び出し側のturbo-frameタグの中身を書き換える
![図8 フレームの置き換え](http://cz-cdn.shoeisha.jp/static/images/article/16790/16790_08.png)
このように、フレーム内部からのリクエストでは、フレームの内部をレスポンスのフレームの内容でそっくり置き換えます。このように、Framesではページの一部を極めて単純な指定だけで書き換えることができます。
[NOTE]FramesではURLは変更されない
Framesでは、あくまでもページの部分的な更新であるため、基本的にはURLは変更されません。Driveと同様にURLを変更したい場合には、data-turbo-action属性をフレームかリンクのどちらかに指定します。以下は、フレームに対してURLの変更を指定した例です。
…略… <%# フレームの更新でURLを変更する %> <%= turbo_frame_tag 'new_word', data: { turbo_action: :advance } do %> <%= link_to "New word", new_word_path %> <% end %>
なお、:advanceは新しいURLとしますが:replaceでは最新のURLを置き換えます。通常は:advanceで問題ないでしょう。
[NOTE]遅延ローディング(Lazy loading)
Driveでは、時間のかかる処理のためにプログレスバーやキャッシュの仕組みがありました。Framesでは、遅延ローディングの仕組みを使うことができます。遅延ローディングでは、読み込み中に表示する内容をturbo-frames要素のコンテンツとして配置し、src属性(turbo_frame_tagメソッドのsrcオプション)に読み込み先のURLを指定します。以下は、フォームの読み込み中にスピナーを表示しておく例です。
…略… <%# フレームの更新でURLを変更する %> <%= turbo_frame_tag 'new_word', src: new_word_path do %> <%= image_tag 'spinner.png' %> <% end %>
まとめ
今回は、アプリケーションにSPAライクな振る舞いを導入できるHotwrireについて、主にTurbo DriveとTurbo Framesの機能を紹介しました。次回は後半として、Turbo StreamsとStimulusの機能を紹介します。