Bootstrap5｜JavaScriptコンポーネント「アラート」を動的に生成してみた

はじめに

Bootstrapには、メッセージを目立たせるための「アラート（Alert）」というコンポーネントが用意されています。

これまで私は静的なHTMLとしてアラートを配置することが多かったのですが、今回はJavaScriptを使ってアラートを動的に生成する方法を試してみました。

フォーム送信後の通知や処理結果の表示など、実務でも活用できそうな機能だったので、備忘録としてまとめてみます。

アラートとは何か

アラートとは、ユーザーへメッセージを通知するためのBootstrapコンポーネントです。成功メッセージやエラー通知など、視覚的に分かりやすく伝えることができます。

例えば次のような用途で利用されます。

1. 入力内容のエラー通知

入力漏れやフォーマットエラーをユーザーに知らせます。

2. データ登録完了メッセージ

フォームの送信やデータの保存が成功したことを伝えます。

3. システムからの注意喚起

メンテナンス情報や重要な注意事項を提示します。

4. 処理成功のお知らせ

削除完了や更新完了などの結果を表示します。

Bootstrapでは色分けされた複数のスタイルが用意されています。成功時は緑色、エラー時は赤色など、メッセージの意味が視覚的に伝わりやすくなります。

<div class="alert alert-success" role="alert">

 登録が完了しました。

</div>

<div class="alert alert-danger" role="alert">

 エラーが発生しました。

</div>

どんな場面で活用できるのか

アラートはさまざまな場面で利用できます。

フォーム送信完了時：「お問い合わせを受け付けました。」

入力エラー時：「メールアドレスを入力してください。」

ログイン成功時：「ログインしました。」

削除処理の完了時：「データを削除しました。」

静的なHTMLでも実装できますが、JavaScriptで動的に生成すると必要なタイミングだけ表示できるため便利です。

基本的な実装方法

Bootstrap5ではJavaScriptからアラート要素を生成し、任意の場所へ追加できます。

まずはアラートを表示するための領域とボタンを用意します。

<div id="alert-area"></div>

<button id="showAlert" class="btn btn-primary">

 表示

</button>

続いてJavaScriptを記述します。

document.getElementById("showAlert").addEventListener("click", () => {

 const wrapper = document.createElement("div");

 wrapper.innerHTML = `

  <div class="alert alert-warning alert-dismissible fade show" role="alert">

   動的に生成されたアラートです。

   <button

    type="button"

    class="btn-close"

    data-bs-dismiss="alert"

    aria-label="Close">

   </button>

  </div>

 `;

 document.getElementById("alert-area").append(wrapper);

});

ボタンを押すたびに新しいアラートが生成されます。

動作イメージ：

「表示」ボタンをクリック

アラートが表示される

「×」ボタンを押す

アラートが閉じる

非常にシンプルな仕組みですが、動的コンテンツとの相性が良いと感じました。

※ココナラのブログでは外部の CSS / JavaScript を読み込めないため、

Bootstrap のアラートは動作しません。

画像は静止表示になりますが、コード自体はそのまま利用できます。

実際に触ってみて感じたこと

今回試してみて感じたのは、「画面遷移なしでユーザーへ情報を伝えられる」という点です。

特にフォームや非同期処理（AjaxやFetch API）と組み合わせると、登録成功・更新完了・エラー発生といった結果を分かりやすく表示できます。

また、Bootstrap側で色やレイアウトが整えられているため、自分で細かなCSSを作り込まなくても見やすいメッセージエリアを実装できました。

一方で、ボタンを連打するとアラートが大量に生成されてしまうため、実際に利用する場合は表示数を制限したり、自動で消す処理を追加したりする工夫も必要だと感じました。学習目的で触ってみましたが、実務でも十分活用できそうなコンポーネントだと思います。

まとめ

今回はBootstrap5のJavaScriptコンポーネントである「アラート」を動的に生成してみました。

ポイントは次の通りです。

・アラートはユーザーへの通知表示に利用できる

・JavaScriptから動的に生成できる

・処理結果の表示に向いている

・Bootstrapの標準デザインを活用できる

・実運用では表示数や自動削除も検討するとよい

HTMLだけでも利用できますが、JavaScriptと組み合わせることで活用範囲が大きく広がります。今後はFetch APIと組み合わせて、「処理結果に応じてアラートを表示する仕組み」も試してみようと思います。