GrapeCity Garage 特集：続・UIコンポーネント「Wijmo」の魅力［PR］

「5年後も使い続けたい」JavaScript UIコンポーネントを目指す「Wijmo」とは？［PR］

2017年1月18日

jQuery、Angular 2、React……。時代とともに次々と登場する新しいJavaScriptライブラリのいずれにも対応してきた実績を持つUIコンポーネントがWijmo。そのカギは、特定のフレームワークに依存しない、徹底したWeb標準への準拠だ。

Insider.NET編集部　かわさきしんじ

　Webを構成する技術領域では、新たな技術やフレームワークが次々と生み出されている。それらの多くはオープンな文化から生まれたものだ。開かれた日進月歩の世界。それが現在のWebといってよいだろう。

　周知のとおり、こうしたWeb技術は、コンシューマー向けサービスばかりでなく、業務アプリケーションでも積極的に活用されるようになってきた。しかし業務アプリには「開かれた日進月歩の世界」を必ずしも歓迎できない側面がある。業務アプリが取り扱う顧客の業務内容は、時間が経ってもそれほど変わらないケースが多いので、業務アプリが提供するUI（ユーザーインターフェース）や手順は変えずに安心して使い続けられる必要がある。新技術を採用して新機能を搭載していく中でも、そうやって同じUIや手順が長く使われ続ける業務アプリの中では、次々と登場する新しいフレームワークに乗り換え続けるのが難しいからだ。変化から得られる利益（つまり最新技術）を取り入れながら、変化に左右されにくい顧客満足度の高いサービスを開発する。Web技術を活用しようとする業務アプリ開発の難しさは、こうしたジレンマにあるといってよいだろう。

　今回のテーマであるWijmo（ウィジモ）のような有償JavaScriptライブラリを利用する際の最大の懸念の一つも、このジレンマに直結している。品質の高いライブラリを活用し、開発生産性を高めるのはよいが、ライブラリに依存してしまって、将来の変化に対応しづらくなってしまうのではないか、ということだ。これに対しWijmoでは、jQueryなど特定ライブラリへの依存を排除してWeb標準対応を徹底するとともに、相互運用モジュールを提供することで、Wijmoで開発されたアプリケーションを、Angular 2やReactといった最新のJavaScriptライブラリとも連携できるようにしている。

　本稿では、JavaScript UIライブラリに焦点を絞り、「エンタープライズ／業務アプリ開発にとって効果的なUIライブラリはどうあるべきか」「JavaScript UIコンポーネントを選択する上でのポイント」などを中心に、グレープシティ株式会社（以下、グレープシティ）の第2ツール開発事業部でJavaScript UIコントロールライブラリ「Wijmo 5」の開発に携わっている山崎顕由氏と瀬川正和氏にお話を伺った（聞き手：＠IT／Insider.NET編集長かわさきしんじ）。

Wijmo 5とは

　まずはWijmo 5とは何かについて簡単にまとめておこう。

　Wijmo 5とは「エンタープライズアプリの開発を対象としたHTML5／JavaScript UIコントロールライブラリ」である。その特徴としては次のようなことが挙げられる。

生産性の高いコントロール
他ライブラリとの相互運用
高パフォーマンス
業務アプリ特化
マルチデバイス／タッチ対応

　Wijmo 5が提供するコントロール群や使い方については、Wijmo 5公式ページで提供されているドキュメントやCodeZine内の連載記事「ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ『Wijmo 5』の活用」などが詳しいので、ここではWijmoの特長が端的に分かる、ごく簡単な例を示そう。以下はFlexGridと呼ばれるグリッド（Excelライクな表）を表示するものだ（コード自体はWijmo 5のドキュメントとして提供されているコードをさらにシンプルに書き直したもの）。

HTML

<!DOCTYPE html>

<html>

<head>

<title>Wijmo 5サンプル</title>

onload = function() {

// サンプルデータの作成

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),

data = [];

for (var country of countries) {

data.push({

country: country,

downloads: Math.round(Math.random() * 20000),

sales: Math.random() * 10000,

expenses: Math.random() * 5000

});

}

// グリッドの作成

var grid = new wijmo.grid.FlexGrid('#theGrid', {

itemsSource: data

});

}

</script>

</head>

<body>

<p>FlexGridコントロール:</p>

