jQueryUIとは #jqueryUI

1. jQueryUIとは

jQueryUIとは、jQueryによるユーザーインターフェース系プラグインの集まりのこと。jQueryjQueryとともに広く利用されている。

jQueryUI / 公式ページ

日付選択やドラッグ・アンド・ドロップ、オートコンプリートなど、自分で一から作成するとかなり大変なUIも、jQueryUIを使用すると簡単にサイトに導入できる。

jQueryUIでは、これらの各UIを「Widget（ウィジェット）」と呼んでいる。

2. jQueryUIの便利な点

2-1. アクセシビリティが素晴らしい

例えば、タブであれば「キーボードの左右キーでタブ選択して[tab]キーでパネル内にフォーカスする」といったキーボード操作や、スクリーンリーダー（音声読み上げブラウザ）への配慮などが備わっている。

2-2. 目的に応じて機能を選択して、ダウンロードすることができる

jQueryUIはとても大きなライブラリだが、必要な機能のみをダウンロードすることもできる。

3. [注意]jQueryファイルの読み込む順番

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>TEST</title>
    <!-- CSS読み込み -->
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/main.css">
    <!-- スクリプト読み込み ※※※読み込む順番に注意する※※※ -->
    <script src="./js/vendor/jquery-3.4.1.min.js"></script>
    <script src="./js/vendor/jquery-ui.min.js"></script>
    <script src="./js/main.js"></script>
</head>

先にjQueryのjsファイルを先に読み込んでから、main.jsを読み込む。

先にjQueryを読み込んでおかないと、main.jsのプログラムからjQueryを使用することができないから。