CSSフレームワークといえば、Bootstrapといえるほどのネームバリューを誇ります。使用を検討する場合は筆頭候補といえるでしょう。次の画像は「npm trends 」でトレンド調査した結果です。

圧倒的といえるほどのダウンロード数です。新進気鋭の有望なCSSフレームワークがリリースされても、Bootstrapが依然としてトップに立っていることがわかります。

なぜこれほどまでに人気であり続けられるのでしょうか？それには次のようなことが挙げられます。

• 効率がいい開発を図れる
• 洗練されたCSS設計（アーキテクチャ）の採用
• HTMLモックをすばやく作成できる
• ルールに沿った使い方で開発速度アップを見込める
• HTMLにクラス付与するのみの簡単実装
• 充実したユーザーインターフェースが魅力
• トレンドをおさえたアップデートが実施される
• 統一感のある構築ができる

しかし一方で、特定のインターフェースを実装するにしてもHTMLとjQuery(JavaScript)の記述が必要です。Bootstrap経験があるエンジニアやデザイナーのなかには、

「ダイアログだけ使いたい。」
「ダイアログを手軽に実装したい。」
「HTMLとJavaScriptの記述が面倒くさい。」

という不満を覚えた人も少なくないのではないでしょうか？そこで本日の「bootbox.js」をお伝えしたいと考えました。

「bootbox.js」は、bootstrapダイアログボックス実装に特化したライブラリです。特筆すべきは実装がものすごく簡単です。JavaScript数行の記述でalertやconfirm、custom dialog、promptを作成できます。

基本的な機能

• アラートダイアログ
• 確認ダイアログ
• プロンプトダイアログ
• カスタムダイアログ

導入

導入に際して、次のファイルを読み込んでください。

必要なファイル

• Bootstrap [CSSファイル]
• jQuery [JavaScriptファイル]
• Bootstrap [JavaScriptファイル]
• Bootbox [JavaScriptファイル]

読み込み例

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.js" integrity="sha256-tcqPYPyxU+Fsv5sVdvnxLYJ7Jq9wWpi4twZbtZ0ubY8=" crossorigin="anonymous"></script>

読み込み例では、オンライン上のCDNから取得しています。適宜ダウンロードやnpmインストールを選択してください。

使い方

アラートダイアログボックス

注意を伝えるダイアログです。

基本的な使い方

bootbox.alert("Hello world!");

簡易なアラートダイアログならば、一行で実装できます。

アラートダイアログの表示例です。alertメソッド引数の文字列がダイアログのラベルに表示されます。「Hello world!」となっていることがわかります。

コールバック設定

bootbox.alert("Hello World!", function () {
    console.log("Alert dismissed");
});

アラートダイアログが閉じたタイミングでコールバックが走ります。alertメソッドの第2引数に無名関数を設置することで、任意の処理を行うことができます。

確認ダイアログボックス

OK/Cancelボタンを持つダイアログです。

基本的な使い方

bootbox.confirm("Are you sure?", function (result) {
    if (result) {
        console.log("User confirmed dialog");
    } else {
        console.log("User declined dialog");
    }
});

確認ダイアログは、コールバックの設定が必須です。confirmメソッドの第2引数に無名関数を設置することで、任意の処理を行うことができます。OK/Cancelボタンのクリックの是非をコールバック値で判定します。

確認ダイアログの表示例です。confirmメソッド引数の文字列がダイアログのラベルに表示されます。確認ダイアログならではのOKとCancelボタンが表示されていることがわかります。

プロンプトダイアログボックス

ユーザー入力を受け付けるダイアログです。

基本的な使い方

bootbox.prompt("What is your name?", function (result) {
    console.log(result);
})

プロンプトダイアログは、コールバックの設定が必須です。コールバック関数では、ユーザー入力をコールバック値で取得することができます。ダイアログをキャンセル、またはCancelボタンをクリックした場合はnullになります。

ユーザーの入力を受け付けるインプットフィールドが設けられていることがわかります。

カスタムダイアログボックス

オプション設定でカスタム可能なダイアログです。

基本的な使い方

bootbox.dialog({
    message: "Loading...",
    closeButton: false
});

カスタムダイアログは、第1引数で、オブジェクトを受け付けます。オブジェクトにはオプションプロパティを定義して、ダイアログをカスタマイズしてください。

カスタムダイアログの表示例です。メッセージに「Loading…」。クローズボタン非表示であることがわかります。

まとめ

これにて「bootbox.js」の紹介は終わりです。簡単な記述で実装できることが伝わっていれば幸いです。アラートダイアログや確認ダイアログ、プロンプトダイアログを組み込む際に検討してみてはいかがでしょうか？