</body>

</html>

FlexGridコントロールを使ってWebページにExcelライクなグリッドを表示するコード例

　このうち多くはサンプルデータを作成するコード部分であり、グリッドを画面に表示している部分は非常にシンプルなコードとなっていることが分かるだろう。FlexGridコントロールの作成には、単にWebページ上でそれを表示したい場所（ここではid属性の値が「theGrid」になっている<div>要素）と、そこに表示するデータソース（上では変数dataが参照する配列）を指定して、コンストラクターを呼び出すだけだ。

　これを実行すると次のような画面が表示される。

作成されたグリッド

左下に表示されている「Wijmo 5.20163.234 eval」というのは、使用しているのがCDN（コンテンツ・デリバリ・ネットワーク）で配布されている評価版であることを示すウォーターマークである（CDNでは評価版のみが配布されており、ウォーターマークを消すには製品版のWijmo 5を購入／インストールする必要がある）。

　たったこれだけのコードで、高機能なグリッド処理が可能になる。JavaScriptでWebアプリケーションを実際に開発したことがあるプログラマーなら、これによって削減される開発工数の大きさはすぐに理解できるはずだ。しかしWijmoのコンポーネントとしての品質や機能性について延々と語るのは本稿の目的ではない。「開かれた日進月歩の世界」にWijmoがどう対応しているのか、である。

　これを知るには、Wijmoの進化の道程とそのアーキテクチャなどに目を向ける必要がある。この観点でWijmoのポイントをまとめると次ようになる。

Web標準
jQueryからの独立
相互運用モジュール
先方互換性（将来バージョンに対する互換性の確保）
オートメーションテスト
プラガブルアーキテクチャ
ファイルサイズ
有償のコンポーネントであること

　それでは、ここから先はグレープシティの山崎氏と瀬川氏にこれらの詳細を伺っていこう。

Wijmo 5が持つ「先方互換性」というメリット――Wijmoの進化とアーキテクチャ

Wijmo 5のアーキテクチャ

　現在のWijmoのバージョンは「5」で、前バージョンは「3」だった（バージョン「4」を飛び越しているのは製品マーケティング上の理由だそうだ）。以下は、JavaScriptのUIライブラリ／フレームワークの変遷の過程と、Wijmoの2つのバージョンの関係をまとめたものだ。

JavaScriptライブラリの変遷とWijmo

Wijmo 5の製品資料より引用。なお、製品資料はメールアドレスを登録の上でここからダウンロードできる。

　ここで重要なのは前バージョンであるWijmo 3が「第1世代のjQuery」の枠に含まれていることと、Wijmo 5が他のJavaScriptライブラリとは別の枠に描かれていること。つまり、Wijmo 3はjQueryに依存したUIライブラリだったが、Wijmo 5はjQuery（やその他のフレームワーク／ライブラリ）からは独立した存在となったということだ。

瀬川　Wijmo 3はjQueryに依存しながら、第2世代のライブラリと連携するパイプも持つようになっていました（注：図の「第1世代」と「第2世代」をつなぐ「連携」の部分）。しかし、Wijmo自体がjQueryに依存していたことから、幅広く他のライブラリと連携するのは困難でした。そこでWijmo 5はjQuery（および他のライブラリ）からは完全に独立させ、Web標準――ここでは、ECMAScript 5のことですが――にのみ準拠するようにすることで、他のライブラリやフレームワークが新しくなっても連携可能にしています（注：Wijmo 5の枠と他のJavaScriptライブラリをつなぐ「連携」の部分）。

グレープシティ株式会社第2ツール開発事業部プロダクトマネージャー

瀬川正和氏

　Wijmo 5では図の「連携」と書かれている部分のことを「相互運用モジュール」と呼んでいる。相互運用モジュールは、Angularなどの他のライブラリとの連携に必要なインターフェースを集約したものだ。こうした相互運用モジュールを利用することで、Wijmo 5アプリケーションは、他のライブラリからの独立性を担保した上で、必要に応じて他のライブラリと連携できるようになっている。

先方互換性

　このことがもたらす大きなメリットが「先方互換性」だ。ここでいう先方互換性とは「すでにある製品が将来登場する他の製品との互換性を維持する」ということ。先ほどの図であれば「次世代」とある部分との互換性を維持しようということだ。これについては山崎氏が次のように述べている。

