StimulusとBootstrapを組み合わせて使う方法

はじめに

本記事は錆びかけたRailsの知識を頑張ってアップデートするアドベントカレンダー9日目です。

猫Rails様のTurboのチュートリアルでRails7のTurbo Streamを勉強していたときに浮かんだ疑問についてまとめます。

疑問点

BootstrapでModalを使う方法

Turboチュートリアル本では、編集・投稿のモーダル化という項でStimulusコントローラーを作成、その中でBootstrapのModalを利用することになります。

modal_controller.js

import { Controller } from "@hotwired/stimulus"
// BootstrapのModalをimport
import { Modal } from "bootstrap"

export default class extends Controller {
  // `connect()`はStimulusのライフサイクルコールバックの1つ
  // コントローラーがHTML要素にアタッチされた時（=HTML要素が画面に表示された時）に実行される
  connect() {
    // モーダル生成
    this.modal = new Modal(this.element)

    // モーダルを表示する
    this.modal.show()
  }
  //省略

このときのBootstrapのModalの使い方がよくわからなかったので調べてみました。

まず、Bootstrapの公式ページには、JavaScriptを用いたモーダルの展開について以下のように書かれています。

Bootstrap

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

これは、modal_controller.jsで例として書かれていた方法とは微妙に違います。なぜ動くのかがよくわかりません。

また、this.modal.show()と書くことでモーダルを表示できる理由も分かりませんでした。

なぜBootstrapのModalを使うことができるのか

まず、import { Modal } from "bootstrap"について説明します。これはJavaScriptのファイルで他のJavaScriptのコードを呼び出すための標準的な書き方です。こちらのRailsプロジェクトにはすでにbootstrapという名前でBootstrapについての一連のJavaScriptが読み込まれています。その中から今回はModalモジュールをインポートするよう書かれています。

Bootstrapの公式ドキュメントではbootstrapモジュールからそのプロパティとしてModalモジュールを使う形になっていたのでnew bootstrap.Modalという書き方でしたが、このように直接Modalモジュールをインポートしているため、new Modal~と書くことができます。

そしてModalを利用している行の左辺はthis.modalとなっています。これは、このコントローラクラスのプロパティとしてmodalをセットしたということになります。ここについては、後ほどモーダルを消す際もModalのオブジェクトは必要なので、後で別の関数から呼び出せるようにプロパティにしているのですね。

最後にShow()について、これはBootstrapのModalモジュールに定義されたメソッドでした。公式ドキュメントに使えるメソッド一覧が書いてあります。以下の通りです。

終わりに

JavaScriptのimport文を使ってBootstrapのさまざまなモジュールを使うことができそうです。
こちらのBootstrapの公式ページにさまざまなComponentが紹介されているので、調べてみます。