ISSEN 
はじめに
こんにちは、株式会社TOKOSのツキヤです！
今回はRails7における、
・Turbo
・Bootstrap
この2つを同時に使った時に起きた問題とその対策方法を説明します！
Rails7になり、$ rails new sample-app –css=bootstrapのようなコマンドで簡単にBootstrapをインストールできるようになりましたよね😎
更に、Turbo( Drive)も特に意識していなければ自動でインストールされて有効化されているはずです。
なので、このような問題にぶつかる方も多いと思いますので、ぜひ最後まで読んでみて下さい🙏
Turbo Driveについて
まずは簡単にTurbo、特にTurbo Driveについての説明を簡単にさせていただきたきます！
こちらを理解することで、なぜこのような問題が起きてしまうのかが分かり、応用も効くと思います💪
もう知っているという人は読み飛ばして下さい🙇♂️
今回はTurboの中でもTurbo Driveにのみ焦点を当てていますので、他の技術(Turbo Frames, Turbo Streams)については割愛します🙏
Turbo Driveは一言で言うと「画面遷移を高速にしてくれる機能」です！
aタグ等のリンク先を事前に読み込んでおいて、いざリンクが押された時に<body>タグの中のみを差し替えることにより、その他の読み込み等を省略することで高速化しています✨
今回注目する部分が、「ブラウザバックをした時」です！
Turbo Driveにより、遷移前のページの直前の画面(DOM)構成は保存されています。
ブラウザバックボタンを押した時も、リンクをクリックした時と同様に<body>タグの中を保存されていた画面構成に戻すことで高速に直前の画面に戻ることができます💪
Turbo + Bootstrapの問題点
ここで、1つ問題が起きてしまいます。
それは、「モーダル画面内から画面遷移した後、ブラウザバックをするとモーダル画面から移動できない」ことです。
下記画像のような状態です！
本来ならモーダルが開いていない状態のページに戻ってほしいのですが、モーダルが開いた後の状態で、尚且つバツボタン等でモーダルを閉じることができない状態になってしまいます😱
なぜこのような問題が起きてしまうのかと言うと、先程説明した「ブラウザバックの際には保存(キャッシュ)していた画面構成をそのまま戻してしまう」からです。
Turbo + Bootstrapの問題解消方法
こちらの問題に対する対策なのですが、実は簡単です！
application.html.erbに1行追記するだけです
<!DOCTYPE html>
<html>
<head>
<title>TODOアプリ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
<meta name="turbo-cache-control" content="no-cache">
</head>
<body>
<%= yield %>
</body>11行目の部分です！
name=”turbo-cache-control” の部分で、Turboのキャッシュにたいする設定という意味になります。
そして、content=”no-cache” の部分でキャッシュをしないという設定になります！
このように記述することで、ブラウザバックをしたとしても元々の状態(モーダルが開いていない状態)のページにちゃんと戻ってくれるようになります✨
ただ、この設定によりブラウザバックの際のページ表示までの体感時間がやや遅くなる可能性があります。
なぜならキャッシュをせずに毎回元々のページを読み込むことになるからです。
しかし、Turbo Drive自体をオフにするよりは明らかに早いのでこちらの設定をすることをオススメします！
終わりに
今回の内容は「Turbo DriveをオンにしながらBootstrapのモーダル画面遷移からブラウザバックする方法」というややニッチなものだったかもしれません。
しかし、個人的には割と頻出のパターンだと思いますの覚えておいて損は無いと思います😎
また、Turboは以前Railsに組み込まれていたTurbolinksと違い、HTTPメソッドを書き換えたりする機能も組み込まれているので安易にオフにすると他の機能に影響が出てしまう可能性があります😨
なので、Rails7においてはTurboは基本オンにしながら、適切な付き合い方が大事かと思います😎