山崎　.NET系の製品も含めて、これまでは後方互換性を意識してコンポーネントを開発してきました。しかし、Webに関しては「先方互換」でなければいけないんです。そして、そのためには、標準技術をベースにした上で、拡張性保持し、新しいものが出てきたときにもそれにマッチできるようになっていなければいけない。特にエンタープライズの分野ではそれが求められます。

グレープシティ株式会社第2ツール開発事業部プロダクトグループグループマネージャー

山崎顕由氏

　冒頭でも述べた通り、Webでは日進月歩で新たな技術が登場する。そして、何か有力なライブラリやフレームワークが登場したときには、それに対応した「相互運用モジュール」（上の「拡張性を保持」に相当する）を提供することで、Wijmo 5と新たに登場したライブラリを協調して利用できるようにしようというのがWijmo 5の設計思想だ。

　Wijmo 5でjQueryへの依存を排除したことにはもう一つのメリットがある。jQueryから独立したこと、そしてTypeScriptベースで開発をしていることから、コンポーネントの再利用性が高まり、Wijmo 5が提供するコントロールを継承して、新たなUI要素を作りやすくなったことがそうだ。この詳細については以前に公開した記事「JavaScript製UIライブラリ選定の裏事情と、実用サービスでの使いこなしテクニック（弥生会計オンライン＋Wijmoの場合）」を参照されたい。

「5年後も使い続けたい」の声に応えるには

　相互運用モジュールを提供することで、Wijmo 5はAngular（1／2）、React、Vue.jsなどをサポートしている（2016年12月現在）。瀬川氏は「新しいものが出てきたときにも、差異の部分は相互運用モジュールの中で吸収できるようにすれば、ある程度長く使えるライブラリになるのではと思って開発を行っています」とも語ってくれた。これはエンタープライズ領域で求められる「安定性」ともつながる話だ。山崎氏の意見も同様だ。

山崎　エンタープライズ環境では「長く使い続けたい」というお客さまがどうしても多くなります。変化の激しいWebの世界で「5年後も使い続けたい」というのは正直厳しいところもあるのですが、それは「ダメ」だと一刀両断してしまうのではなく、そうしたニーズを踏まえて開発して、ユーザーのニーズに最大限応えられるようにしたいのです。実際に「変化が激しい環境でも5年使いたい」というお客さまがいらっしゃるわけですから。

　まだ存在しない新しいライブラリ／フレームワークが将来に登場しても、Wijmo 5を使い続けられるような仕組みにしておく。「変化への対応」と「安定性」を両立させるために、Wijmo 5はこのようなアーキテクチャとなっているのだ。このような「先方互換性」への配慮は、機能一覧表からは見えてこない、業務アプリ向けに安心して使えるUIライブラリ選定の大きなポイントだろう。

　そして、目には見えにくい重要な要素は他にもある。

目には見えにくい確かな品質――有償コンポーネントを利用する理由

　アーキテクチャに続いては、Wijmo 5のコード品質に注目しよう。

徹底した品質管理（1）――Wijmo 5のビルドプロセス

　以下の図は、Wijmo 5のビルドプロセスをまとめたものだ。

Wijmo 5のビルドプロセス

Wijmo 5の製品資料より引用。

　このようにWijmo 5のビルドプロセスにはオートメーションテスト（自動テスト）が組み込まれており、新しいビルドを作成するたびに、毎回オートメーションテストが実施される。この段階で問題があれば、直ちに開発者にフィードバックされ、修正が行われる。オートメーションテストの次にはマニュアルテストが控えている。自動化が困難なものなどは、ここでテストされ、問題があれば同じく開発者にフィードバックされ、対応される。これだけ徹底したテストに労力が割かれているのは、有償製品ならではといってよいだろう。あくまで一般論ではあるが、オープンソース系のプロジェクトでは、バージョンアップによるコード変更の影響で、思いもしないところに副作用的なバグが出ることもある。こうした副作用的なエラーがリリース版に残らないように、Wijmo 5では、ビルドプロセスで組織的かつ徹底的な品質管理が行われているのだ。

