jQuery UIとは、jQueryの便利な機能をまとめたライブラリの一種で、名前の通り、UI(User Interface : ユーザーインターフェース)に関係した機能を提供します。
jQueryは、元々 JavaScriptを使いやすくするためのライブラリでしたが、その jQueryをさらにパッケージ化したものなので非常に使いやすいものになっています。
例えば、日付を入力する際に DatePickerを使ったり、Widgets(高機能なUI部品)、Effect(アニメーション機能の拡張)、Interactions(マウスによる対話操作)などの機能です。使うユーザーにとって嬉しい機能を簡単に実装することができます。
jQuery UIの導入自体は2行で終了します。
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
1行目は jQueryを読み込むためのコードです。2行目が jQuery UIを読み込むためのコードです。
jQuery UIは jQueryを使用して書かれているので順番を間違えるとエラーが出てしまうので気をつけてください。
CDNのコードは公式サイトからもコピーできます。
CDNは基本的にはコードを読み込むだけなので、軽い minifiedを選んでおくのが良さそうです。
また、3.X、2.X、1.Xとバージョンがありますが、基本的に最新の3系統を選択しておきます。
jQuery UIも 1.11.X、1.12.Xとバージョンがありますが最新の 1.12.X系統を選択しておきます。
minified
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
これを、最低限必要なHTML に入れてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>最低限必要なHTML</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
</body>
</html>