Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
特集:UIコンポーネント「Wijmo」の魅力[PR]

GrapeCity Garage 特集:UIコンポーネント「Wijmo」の魅力[PR]

JavaScript製UIライブラリ選定の裏事情と、実用サービスでの使いこなしテクニック(弥生会計 オンライン+Wijmoの場合)[PR]

2016年8月29日

数が多すぎて選定が難しいWeb用のUIライブラリ。PC向け会計ソフトの「弥生」の場合、クラウドサービス開発に当たってどう考えて選定したのか。UIライブラリ選定の参考とするため、その理由・背景と活用ノウハウを聞いた。

Insider.NET編集部 かわさき しんじ
  • このエントリーをはてなブックマークに追加

 あなたがクラウド系のサービスを使っているなら、当然、JavaScriptをはじめとするWeb標準技術を使っているだろう。Web標準技術は、オープンソースソフトウェア(OSS)との親和性が高く、多くのライブラリ/フレームワークがOSSとして開発されている。その中には多くのUIライブラリも含まれる。あまりに多種多様なので、どのUIライブラリを使えばよいかを迷っている人は少なくないだろう。

 実際、UIライブラリはどうやって選定すればよいのか。その参考としていただけるよう、本稿ではクラウドサービス開発を推進しているある企業に、自らのライブラリ選定の体験を説明していただき、その具体的な活用ノウハウにまで踏み込んで話を聞いた。

 今回お話を伺ったのは、パソコン向け会計ソフト「弥生会計」などの業務ソフトパッケージを開発している弥生株式会社(以下、弥生)だ。「会計ソフト」といえば、この名前が最初に思い浮かぶという人も多いであろう、会計ソフトの定番である。

 弥生は現在、パッケージ版のソフトウェアに加えて、「弥生会計オンライン」「やよいの白色申告オンライン(図1)」「やよいの青色申告オンライン」というクラウドサービスも提供している。

図1 やよいの白色申告オンラインの実行画面(科目の設定)

 上の画面を見れば分かる通り、弥生のクラウドサービスではExcelライクな部分など、デスクトップで動作するアプリと同じくらいにUIの作り込みが行われている。では、このUI記述にWeb標準技術と親和性が高いOSSベースのUIライブラリが使用されたかというと、実はそうではない。弥生では、あえてグレープシティWijmo(ウィジモ)という有償の製品を選択したのだ。

 なぜ無償で使えるOSS UIライブラリではなく、有償のWijmoを選択したのか。その背景には「高品質なサービスを低コストで実現する」目的があったというが、実際の導入で直面するさまざまな課題についてはどう考えたのか。

 今回は具体的なJavaScript UIコントロールを実用サービスで使いこなすためのテクニックを含め、弥生のWebサービス開発の実際を、弥生のシステム開発部の橋本武志氏、久保智也氏、澤村嘉孝氏の3名に語ってもらった(聞き手:Insider.NET編集部 かわさきしんじ/株式会社デジタルアドバンテージ 一色政彦、協力・会場提供:日本マイクロソフト)。

なぜ有償のUIライブラリを採用したのか

弥生株式会社 開発本部 システム開発部 シニアプロジェクトマネージャ 橋本武志氏
弥生株式会社 開発本部 システム開発部 シニアプロジェクトマネージャ
橋本武志氏

 まずは単刀直入にクラウドサービスになぜ有償のWijmoを採用したかを伺った。

 最初に挙がったのは「新しいクラウドサービスを始めるときに、コントロールをゼロから作るのが期間的に厳しかった」という声だ(橋本氏)。その上で「3種類ほどを選んで評価、検証を行った」とのこと(同)。

Wijmoのメリット

 澤村氏によれば、選定作業が行われたのはWijmo 3の時代で、その際は以下の要素を重要視したという。

  • 速度
  • コントロールの見た目や機能性
  • サポートの安心感
  • メンテナンス性

 「取引入力系の画面(図2)では、グリッドに大量のデータを表示する必要があります。そのためまずは、実行速度が重要でした」(澤村氏)。

