久保田です。

6月8日(土曜日)に開催されるBuild Insider OFFLINEというウェブ開発者向けのイベントで講演します。会場は日本マイクロソフト株式会社様の品川本社セミナールームです。

話す内容は、クライアントJavaScriptでのデータバインディングとインタラクティブなUIについてです。講演概要が以下です。

Room C(48) 15:40～16:30

データバインディングによるインタラクティブなUIの効率的な表現

アシアル株式会社　久保田 光則（UI/UXデザイナー兼ソフトウェアエンジニア）

近年注目を浴びるJavaScriptフレームワークの多くで採用されるデータバインディング。
そこにはよりインタラクティブなUIがウェブアプリにも求められている背景があります。
このセッションでは、DOM操作を主体とした伝統的なやり方と比較しつつ、
データバインディングがインタラクティブなUIをどのように効率よく表現するのかを説明します。
ユーザに対して豊かに反応する優れたUIを持つウェブアプリを開発したい人に必見の内容。

以前ブログでもKnockout.jsの紹介などを通じてデータバインディングについて少し紹介しました。ここ数年で登場したフレームワークではKnockout.jsの他にAngular.jsやEmber.jsなどにも、データバインディングが採用されています。この講演では、データバインディングそのものの説明をしつつそれがなぜインタラクティブなUIを効率よく表現できるのかやそれに関連する事柄や背景、歴史なども併せて話します。

このデータバインディングという仕組みを紹介すると「いっときの流行りでしょ」みたいなことを言われることもあるのですが、実際にはそうではありません。というのも、データバインディング自体はデスクトップアプリのGUIのフレームワークでもともと利用されている仕組みだからです。WindowsであればWPFやWin.jsで標準で採用されていますし、MacOSXではCocoaBindingという名前で標準で提供されています。また、RIAプラットフォームのflexやSilverlightでもそうです。

それがなんでここ数年でクライアントJavaScriptフレームワークでも採用されるようになってきたかというと、ブラウザで動くアプリケーションでデスクトップアプリ並みのUIが求められるようになってきたことと、そういったアプリケーションを開発する際にDOM操作のコードを書いてなんとかするやり方がだんだん非効率になってきているという事情があります。

また、これからHTML4からHTML5へ移行していく中でウェブアプリケーションのUIにより高度なものが求められるという傾向はこの後数年間もどんどん続くものと予想されます。というのも、HTML4が主に文書を表現するものであったのに対して、これから普及するHTML5は文書だけではなくてアプリケーションを動かすためのプラットフォームのようになっているからです。これはCanvasやIndexDBやファイルアクセスAPIやWebGLなどの諸機能を眺めてみるとわかると思います。

アシアルで提供しているMonacaでブラウザ上で動くIDEを提供しているのも、AndroidとiOS端末両方でインストールできるアプリとして動くHTML5ハイブリッドアプリが興隆しつつあるのも実はその流れを汲んでいます。

(MonacaIDEのスクリーンショット)

とまあ、データバインディングを一言で表すと「JavaScriptの変数をいじるとDOMにも勝手に反映されて便利」で済む話ですが、そのデータバインディングが採用されている背景を辿って行くと、クライアントサイドのウェブ技術に求められているものがどんどん高度になっているという変化があるわけです。

データバインディングはインタラクティブなUIを効率的に表現するための重要なパターンです。そこを基点として優れたUIがなんなのか、なぜそれを実装するのがめんどくさいのか、インタラクティブなUIってそもそも何なのか、DOM操作がなぜスケールしないのかなどなど周辺の話題や背景などもひっくるめて話す予定です。

このお話で、インタラクティブなUIの表現に対する考え方を変えることができればと思っています。Build Insider OFFLINEは無料で参加できるイベントです。参加申し込みはこちらから。参加お待ちしています！