今話題の「AngularJS」と「Wijmo（ウィジモ）」連携で広がる可能性

jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用 第8回

　本連載では、グレープシティが提供するJavaScriptライブラリ「Wijmo（ウィジモ）」について、サンプルとともに利用例を紹介します。今回は最近話題のJavaScriptフレームワーク「AngularJS」と、Wijmoを組み合わせて利用できる機能について説明していきます。

はじめに

　「Wijmo（ウィジモ）」は、グレープシティがHTML／JavaScript環境に向けて提供しているJavaScriptライブラリです。WijmoはjQueryやjQuery UI、jQuery Mobileをベースに、WebサイトやWebアプリケーションで活用できる高機能で多様なウィジェット（UI部品）を利用者に提供します。

　Wijmoには、jQuery以外のJavaScriptライブラリと組み合わせて使うための環境が提供されています。そのうち今回は、JavaScriptフレームワークとして注目されている「AngularJS」との連携機能を紹介します。AngularJS連携機能を利用することで、Wijmoに以下の機能が提供されます。

• 独自タグを使ってWijmoウィジェットを記述する機能
• AngularJSの双方向データバインディングをWijmoウィジェットで利用する機能

　本記事ではAngularJSについて概要を述べた後、WijmoとAngularJSを組み合わせた使用法のサンプルを説明していきます。

対象読者

• WebサイトやWebアプリケーションのレベルをワンランク上げたい方
• 短納期で高度なWebサイトの作成を求められている方
• Webサイト作成において充実したサポートを求める方
• jQuery以外のフレームワークに興味がある方

必要な環境

　AngularJSと組み合わせる場合でも、WijmoにはjQueryおよびjQuery UIの参照が必須です。現バージョンではjQuery 1.11.1／2.1.1とjQuery UI 1.11.0が指定されています。

　Wijmoと組み合わせるAngularJSのバージョンは、Wijmo基本ウィジェットでは1.0.2、SpreadJSでは1.2.22がそれぞれ指定されています。本記事のサンプルコードでは以下バージョンを使用しています。

• jQuery 1.11.1
• jQuery UI 1.11.0
• AngularJS 1.0.2

　また今回は以下の環境で動作を確認しています。

Windows 7 64bit版

• Internet Explorer 11

AngularJSの紹介

　まずAngularJSについて簡単に紹介します。AngularJSはGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、公式サイトで配布されています。ライセンスはMITライセンスです。Webブラウザで動作するHTML／JavaScriptアプリケーションにMVC（Model View Controller）パターンの考え方が取り入れられており、モデル（データ）とビュー（表示）の分離が自然に行えるようになっています。この仕組みをAngularJSではMVW（Model View Whatever）パターンとうたっています（注1）。

　AngularJSは表1のような機能を開発者に提供します。

表1　AngularJSが提供する機能

機能	内容
モデルとビューの分離	JavaScriptでモデルを、HTMLでビューをそれぞれ表現
双方向データバインディング	モデルの値をビューに反映し、ビューでの変更がモデルに反映される
ディレクティブ	タグや属性を独自に定義して使用できる

注1

　MVC（Model View Controller）パターンにはMVVM（Model View ViewModel）、MVP（Model View Presenter）などの複数の派生パターンが存在しますが、AngularJSではパターンの細かい相違に関する議論を避けるためにMVW（Model View 「Whatever＝何でも」）という用語を使用しています。