図2 取引入力画面
弥生株式会社 開発本部 システム開発部 エンジニア 澤村嘉孝氏
弥生株式会社 開発本部 システム開発部 エンジニア
澤村嘉孝氏

 興味深いのは「サポートの安心感」だ。「国内販売されるソフトウェアは、多くの場合、海外企業が開発した製品の日本語対応版で、国内には販売拠点があるだけということも多いのが実情です。もちろん有償製品であればサポートは受けられるわけですが、Wijmoは日本に本社があるグレープシティさんが開発・販売しています。開発拠点は海外にあるようですが、本社は日本にあるわけで、日本ユーザーへの対応は他社製品のそれとは別格と感じます。実際、技術的な質問などについても、他社製品では考えられないようなディープな(笑)対応をしてもらいました。製品の開発リスクに責任を持つ立場からすると、やはり安心感が違いますね」(澤村氏)。

 有償製品の購入コストはどう評価したのか。「以前別プロダクトでコントロールの一部を自社開発してみたことがあるのですが、開発期間を含めてコストパフォーマンスをトータルで検討すると、実績ある有償製品を選択することに十分現実味がある、という結論になりました。またJavaScriptライブラリはソースも見えますから、良質のコードを読んでプログラマーが勉強できるという効果もありました」と澤村氏。

Wijmo導入までの課題

 その一方で、サードパーティ製コンポーネントの導入には以下のような不安もある。

  • ベンダー製のコンポーネント故のブラックボックス化
  • コンポーネント側に不具合があった場合の対応
  • バージョンアップのたびに買い換えが発生するか
  • 学習コスト

 これらのうち、ブラックボックス化については「Wijmo本体に手を入れてカスタマイズ」できるくらいなのでその心配はない(詳しくは後述)。これはJavaScriptベースのコンポーネントライブラリならではの特長といえる。

 ライブラリ側に不具合があった場合の対応も、前述したとおり日本に開発元がある製品なので不安はなかったという。「不具合対応はもちろんですが、さまざまな要望についても、しんに耳を傾けて丁寧に対応してくれる姿勢が感じられました。海外製品ではなかなかないことですね」(澤村氏)。

 Wijmoのライセンスはサブスクリプション方式を採用しているので、バージョンアップで買い換え費用が発生することはない。

 学習コストについては、数行のコードで各種コントロールを表示できるくらいにWijmoはシンプルだ。さらにはRazorのヘルパーメソッドを内製することで、弥生ではクライアントサイド開発の負担をより一層軽減することに成功している(後述)。

 このような課題を乗り越えた上で、「今後のメンテナンスや対応の速さなども踏まえて」(橋本氏)、弥生ではWijmoを採用することになったとのことだ。

開発環境

 久保氏によれば、弥生のクラウドサービス開発で使っている環境は次のようなものだ。

  • 言語: C#/JavaScript/TypeScript
  • IDE: Visual Studio 2015
  • Webサーバー/DBサーバー: Azure
  • クライアント: 主要ブラウザーをサポート
  • フレームワーク: ASP.NET MVC 5、Wijmoなど
弥生株式会社 開発本部 システム開発部 シニアテクニカルリーダー 久保智也氏
弥生株式会社 開発本部 システム開発部 シニアテクニカルリーダー
久保智也氏

 AngularJSなどのクライアントサイドでのフレームワークを使用せずに、ASP.NET MVC 5とWijmoを組み合わせてサーバーサイドでUIのレンダリングを行っているのが特徴的だ(ビューエンジンにはRazorを使用)。

 実際にどんなコントロールやライブラリが使われているかについても話を聞かせてもらった。

 例えば、弥生のクラウドサービスでは多くの部分でFlexGridコントロールが使われている(図3)。FlexGridコントロールを使うことで「セルを横方向に結合したり、複数行を1つのグループとして扱ったり、チェックボックスを中に配置するなど多彩な表現が可能になっています」(久保氏)とのことだ。以下に例を示すが、デスクトップ版のアプリと遜色のない画面が実現されている。

