JavaScript

jQueryに基づいて構築されたオプションのJavaScriptプラグインを使用して、Bootstrapをさらに活用しましょう。各プラグイン、データおよびプログラムによるAPIオプションなどについて学習します。

個別またはコンパイル済み

プラグインは個別に（Bootstrapの個別の js/dist/*.jsを使用）、または bootstrap.js または圧縮された bootstrap.min.js を使用してまとめて含めることができます（両方を含めないでください）。

バンドラー（Webpack、Rollupなど）を使用する場合、UMD対応の /js/dist/*.js ファイルを使用できます。

依存関係

一部のプラグインとCSSコンポーネントは、他のプラグインに依存しています。プラグインを個別に含める場合は、ドキュメントでこれらの依存関係を確認してください。また、すべてのプラグインはjQueryに依存していることに注意してください（これは、jQueryがプラグインファイルの前に含める必要があることを意味します）。サポートされているjQueryのバージョンを確認するには、package.jsonを参照してください。

ドロップダウン、ポップオーバー、ツールチップもPopper.jsに依存しています。

データ属性

ほぼすべてのBootstrapプラグインは、データ属性（JavaScript機能を使用する推奨方法）を使用してHTMLのみで有効化および構成できます。単一の要素でデータ属性のセットを1つだけ使用してください（たとえば、同じボタンからツールチップとモーダルをトリガーすることはできません）。

ただし、状況によっては、この機能を無効にすることが望ましい場合があります。データ属性APIを無効にするには、次のようにdata-apiで名前空間が設定されたドキュメント上のすべてのイベントのバインドを解除します。

$(document).off('.data-api')

または、特定のプラグインをターゲットにするには、プラグインの名前をdata-api名前空間とともに名前空間として含めます。次のようにします。

$(document).off('.alert.data-api')

イベント

Bootstrapは、ほとんどのプラグインの独自のアクションに対してカスタムイベントを提供します。一般的に、これらは不定詞と過去分詞の形式で提供されます。不定詞（例：show）はイベントの開始時にトリガーされ、過去分詞の形式（例：shown）はアクションの完了時にトリガーされます。

すべての不定詞イベントは、preventDefault()機能を提供します。これにより、アクションの開始前に実行を停止できます。イベントハンドラーからfalseを返すと、自動的に preventDefault() も呼び出されます。

$('#myModal').on('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

プログラムによるAPI

また、すべてのBootstrapプラグインをJavaScript APIのみで使用できる必要があると考えています。すべてのパブリックAPIは、単一のチェーン可能なメソッドであり、操作されたコレクションを返します。

$('.btn.danger').button('toggle').addClass('fat')

すべてのメソッドは、オプションのオプションオブジェクト、特定のメソッドをターゲットとする文字列、または何もない（デフォルトの動作でプラグインを初期化する）を受け入れる必要があります。

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

各プラグインは、Constructor プロパティに生のコンストラクターも公開します。$.fn.popover.Constructor。特定のプラグインインスタンスを取得する場合は、要素から直接取得します。$('[rel="popover"]').data('popover')。

非同期関数とトランジション

すべてのプログラムによるAPIメソッドは非同期であり、トランジションが開始されたら終了する前に呼び出し元に戻ります。

トランジションが完了したらアクションを実行するには、対応するイベントをリッスンできます。

$('#myCollapse').on('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

さらに、トランジション中のコンポーネントに対するメソッド呼び出しは無視されます。

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

デフォルト設定

プラグインのデフォルト設定を変更するには、プラグインの Constructor.Default オブジェクトを変更します。

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

競合回避

場合によっては、Bootstrapプラグインを他のUIフレームワークで使用する必要がある場合があります。このような状況では、名前空間の競合が発生することがあります。この場合、値を元に戻したいプラグインで .noConflict を呼び出すことができます。

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

バージョン番号

BootstrapのjQueryプラグインの各バージョンには、プラグインのコンストラクターの VERSION プロパティを介してアクセスできます。たとえば、ツールチッププラグインの場合

$.fn.tooltip.Constructor.VERSION // => "4.6.2"

JavaScriptが無効の場合の特別なフォールバックはありません

JavaScriptが無効になっている場合、Bootstrapのプラグインは特に正常にフォールバックしません。この場合のユーザーエクスペリエンスを考慮する場合は、<noscript> を使用して、ユーザーに状況（およびJavaScriptを再有効化する方法）を説明するか、独自のカスタムフォールバックを追加します。

Util

BootstrapのすべてのJavaScriptファイルは util.js に依存しており、他のJavaScriptファイルと一緒に含める必要があります。コンパイル済み（または圧縮済み）の bootstrap.js を使用している場合は、これを含める必要はありません。すでに含まれています。

util.js には、ユーティリティ関数と transitionEnd イベントの基本ヘルパー、およびCSSトランジションエミュレーターが含まれています。CSSトランジションのサポートを確認したり、ハングアップしたトランジションをキャッチするために、他のプラグインで使用されます。

サニタイザー

ツールチップとポップオーバーは、HTMLを受け入れるオプションをサニタイズするために組み込みのサニタイザーを使用します。

デフォルトの whiteList 値は次のとおりです。

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

このデフォルトの whiteList に新しい値を追加する場合は、次の操作を実行できます。

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

専用のライブラリ（たとえば、DOMPurify）を使用したいので、サニタイザーをバイパスする場合は、次の操作を実行する必要があります。

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})