Hotwireことはじめ 〜詳解① Turbo Driveの有効化で画面変化をなめらかにする〜
はじめに
こんにちは、万葉でバックエンドエンジニアをしている吉原です。
この記事は、2022年12月13日に開催されたRubyセミナーOnlineでの「Hotwireことはじめ」セッションを解説する記事シリーズの第２回目です。
前回の記事はHotwireことはじめです。こちらの記事ではセッションの概要やサンプルアプリのご紹介をしていますので、まだご覧になっていなければ是非こちらも併せてお読みください。
今回はRails7で構築されたサンプルアプリのTurbo Driveの有効化の設定を行っていきます。
コード解説
Turbo Drive の有効化
Turbo Drive は、アプリ内で画面が変わる動きを高速化するための仕組みです。具体的には、ページ遷移やフォーム送信の際に、ページ全体をリロードせずに、HTMLのbody要素の内容を書き換えることで高速化を実現しています。
通常、Rails7ではデフォルトでTurbo Driveが有効になっているので、最初からRails7でアプリケーションを作った場合、有効にするために特に設定を行う必要はありません。
しかし、今回使うサンプルアプリケーションでは、Turbo Drive有効・無効の設定の存在と、その設定による挙動の違いを意識してもらうために、初期状態ではわざとTurbo Driveを無効にしています。
設定を有効にするまえに、設定が無効な状態の挙動を確認しておきましょう。
ここでは、ページ遷移の挙動をみてみます。サンプルアプリを main ブランチで起動し、ブラウザで任意のリンクにアクセスしてみてください。
動画の上部のリロードボタンやタブなどに注目してください。画面遷移の度にチラつきが発生しており、ページ全体がリロードされていることが確認できます。
それではここで、Turbo Driveの有効化を行ってみましょう。
具体的には、サンプルアプリ内の「Turbo Driveを利用しない」という設定を削除します。
hotwire-tw-demo/app/javascript/application.js に以下の記述があるのでこの行を削除してください。
Turbo.session.drive = false変更を保存したら、railsサーバを再起動して、ブラウザで動作確認をしてみましょう。
リロードボタンやタブのチラつきがなくなっています。画面遷移の際にページ全体のリロードを行わず、部分的に書き換えるようになったからです。
これで「詳解① Turbo Driveの有効化で画面変化をなめらかにする」は終了です。Turbo Driveを有効化して、画面がなめらかに変化するようになったことを確認できました。
次回はTurbo Framesを見ていきます。Turbo Framesはページ内の特定の部分を必要に応じて書き換えられるようにするための技術です。是非ご期待ください！
株式会社万葉ではエンジニアの採用を行っています！
https://everyleaf.com/we-are-hiring