図3 FlexGridコントロールの利用例

 こうした画面を実現するために、弥生では多くのコントロールをカスタマイズして使用している。カレンダーもそうしたコントロールの一例だ。「例えば会計ソフトでは、4月期初~3月期末など、企業の決算時期に合わせた表現が求められます。日本の会計処理ならではのカスタマイズを随所に施しています」(久保氏)。

 圧倒的なのは、図4に示すComboBoxを拡張したドロップダウンだ。

図4 弥生でカスタマイズしたドロップダウン

 「どこがドロップダウン?」と思う方もいるかもしれないが、上の画面のほとんどを占めているのがカスタマイズされたドロップダウンだ(赤枠内)。「サードパーティ製コンポーネントに自分たちのやりたいことが全て備わっていることはありません。だからといってコントロールの機能に仕様を合わせるのでは、ユーザーの生産性が上がりません。コントロールをカスタマイズして、ユーザーへの付加価値をどう高めるかが製品開発の要なのです」と久保氏。

 さらにいえば、このドロップダウンは「パッケージ版よりもさらに高機能」(同)らしい。「パッケージ版の弥生に慣れたユーザーも多いので、クラウドサービスでも同等の使い勝手が求められます。このあたりは本当にがんばりました」と久保氏は笑う。

 電卓機能も紹介しておこう(以下の画像の赤枠内。計算結果が電卓の右隣に表示される)。「この電卓も、Wijmoのポップアップに乗って表示されているだけで、あとは全て独自開発です。会計ソフトには電卓が不可欠ですからね」(澤村氏)。

図5 電卓機能

 最後にCollectionViewクラスについても紹介しておこう。これはクライアント側でデータを管理するためのクラスであり、主にFlexGridコントロールなどと連携して使用する。

 「JavaScriptだと、全てがstring型になってしまうことが多いじゃないですか。Wijmo 5にはコレクション機能があって、CollectionViewオブジェクトにデータを保管すると、数値は数値のまま、日付は日付のまま使えます。そこからデータを取り出して、何かの関数に渡すといったときにデータ型が維持できているのは助かります。CollectionViewクラスがないと、いつの間にか数値がstring型になってしまっているのに気付かないまま、数値を引数に取る関数に文字列化された値を渡してしまうといった事態が生じるかもしれません。この点、Wijmo 5なら、TypeScriptの静的型付け機構とうまく連動して、型安全なプログラミングが可能です」(澤村氏)。

 CollectionViewクラスの良いところは他にもある。例えば、変更追跡機能がそうだ。「CollectionViewクラスには変更追跡機能があるので、グリッド上で変更されたデータだけをサーバーに渡せます。FlexGridコントロールをそのまま使うよりも、グリッドに入れるデータソースをCollectionViewにすることで得られる恩恵が大きいと思います」と澤村氏。

 次にWijmoを実製品で使用する際のノウハウ、特にコントロールをカスタマイズする際の実践的なテクニックについてご紹介しよう。

Wijmo活用のノウハウ

 前述の久保氏の言葉にもあったように、製品開発ではサードパーティ製コンポーネントのカスタマイズが必須だ。加えて、Wijmoのバージョンアップにも追従する必要がある。コンポーネントのバージョンに盲従する必要はないとはいえ、新版には便利な機能や、最新環境(最新ブラウザーなど)への対応、バグフィックスなどがなされているため、できるだけ最新版を使った方が、製品全体の品質を上げられるからだ。

 だが、これらにはトレードオフがある。弥生では以前、拡張に当たってWijmo本体に手を入れることがあったそうだ(このこと自体は、DLLのようなコンパイル済みのファイルが配布されるネイティブアプリ向けのコンポーネントとは異なる、JavaScriptライブラリならではの利点といえる)。「拡張時にWijmo本体に手を入れてしまうと、Wijmoがバージョンアップしたときに、コントロールに加えたカスタマイズを新版Wijmoに反映しなければならない。これは大変な作業で、大きな反省点となりました」(久保氏)。

インタビュー風景(1)