山崎　大規模ベンダーがバックアップしているオープンソースソフトウェア（OSS）では同様なビルドプロセスを実現できるかもしれませんが、ここまでやっているものはそれほど多くはないでしょう。Wijmo 5はいつでも高品質なコードをリリースできるようにしています。すぐに発見されればよいのですが、予想外の副作用は発見が難しく、問題が放置されると、後になるほど問題の影響が広がってしまう恐れがあります。これを避けるには、毎日ビルドとオートメーションテストを実施して、コードを常に健全な状態に維持することが重要です。

徹底した品質管理（2）――ファイルサイズとプラガブルアーキテクチャ

　このような品質管理はビルドプロセスだけではなく、ファイルサイズの最小化でも徹底されている。Webアプリは数多くのHTML／JavaScript／CSSファイルで構成されるため、ファイルサイズをどれだけ小さくするかはとても重要なポイントだ。コンポーネントのファイルサイズを可能な限り小さくするために、Wijmo 5では「プラガブルアーキテクチャ」が導入されている。

プラガブルアーキテクチャ

Wijmo 5の製品資料より引用。

　この図を見ると分かるように、必須のJavaScript／CSSファイルは「基本ライブラリ」と書かれている部分だけであり、合計で100KBほどだ。後は個々の画面で必要となるライブラリや相互運用モジュールを追加で読み込むことになる。

瀬川　Wijmo 5が提供しているグリッド／チャート／ゲージ／入力コンポーネントを1つの画面で全て読み込むことはまずありません。ある画面でグリッドだけが必要なのであれば、基本ライブラリとグリッドだけを読み込みます。さらにいえば、グリッドが1つのファイルで構成されているわけでもありません。これらも機能単位にファイルが分割されているので、グリッドにあるけれど今回は使わないという機能があれば、それを読み込む必要もありません。

　特筆すべきはFlexGridやFlexChartは、それらがさらに機能別にファイルに分割されていることだ。例えば、本稿冒頭のサンプルプログラムでは、次のようにWijmo 5関連ファイルを3つだけ読み込んでいた。

HTML

必要なのは基本ライブラリとFlexGridコントロールだけ

　こうすることで、基本機能だけが必要な画面では、不要なコードを読み込まずに済む。ここまで徹底したファイルサイズへのこだわりは山崎氏の次の言葉からもよく分かる。

山崎　開発チームでもファイルサイズは意識しています。何かの機能を追加したときに「これだとファイルサイズが大きすぎる」となれば、もっとサイズを小さくできるか、分割するかを考えます。

　Wijmo 5とjQuery UI／jQuery Mobileとのファイルサイズを比較したのが次の図だ。

Wijmo 5とjQuery UI／jQuery Mobileとのファイルサイズ比較

Wijmo 5の製品資料より引用。

　シンプルにFlexGridを使うだけであれば、200KB程度のファイルサイズで済む。ちなみに、jQuery UIをベースとしたOSSのUIライブラリがあったとすると、それはjQuery UIのファイルサイズに加えて、そのUIライブラリのファイルサイズが乗ってくるので、Wijmo 5よりもファイルサイズは大きくなるはずだ。これはWijmo 5がjQueryに依存しないようになったことのもう一つの大きなメリットといえるだろう。

　ここまでファイルサイズにこだわることには理由がある。それは、Wijmo 5がエンタープライズでの使用を念頭に置いていることだ。つまり、大規模なプロジェクトでは、自前のフレームワークを組んで、その中で部品を作っていく。となると、トータルのファイルサイズが大きくなることは否めない。そうした状況でサードパーティのUIライブラリ（Wijmo 5）がさらにファイルサイズを増大させるようなことは可能な限り避けたいという考えだ。

まとめ

　本稿では、Wijmo 5開発メンバーに話を聞きながら、「エンタープライズ／業務アプリ開発に効果的なUIライブラリはどうあるべきか」について見てきた。常に進化を続けるWebの世界と、安定したUI・手順を長く使い続けたいというニーズがある業務アプリの世界には、避けがたいジレンマがある。これに対するWijmoの答えが、変化を受け入れる準備をしながら、特定のライブラリを長く使い続けるために必要な「Web標準」「ライブラリの独立性」「先方互換性」であり、さらにエンタープライズレベルの要求に応える「徹底的な品質管理」なのである。

GrapeCity Garage 特集：続・UIコンポーネント「Wijmo」の魅力［PR］