はじめに
「Popper.jsをCDNで読み込みたいけど、どのコードを使えばいいのか分からない」
「scriptタグっていくつかあるけど、どれを選べばいいの？」
と迷っていませんか。
Popper.jsは、ツールチップやドロップダウンの位置を自動で調整してくれる便利なライブラリですが、最初の読み込みでつまずくと先に進みにくくなります。
特にCDNの場合は、「使うコード」と「貼る位置」を間違えると、見た目では分かりにくいまま動かなくなることもあります。
ただ、やること自体はとてもシンプルです。使うscriptタグと貼る場所さえ押さえれば、コピーして貼るだけで使えるようになります。
この記事では、「そのまま使えるCDNコード」と「正しく動かすための貼り付け位置」を、迷わず進められるように順番に確認していきます。
Popper.jsのCDNはこれを使えばOK
Popper.jsをCDNで使う場合は、「どのパッケージを読み込むか」と「そのまま貼れるscriptタグ」を最初に決めておく必要があります。
とくに現在は旧Popper.jsではなく「@popperjs/core」を使うのが前提になるため、CDNコードもそれに合わせて選ばないと正しく動作しません。
ここでは、すぐに動かせる最新のCDNコードと、コピーしてそのまま使えるscriptタグを具体的に確認していきます。
最新のCDNコード（@popperjs/core）
Popper.jsの最新版をCDNで読み込む場合は、@popperjs/coreを指定したscriptタグをHTMLの</body>直前に1行追加します。
バージョン指定まで含めたコードは以下のとおりで、この1行を入れるだけでPopper.jsがブラウザ上で動作する状態になります。
<script src=”https://unpkg.com/@popperjs/core@2.11.8/dist/umd/popper.min.js”></script>
そのまま使えるscriptタグ
HTMLファイルの</body>タグの直前に、次のscriptタグをそのまま1行貼り付ければ読み込めます。
この位置に配置することで、HTMLの読み込みが終わったあとにPopper.jsが実行され、レイアウト崩れを防いだ状態で動作します。
<script src=”https://unpkg.com/@popperjs/core@2.11.8/dist/umd/popper.min.js”></script>
BootstrapのJavaScriptコンポーネントを使う場合の注意点
BootstrapをCDNで読み込んでも、ドロップダウンやツールチップなどのコンポーネントはそれだけでは動作しません。
これらは位置計算を行うためにPopper.jsに依存しているため、Bootstrap本体とは別に読み込む必要があります。
読み込み順やファイルの組み合わせを間違えると動作しなくなるため、どのパターンで読み込むかを事前に判断しておくことが重要です。
ここでは、Popper.jsが依存関係として必要になる理由と、正しく動かすための前提を整理していきます。
Popper.jsは依存関係として必要
Bootstrapのドロップダウンやツールチップ、ポップオーバーを動かす場合は、Popper.jsが必ず必要になります。
これらの機能は位置計算をPopper.jsに任せているため、読み込んでいない状態ではクリックしてもメニューが表示されない、または表示位置がずれる挙動になります。
そのため、BootstrapのJavaScriptより前に、@popperjs/coreをscriptタグで読み込む必要があります。
読み込み順を逆にすると、Bootstrap側がPopper.jsを参照できずエラーになるため、HTMLでは先にPopper.js、そのあとにBootstrapのJSを配置する順番で設定します。
まとめ
Popper.jsをCDNで使うときは、@popperjs/coreのscriptタグを選び、HTMLの</body>タグ直前に貼るだけでOKです。
基本はコードを1行追加するだけなので、まずはコピペして動作確認まで進めてみるのがおすすめです。
また、Bootstrapでドロップダウンやツールチップを使う場合は、Popper.jsが必要になります。読み込みは「Popper.js → Bootstrap」の順番にすることも忘れないようにしましょう。
このあたりを押さえておけば、迷わずそのまま実装まで進められます。
