動きを簡単に実装する!jQuery UIを利用する方法【初心者向け】

プログラミング初心者向けに、jQuery UIの使い方について解説しています。導入から実際に利用するまで自由にドラッグできる実装を行いながら説明しているので、jQuery初心者の方はぜひ参考にしてみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,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を使用して書かれているので順番を間違えるとエラーが出てしまうので気をつけて下さい。

 

[PR] JavaScript・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は必須と言えるんだ。

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。