Wijmoコントロールを継承してカスタマイズ

 このトレードオフを解決するために弥生では、Wijmoコントロールを継承し、カスタマイズについては継承したコントロール側で対応するようにしている。今では、「継承してカスタマイズしたコントロールを使う」ことを徹底しているとのことだ。継承階層を挟み込むことにより、Wijmoがバージョンアップしたときでも、Wijmoのファイルを差し替えるだけで、拡張したコントロールにもバージョンアップの内容が反映されるようになる。

 またWijmoのコントロールは、バージョン3時代にはjQueryに依存していたが、バージョン5でECMAScript 5に完全準拠したうえでjQuery依存を排除したことにより、より継承しやすいJavaScriptコントロールに進化した。この変化も、コントロールのカスタマイズで継承を徹底する点においては有効に働いた、と澤村氏は語る。「Wijmo 3でもコントロールは全て継承して使うという理念でスタートはしました。でも、そのころはJavaScriptに強いメンバーがあまりいなくて、いやおうなくWijmo本体に手を入れてしまった。でも、Wijmo 5でTypeScriptベースになって、さらにjQueryとの依存関係もなくなり、継承階層が一段減りました。そこで、今回はこの理念をさらに徹底することにしました」。

ヘルパーメソッドの活用

 上述したように、弥生のクラウドサービスはASP.NET MVC 5を使って開発が行われている。久保氏によると「ASP.NET MVC 5のビューエンジンであるRazorからWijmoコントロールを使いやすくなるようにヘルパーメソッドを用意して、エンジニアはヘルパーメソッドからのみコントロールを使うようにしています」とのことだ。

 これにはいくつかのメリットがある。

 久保氏はまず、変更可能なプロパティや使用可能なメソッドを制限できることを挙げた。「実際の開発では、エンジニアが途中で入れ替わることもあり、全員がコントロールに精通しているとは限りません。そこで、使用できるプロパティやメソッドに制限を加えたり、必要なヘルパーメソッドだけを用意したりすることで、コントロールの使用に一定の制約をかけられます。これで、コントロールの誤使用を低減できます。チーム開発では、これは大きなメリットになると思います」。

 「仮にプログラマーがクライアントサイドに不慣れでも、Razorではこのヘルパーメソッドを呼ぶだけでよいので安心です」(澤村氏)。

 もう一つのメリットとしては、コントロールへの機能追加を行う際に、画面側への修正が必要なくなることがある。「コントロールの継承とヘルパーメソッドで、大半の仕様変更を吸収して、同時に工数の削減と品質確保を両立できました」(久保氏)。

.NET開発者とTypeScript

 Wijmoは.NETの香り漂うUIコントロール群だ。ドキュメントには「WijmoのICollectionViewインタフェースは.NETのICollectionViewとほとんど同じ」と書いてあるほど。加えてTypeScriptを使えば静的型付けでクラスベースのオブジェクト指向プログラミングをJavaScriptでも行える。そういう意味では、TypeScriptはC#やJavaを使ってきた開発者にもなじみがよさそうだ。

 この点について伺うと、澤村氏は「なじみやすいと思います。自分でコードを書くのもそうですし、Wijmoを導入した後で細かい動きを確認したくて、ソースを見るときにもTypeScriptでコードが書かれているので、プロトタイプベース継承のJavaScriptコードよりも読みやすいですね」と答えてくれた。

 そして現在、弥生ではコードベースをJavaScriptからTypeScriptへ移行しているとのこと。コードベースの移行で何か問題は発生してはいないのだろうか。

 「コードを書き換える苦労はありますが、オプションを付ければJavaScriptコードがそのままTypeScriptコードにトランスパイル(=変換)できます。そのため、移行についてはそれほど大きな苦労は今のところありません」(澤村氏)。

 そして移行の際にポイントとなるのが、「アプリ内での共通部分のコード」と「各画面に対応するコード」の切り分けだ、と澤村氏は指摘する。「共通部分の継承などを多く含んでいるところは、製品全体のアーキテクチャに習熟していないエンジニアが書き換えるのは影響範囲を見積もるのが難しくリスクが大きいと思います。やはりその辺りをよく分かっているデベロッパーが共通部分のTypeScript移行を担当するべきです。一方、共通部分ではない各画面対応のコードは、基本的に個別画面への影響にとどまるので、その画面の担当者が個別にTypeScriptのコードへ移行していくことが可能です」(澤村氏)。

 最優先でTypeScriptベースに移行すべきなのは、当然、共通部分だ。「共通部分が静的型付けを含めてしっかりとTypeScript化されていれば、画面側のTypeScript化は緩やかでも大丈夫です」(澤村氏)。個別の画面をTypeScriptベースに移行することになった段階で、画面側からTypeScript移行済みの共通部分を使おうとしたときにコードに何か問題があれば、TypeScriptコードへのトランスパイルでタイプエラーなどが起こり「どこかが間違っている」と分かるので、各画面の移行作業は比較的容易になるだろう。よってあとは「『共通側の関数の引数やプロパティの型はきっちり決まっているので、それに合わせましょう』と移行方針を共有しておけば、段階的にでも移行できると思っています」(同)。

