JavaScript

jQuery UI

 jQuery UIとは、jQueryの便利な機能をまとめたライブラリの一種で、名前の通り、UI(User Interface : ユーザーインターフェース)に関係した機能を提供します。

 jQueryは、元々 JavaScriptを使いやすくするためのライブラリでしたが、その jQueryをさらにパッケージ化したものなので非常に使いやすいものになっています。

 例えば、日付を入力する際に DatePickerを使ったり、Widgets(高機能なUI部品)、Effect(アニメーション機能の拡張)、Interactions(マウスによる対話操作)などの機能です。使うユーザーにとって嬉しい機能を簡単に実装することができます。

jQuery UIを利用する方法

 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のコードは公式サイトからもコピーできます。

uncompressed
通常版
minified
圧縮版
slim
非推奨の APIを削除したもの
slim minified
slimの圧縮版

 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>