Bootstrap5系でのモーダル（Modal）について

## はじめに
Bootstrap5系を用いてモーダルを比較的簡単に実装できますが、記述するタグが多く、テキスト化して整理しておくことが必要だと考えました。
そこで、備忘録的に記事に残しておくことにしました。

## 実装環境
- Bootstrap 5.0.2
- Ruby 2.6.3
- Rails 6.1.6

※他の言語でも問題なく動くと思いますが、本記事ではRailsで動作確認をしております。

## モーダルとは
そもそもモーダルとは何かという説明をしますと、画面に設置されたボタンをクリックすることで、他の画面に遷移することなく、ポップアップでウィンドウが表示されるものです。設置することでUI/UXの向上につながります。

## Bootstrapでの実装方法
まず、はじめに全体の記述を示します。
以下の記述でモーダルを表示することができます。
ボタンとモーダル本体で構成されています。
```html:modal.html.erb
<!-- モーダルを表示させるためのボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal_id">
　　　　モーダルボタン
</button>

<!-- モーダル本体 -->
<div class="modal fade" id="Modal_id" tabindex="-1" aria-labelledby="modal_id_Label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">タイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        中身
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>
```

それでは、以下にてそれぞれ解説していきます。
### ボタン
```html:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal_id">
　　　　モーダルボタン
</button>
```
通常のボタンの記述と変わりません。しかし、モーダルで出現させるためには、``data-bs-toggle="modal"``と``data-bs-target="id名"``の記述が必要になります。ここで、``data-bs-target="id名"``はこの後記述するmodalのidと一致させておかなければなりません。また、Bootstrap5系より前のバージョンでは、(モーダルに限った話ではありませんが、bsを付ける必要がありますので、ご注意ください。4系とかの記事を参考にするとbsが入っていないので、動かない場合があります。)

### モダール本体
- 【大枠】
再掲になりますが、以下がモーダル本体です。
```html
<div class="modal fade" id="Modal_id" tabindex="-1" aria-labelledby="modal_id_Label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      # ヘッダー
    　　　　# ボディ
　　　　　　　　　　　　# フッター
    </div>
  </div>
</div>
```
最初のdivタグでは、idが必要になります。ここが先ほどのボタンの``data-bs-target``と一致していなければなりません。``aria-hidden``では、モーダルを表示させたときに、背面を暗くするかどうかを変えることができます。また、通常、何も指定しなければモーダルの外側をクリックすることでモーダルを閉じることができるのですが、``data-bs-backdrop="static"``を追記することで、閉じるボタンを押さないとモーダルが閉じないようにできます。

2つ目のdivタグはモーダルの大きさや表示位置などを設定するものです。``modal-lg``でモーダルを大きく表示したり、``modal-fullscreen``でモーダルをフルスクリーンにしたり、``modal-dialog-centered``でモーダルを画面中央に表示させたりすることができます。他にも様々なオプションが用意されているので、こちらの[公式ドキュメント](https://getbootstrap.jp/docs/5.0/components/modal/)をご参照ください。

3つ目は実際にモーダルの中身を記述する箱のようなものです。HTMLの記述と同様、ヘッダー、ボディ、フッターで構成されています。
- 【ヘッダー】
```html
<div class="modal-header">
  <h5 class="modal-title" id="exampleModalLabel">タイトル</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
```
``modal-title``でタイトルを表し、右側にバツ印の閉じるボタンを用意します。（あくまで一般論なので、カスタマイズすることも可能です。）

- 【ボディ】
```html
<div class="modal-body">
  中身
</div>
```
こちらは特筆すべきことはないですね。各々が表示したい内容を記述してください。もちろん入力フォーム等にすることも可能です。また、グリッドシステムを活用すつこともできます。
- 【フッター】
```html
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
```
ヘッダーでも閉じるボタンを用意しておりますが、フッターにも閉じるボタンを用意してあげると、ユーザービリティの向上につながるかと思います。他にも、ボディで入力フォームを配置した場合には、こちらにsubmitボタンを配置するとレイアウトが綺麗になります。

## 最後に
Bootstrapを使用したモーダル実装の解説は以上になります。
ユーザビリティを意識しながら積極的に活用していきたいですね。
自分の備忘のためでもありますが、どなたかのお役に立てれば幸いです。

## 参考記事
[Bootstrap5 公式ドキュメント](https://getbootstrap.jp/docs/5.0/components/modal/)