新技術採用のポイント

 現在の弥生のクラウドサービスはASP.NET MVCベースのものだが、最近はやりのクライアントサイドフレームワークの導入は考えなかったのだろうか。

 「今、選定したら分かりませんね(笑)」(久保氏)、「僕らがWijmoを導入しようと選定した時点では、Angular――今なら、Reactとか――という選択肢はそれほど現実的ではなかったです」(澤村氏)とお二人。

インタビュー風景(2)

 「将来的なプラットフォーム選択、技術選択は常に検討していますよ。開発者は新しもの好きですしね。まあ現実には、そろってみんなが新しもの好きだといっても、各エンジニアによってJavaScriptに習熟しているかどうか、さらに習熟しているJavaScriptライブラリの種類もまちまちですし、習熟していないJavaScriptライブラリを活用する実用的なコードが書けるようになるまではどうしても時間がかかります。Angular 2も試したりはしていますが、現在のRazorによるサーバーサイド技術から、Angularのようなクライアントサイド技術に全面的にシフトするのも容易ではないでしょう。新技術採用においては、そういった課題も考慮する必要がありますね」(橋本氏)。

まとめ

 本稿では、UIライブラリの選定でグレープシティのJavaScriptコントロール集「Wijmo」が採用された経緯や、Wijmo導入のポイント、実際の開発でのWijmo活用のノウハウを中心に、弥生の開発チームにお話を伺ってきた。

 有償のサードパーティ製コンポーネントが持つ「ブラックボックス/不具合時の対応/バージョンアップ/学習コスト」といった課題は、Wijmoに関しては「JavaScriptベースでソースにも手を入れられる/日本の会社ならではのサポートの安心感/サブスクリプションモデル/少ない学習コスト」と克服されている。

 さらに弥生ではコントロールの継承とヘルパーメソッドを活用することで、サーバーサイド開発に習熟している開発チームへのクライアントサイドプログラミングの負荷をできるだけ減らして、安定してWijmoコントロールを活用できる環境を構築している。

 本稿が、Web製品・サービス開発でUIライブラリの選定に悩んでいるエンジニアの参考になれば幸いだ。

特集:UIコンポーネント「Wijmo」の魅力[PR]
1. 【現在、表示中】≫ JavaScript製UIライブラリ選定の裏事情と、実用サービスでの使いこなしテクニック(弥生会計 オンライン+Wijmoの場合)[PR]

数が多すぎて選定が難しいWeb用のUIライブラリ。PC向け会計ソフトの「弥生」の場合、クラウドサービス開発に当たってどう考えて選定したのか。UIライブラリ選定の参考とするため、その理由・背景と活用ノウハウを聞いた。

特集:UIコンポーネント「Wijmo」の魅力[PR]
2. 「5年後も使い続けたい」JavaScript UIコンポーネントを目指す「Wijmo」とは?[PR]

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

サイトからのお知らせ

Twitterでつぶやこう!