BootstrapとTurbo Driveを組み合わせたときの問題と対処法

28 views Post

2024/11/22 11:29

最終更新

2024/11/22 11:35

問題

HotwireのTurbo Driveでは高速化を図るために、ページ遷移時に全体をリロードせずに<body>タグ内のコンテンツを置き換える動作が基本となっています。そのためか、Turbo Driveを有効にしていると、JavaScriptの動作が必要なBootstrapのコンポーネントが適切に動作しない場合があります。

例えば、タブのコンポーネントにおいて、ページ遷移の直後はカーソルキーでのタブの切り替えが動作しません。

対策

HotwireのStimulusを利用して、必要なBootstrapオブジェクトをページ遷移時に作成します。

対策の具体例

タブ・コンポーネントの場合、まず以下のようにタブの各要素を対象にしてgetOrCreateInstance()をconnect内で呼び出すStimulusコントローラapp/javascript/controllers/foo_controller.jsを作成します。

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タグでタブコンポーネントを囲みます。

<div data-controller="foo">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  </div>
</div>

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