IT PORT
itport

jQuery UIのWidget Factoryの入門知識

#Article#JavaScript

はじめに

最近jQueryのオープンソースライブラリを調べていて、ふと中身が気になり、ソースを見ていました。
そのときにjQuery UIのwidgetの知識が必要で調べたのでその内容を記事にしようと思います。
この記事での目標は「 jQuery UIのwidget factoryの文法をかじって、オープンソースライブラリの動きを理解する」ことです。

環境
Windows10
Google Chrome
jQuery　
jQuery UI

Widgetとは

そもそもWidgetとは何かについて書きたいと思います。
wikipediaで調べてみると


ウィジェット（英: Widget）は、グラフィカルユーザインタフェース（GUI）のインタフェース部品（UIパーツ）の総称であり、ウィンドウやテキストボックスなどが含まれる。コントロールとも。ウィジェットは、物理的な対応物との関連で分類されることもある。例えば、マウスカーソルでクリックされる仮想ボタンと、指で押す物理的なボタンといった対応である。ウィジェットは、ウィジェット・ツールキットの形態でまとめて提供されることが多い。プログラマは、ウィジェットを組み合わせてGUIを構築する。

https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88_(GUI

「物理的な対応物との関連で分類されることもある」は何を指しているのかが理解できませんでしたが、
要はボタンやテキストボックスなどのコントロールの別の呼び方がWidgetなのかなと思います。

Widgetを作成する書き方

ではjQuery UIにある Widget Factory は何をするものかと言いますと、Widgetを自作して簡単に呼び出せるようにするものになります。
ボタンやテキストボックスを作成するというのはイメージが付きづらいですが、例えばクリックすると要素が開閉するようなアコーディオンや、時間が掛かる処理について進捗状況を表すプログレスバーを作成すると考えてもらえればいいと思います。
こういった部品は別のところでも使用することが多いと思うので、それなら予め用意しておいて必要なときに呼び出すというのがjQuery UI の Widget Factory になります。

Widget Factoryを使ってプログレスバーを自作するチュートリアルがあったので、その内容を例にしようと思います。
以下が参考にしたURLになります。
https://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/

plaintext
$.widget( "custom.progressbar_test", {
        options: {
            value: 0
        },
        _create: function() {
            var progress = this.options.value + "%";
            this.element
                .addClass( "progressbar" )
                .text( progress );
        },
        // Create a public method.
        value: function( value ) {
            // No value passed, act as a getter.
            if ( value === undefined ) {
                return this.options.value;
            }
            // Value passed, act as a setter.
            this.options.value = this._constrain( value );
            var progress = this.options.value + "%";
            this.element.text( progress );
        },
        // Create a private method.
        _constrain: function( value ) {
            if ( value > 100 ) {
                value = 100;
            }
            if ( value < 0 ) {
                value = 0;
            }
            return value;
        }
    });

まず新しいWidgetを作成するためには$.widgetメソッドを使います。
引数の１つ目はWidgetの名称を入力します。基本的には他と重複しなければ自由に入力して大丈夫です。
ただし必ず１つの名前空間を指定してあげる必要があります。
（ここではcustomが名前空間で、progressbar_testがWidgetの名称になります。）
ここで指定した名称は後述する作成したWidgetを呼び出す際に使用されます。

引数の２つ目は自作するWidgetに持たせる値や行わせる処理を記述します。

plaintext
options: {
    value: 0
},

optionsは初期値として持たせる値を指定でき、ここではvalueという変数に0の値を初期値として持たせることになります。

plaintext
_create: function() {
    var progress = this.options.value + "%";
    this.element
        .addClass( "progressbar" )
        .text( progress );
},

次の_create以降は処理を書いております。createの前に_がついていますが、_が文頭にあるものはWidgetを使用する側からは呼び出すことの出来ない処理となります。（ 公式ではプライベートメソッ ドと呼ばれています。）
先頭に_がついていないものはパブリックメソッドと呼ばれます。

作成したWidgetの呼び出し方

では先程作成したWidgetを使ってみようと思います。

plaintext
 var $body = $("<div></div>").appendTo("body");
 var bar = $body.progressbar_test({ value: 20 });
 // Get the current value.
 alert( bar.progressbar_test( "value" ) );
  // Update the value.
  bar.progressbar_test( "value", 50 );
  // Get the current value again.
  alert( bar.progressbar_test( "value" ) );

使い方は簡単で、Widgetは部品ですので、HTML要素をjQueryオブジェクトとして取得した後先程作成したprogressbar_testをメソッドのように呼びます。
そうすることで Widgetとしてインスタン化され、部品として使えるようになります。
初期値を渡したい場合は第1引数のオブジェクトとして渡せば初期値が設定されます。

終わり

Widgetの触りを記事にしました。もっと深い内容もあると思いますが、オープンソースのライブラリを少し読む際にはこのくらいの内容だけで問題ありませんでした。
後はjavascriptの文法やjQueryの文法があればオープンソースのライブラリをある程度読めるかと思います 。

現在: IT PORTbonvoyageに切替