動きを簡単に実装する！jQuery UIを利用する方法【初心者向け】
プログラミング初心者向けに、jQuery UIの使い方について解説しています。導入から実際に利用するまで自由にドラッグできる実装を行いながら説明しているので、jQuery初心者の方はぜひ参考にしてみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptのライブラリであるjQueryのjQuery UIを利用する方法を解説しています。
jQuery UIという動きを簡単に実装できる便利なツールの使い方を紹介しているので、jQueryを学習している方はぜひ参考にしてみてください。いろんな動きを手軽に表現することができるはずです。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
jQuery UIとは
jQuery UIとは、jQueryの便利な機能をまとめたツールのことです。
jQueryは、もともJavaScriptを使いやすくするためのライブラリでしたが、そのjQueryをさらにパッケージ化したものなので非常に使いやすいものになっています。
例えば、日付を入力する際にDatePickerを使ったり、入力の自動補完であったり、使うユーザーにとって嬉しい機能を簡単に実装することが出来ます。
jQuery UIというのは何でしょうか？
ユーザーインターフェースに特化したjQueryのライブラリのことなんだよ。
ユーザーインターフェース(UI)というのは、デザイン的なことですか？
そうそう。操作や、部品的な素材、表示効果などに特化しているんだ。さっそくjQuery UIを実際に使用してみよう！
jQuery UIを利用する方法
jQuery UIの導入自体は二行で終了します。
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
一行目はjQueryを読み込むためのコードです。二行目がjQuery UIを読み込むためのコードです。
jQuery UIはjQueryを使用して書かれているので順番を間違えるとエラーが出てしまうので気をつけて下さい。
実際にjQuery UIを使用してドラッグしてみる。
div要素を自由にドラッグできるコードを書いてみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function() {
$("#div1").draggable();
});
</script>
</head>
<body>
<div id="div1">
divdivdivdiv
</div>
</body>
</html>
ご覧の通り、本体のコード自体は3行程度で実装することが出来ます。
表記方法もjQueryと同じで、メソッドを実行するのみで非常に簡単です。
ドロップ（Droppable）してみる
ここでは、jQuery UIを利用してDroppable機能を使ってみます。
ドロップというのは物を落とすという意味です。
見た目に色を付けたのでコード自体は長くなりましたが、画像を使わず、htmlとjQueryとcssのみでできています。
Droppableするコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI ドロップ</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.ui-draggable, .ui-droppable { background-position: top; }
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "ドロップできました" );
}
});
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>この部分を右側の枠にドラッグしてください。</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>こちらにドロップしてください。</p>
</div>
</body>
</html>
Droppableする表示結果
初期表示では2つの四角があります。
左側の四角を右側の四角にドラッグして、マウスボタンを離してドロップできます。
次の画像がドロップ後の写真です。
もともとあった、こちらのドロップしてください。という表示がドロップできましたに変わっています。
この部分の変化は、次の部分で変化させています。
$( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "ドロップできました" );
リサイズ（Resizable）してみる
ここでは、jQuery UIを利用してResizable機能を使ってみます。
リサイズというのは大きさを変更するという意味です。
見た目に色を付けたのでコード自体は長くなりましたが、画像を使わず、htmlとjQueryとcssのみでできています。
Droppableするコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI ドロップ</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable" ).resizable();
} );
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
Droppableする表示結果
初期表示わくです。
右下の角をマウスで選択して、右下方向へドラッグします。
すると、このように大きなサイズにリサイズされます。
その他の例
その他の簡単な例として、セレクトやソート機能があります。
Selectable機能
Selectable機能を使用すると、マウスでクリックした要素を選択した状態にすることができます。
これにより、選択部分の色を変更する処理が可能になります。
Sortable機能
Sortable機能を使用すると、マウスで要素をドラッグすることで、並べ替えすることが可能になります。
まとめ
今回は、jQuery UIを使用する方法を紹介しました。
今回はドラッグするコードを書いてみましたが、他にも簡単に便利な機能を実装することが出来ます。公式サイトにメソッドが載っていますので気になる方は、ぜひ確認してみてください。
divdivdivという文字が、マウスでドラッグして動かせますねー。
他にも、並べ替え可能な要素を定義したり、サイズ変更可能な要素を定義したり、定型的なUI部品、jQueryのアニメーション拡張があるんだ。
難しそうですけど、面白そうですねー。
jQueryに慣れてきたり、フロントエンドに興味がある場合はjQuery UIは必須と言えるんだ。
この記事を監修してくれた方
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。 ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。 |
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
