jQuery Templates, Data Link, globalization が公式 jQuery プラグインに加わりました

Article
10/05/2010

※ こちらのブログで MVP のナオキさんにご指名を受け、急いでまとめてみました（笑）。
jQuery Template、DataLinking、GlobalizationがjQuery 公式プラグインへ！
ナオキさん、いつもありがとうございます。

今年の 3 月に私のブログのこちらの記事でご紹介したとおり、マイクロソフトではオープンソースの JavaScript ライブラリである jQuery への新機能の実装や、Visual Studio 2010 で標準で jQuery を使用できるようにサポートを進めてきました。そして、元々は ASP.NET Ajax Library という JavaScript ライブラリへ実装を進めていたいくつかの機能を、jQuery プラグインとして提供することを決定し、これまで github 上で .NET jQuery Extensions として実装を進めてきました。

これが、とうとう jQuery の公式プラグイン として提供されることになりました！

今回、公式に提供されることになったプラグインは下記の 3 つです。

jQuery Templates:
https://github.com/jquery/jquery-tmpl/
jQuery DataLink:
https://github.com/jquery/jquery-datalink/
jQuery Globalization:
https://github.com/jquery/jquery-global/

○ jQuery Templates

jQuery Templates は、クライアント側で Ajax 非同期リクエストなどでサーバー側から受け取った JSON や XML データを、テンプレート化した HTML に埋め込んで簡単に HTML を生成することができるプラグインです。

サンプルコード：
<script type="text/javascript">
$(function () {
var markup = "<li><b> ${Name} </b> ( ${ReleaseYear} )</li>";

// Compile the markup as a named template
$.template( "movieTemplate", markup );

        $.ajax({
          dataType: "jsonp",
          url: moviesServiceUrl,
          jsonp: "$callback",
          success: showMovies
        });

        // Within the callback, use .tmpl() to render the data.
        function showMovies( data ) {
          // Render the template with the "movies" data and insert
          // the rendered HTML under the 'movieList' element
          $.tmpl( "movieTemplate", data )
            .appendTo( "#movieList" );
        }
    });
</script>
<ul id="movieList"></ul>

このコードでは、JSONP 対応の Web サービス (Web API) から映画タイトルのリストを jQuery を使って JSON 形式で取得し、ID: #movieList の ul 要素に li 要素をリスト数だけ追加する処理を行います。追加する行 (li 要素) はコードの 1 行目で定義されている形式になります。ここで、 ${ ... } を使ってデータの Key 名 (フィールド名) が記述されていますが、これが jQuery テンプレートの記述方法です。このフィールドに JSON データの対応したフィールド値が埋め込まれて、リストが生成されます。この処理はすべて、クライアント側 (Web ブラウザ上) で jQuery (JavaScript) でおこなわれます。もちろん jQuery Templates を使わなくても実装は可能ですが、面倒な作業になるでしょう。

API リファレンスは https://api.jquery.com/category/plugins/templates/ を参照してください。

※さらにこの jQuery Templates は、jQuery 1.5 (次のメジャーリリース) で jQuery のコアに組み込まれることになっています（プラグインは不要になります）。このあたりの情報は下記のブログをご参照ください。

Microsoft Templates included in jQuery 1.5!

○ jQuery DataLink

jQuery DataLink は、一言で言ってしまうと JavaScript 上でオブジェクト間での双方向データバインドを実現するものです。例えば input フィールドの入力値と JavaScript オブジェクトのプロパティ値をリンクして、一方が変更されるとすぐにもう一方にも反映される仕組みを使うことができます。

サンプルコード:
<form>
<div>
Name:<input type="text" name="Name" />
</div>
</form>
Name: <span id="objName"></span><br/>

        // Chain link the person object to these elements to show the results
        $("#objName").link(person, {
Name: {
name: "objName",
convertBack: function (value, source, target) {
$(target).text(value);
}
}
});
    });
</script>

このサンプルでは、person オブジェクトと form 要素がリンクされ、さらに ID: objName の span 要素ともリンクされています。

API リファレンスは https://api.jquery.com/category/plugins/data-link/ を参照してください。

※現在の Data Link プラグインは未公開の jQuery 1.4.3 （近日リリース予定）に依存しているそうです。そのため試される場合には、サンプルに付属している jquery.js ファイルを使用して試してみてください。さらに私の環境では IE9 Beta で正しく動作しない場合がありました。IE9 が Beta なためですので、現段階では IE9 以外のブラウザでお試しいただければと思います。

○ jQuery Globalization

jQuery Globalization は、数字、日時、通貨記号などの表示形式を簡単に世界各国の言語ごとに切り替える国際化対応を容易に行うことができる jQuery テンプレートです。

サンプルコード:
<script type="text/javascript">
$(function () {
var price = 1980;

jQuery.preferCulture("fr-FR");
$('#fr').text($.format(price, "c"));

        jQuery.preferCulture("ja-JP");
        $('#jp').text($.format(1980.0, "c"));
    });
</script>

なんと、350 言語の定義が用意されているとのことです。

◇ ◇ ◇

昨今、Web 開発では AJAX の普及と共に JavaScript をコーディングする機会が増えてきたように思います。そんな中で、上記の機能が jQuery を通して Web アプリケーション開発で利用できるようになったことはとても嬉しいですね。何を隠そう、私も jQuery 大好き人間なので、今回のように jQuery の機能が充実してきてとてもワクワクしています。

また、jQuery を使った Web 開発について、Tech・Ed 2010 注目のハイライトセッションとして弊社エバンジェリスト物江のセッションの動画や PPT が公開されています。こちらもご参照ください。

Tech・Ed 2010 注目のハイライトセッション

ぜひ、みなさんの Web 開発において、 jQuery を活用してみてはいかがでしょうか。

jQuery Templates, Data Link, globalization が公式 jQuery プラグインに加わりました

Additional resources