JUIとは

「JavaScript（ジャバスクリプト）」を使った、動作が快適で気持ちのいいUIのことです。また、JavaScriptのライブラリである「jQuery UI」という意味もあります。

Webサイトを見ていると、ふわっとコンテンツが表示されたり、コンテンツがスライドするなどのアニメーションを見かけたことがあると思います。こちらは主にJavaScriptやCSS（シーエスエス）を使い実装されています。

jQuery UIは元々、JavaScriptを使いやすくするライブラリでしたが、さらにパッケージ化することで非常に使いやすくなっています。日付の入力に「Datepicker」というウィジェットを使用してカレンダーから選択できたり、入力候補を表示したりする「Autocomplete」など、ユーザーにとって快適となる機能を簡単に実装することができます。

JavaScriptでは、例えば「ページを読み込んだら」「クリックしたら」など、○○されたら実行、という様に「とあるイベントの発生」によって動きます。
他にも以下の様なイベントの取得例があります。

• マウスを動かしている時
• マウスがボタンに乗った時
• 送信ボタンを押した時

これによりユーザーのアクションに合わせて「クリックしたら○秒かけてフェードインしながらメニューを表示させる」や、「クリック（タップ）するとスライドしながら次の画像が表示される」などのインタラクションを生むことができます。

JavaScriptにはアニメーションに関するイメージが大きくありますが、ユーザーのアクションに対して反応する処理にも使われています。

例えば入力フォームで適切な形式でメールアドレスを入力していない場合に、小さくエラーメッセージの警告を表示して気づかせる、スイッチのON、OFFをクリックで切り替える、メールのスレッドなどにスターをつける際に色を変更し素早くレスポンスを返す、などユーザーにとってわかりやすく、操作がしやすいと言った効果をもたらすことができます。

この様にユーザーのアクションによって起こることにフィードバックを返したり、ステータスの変化などを正しく直感的に伝える細かなデザインのことをマイクロインタラクションと言います。

マイクロインタラクションにとってアニメーションはとても大切な要素ですが、マイクロインタラクションは＝動き（アニメーション）という意味ではなく、最小単位のインタラクションのことを指します。

「jQuery UI」は、JavaScriptを使いやすくしたオープンソースのライブラリです。ユーザーがマウス操作により要素を動かせる「Interactions（インタラクション）」、ダイアログなどを作成する「Widgets（ウィジェット）」、アニメーションを拡張する「Effects（エフェクト）」の機能などがあります。

Interactions（インタラクション）

• Resizable
  入力フォームなど要素の大きさをマウス操作で変更できる。
• Sortable
  マウスで要素の並び替えができる。

Widgets（ウィジェット）

• Datepicker
  日付入力欄に入力する際、カレンダーを表示して日付を選んで入力が行える。
• Accordion
  クリックなどに応じコンテンツを開閉することがきる。

Effects（エフェクト）

• Bounce
  ボールが弾む様な動きを表現できる。
• Fade
  徐々に透明になり消えてく動きを表現できる。

上記の様な機能をjQuery UIを使うことで簡単に実装することが可能になります。
また、その他にも「React.js（リアクトジェイエス）」や「Vue.js（ヴュージェイエス）」「Angular.js（アンギュラージェイエス）」など、様々なJavaScriptのフレームワークやライブラリが登場しています。特定のフレームワークにとらわれず色々と使っていくことがおすすめです。