どうやらJS(JavaScript)の兼ね合いで、簡単にAstroに移行できないことがわかった。
Astroのアイランド・アーキテクチャや「JavaScriptゼロ」による高速化を目指す上で、jQueryの読み込みはそのメリットを打ち消してしまうそう。
色々調べていくと、やはりjQueryは時代遅れになってしまった模様。現在のモダンブラウザはJavaScript(バニラJS)の標準機能が充実しているので、わざわざ外部ライブラリをダウンロードしなくても、標準機能を使った方が高速化できるわけだ。
以前、カルーセルスライダーのリプレイス時に、jQuery依存の「bxSlider」か、依存のない「Slick Slider」にするかで悩んだことがあった。当時は別のライブラリが jQueryに依存していたため、「どうせ読み込んでいるなら」と、そのまま利用できるbxSliderを採用した経緯がる。
というわけで、今回はまず10年分のアップデート「脱jQuery」を行ってから本番の作業に備える。
- 今回リプレースが必要になったライブラリ
- カルーセルスライダー(bxSlider → Splide)
- 画像ポップアップ(Lightbox2 → Spotlight)
- アコーディオンパネル(自作)
CDNからのJS読込みの作法
最近は、JSが配置されているURLを直接指定しない記述が主流らしい。
例えば、Spotlight.jsを読み込むとき、これまでは具体的なファイル名まで記述していた。
<script src="https://example.cdn.../spotlight.bundle.js"></script>
しかし、最近はパッケージ名(npm等)を指定するだけで適切なファイルを自動で読み込んでくれる仕組み(CDN)になっている。
<script src="https://jsdelivr.net"></script>
スマートCDNと呼ぶらしい、すっかり浦島太郎状態になってしまった。
jQueryの記事を書いたのはもう10年近く前… 感慨深い。
jQueryの読み込みとバージョン