## 問題 HotwireのTurbo Driveでは高速化を図るために、ページ遷移時に全体をリロードせずにタグ内のコンテンツを置き換える動作が基本となっています。そのためか、Turbo Driveを有効にしていると、JavaScriptの動作が必要なBootstrapのコンポーネントが適切に動作しない場合があります。例えば、タブのコンポーネントにおいて、ページ遷移の直後はカーソルキーでのタブの切り替えが動作しません。 ## 対策 HotwireのStimulusを利用して、必要なBootstrapオブジェクトをページ遷移時に作成します。 ### 対策の具体例タブ・コンポーネントの場合、まず以下のようにタブの各要素を対象にして`getOrCreateInstance()`をconnect内で呼び出すStimulusコントローラ`app/javascript/controllers/foo_controller.js`を作成します。 ```javascript import { Controller } from "@hotwired/stimulus" export default class extends Controller { connect() { const triggerTabList = this.element.querySelectorAll(".nav-link"); triggerTabList.forEach(triggerEl => { bootstrap.Tab.getOrCreateInstance(triggerEl); }); } } ``` 次に以下のように、このStimulusコントローラ`foo`を指定したhtmlタグでタブコンポーネントを囲みます。 ```html

...

``` 以上で、Turbo Driveによるページ遷移時に、このタブ・コンポーネントを含むHTMLがロードされると`connect()`が呼び出され、タブ用のBootstrapオブジェクトが存在していなかった場合には作成されるようになり、その結果タブ・コンポーネントが正しく動作するようになります。