Webアプリケーションのユーザーインタフェース（UI）開発用ライブラリとして人気を博しているのが、「React.js」です。米フェイスブックが開発/公開しています。
FiNCでは、FiNCアプリのUI構築にReact.jsを利用しています。今回は、React.jsの特徴を整理したうえで、FiNCがなぜそれを採用し、どう活用しているかを紹介します。
画面表示に特化したライブラリ
React.jsは、Webアプリケーション開発における「MVC（Model-View-Controller）モデル」の「View」を構築するためのライブラリです。Webブラウザーやスマートフォンアプリなどのクライアントサイドで、UIの更新を可能にします。React.jsの公式ページでは、特徴として以下の三つを挙げています。
（1）JUST THE UI
React.jsはView、つまりアプリケーションのUIを開発するためのライブラリです。表示に特化しているため、既存のプロジェクトに部分的に導入することも可能です。
（2）VIRTUAL DOM
WebアプリケーションのUI構築では、HTMLやXMLデータを「DOM（ドキュメント・オブジェクト・モデル）」と呼ぶ仕組みで扱います。UIを構成する各要素をオブジェクトとしてツリー構造で保持し、プログラムで処理します。
React.jsでは、このDOMを模した中間オブジェクトをあらかじめ生成し、更新差分のみを本物のDOMに反映する手法を採ります。これにより、パフォーマンスを向上します。
図に沿って詳しく説明しましょう。まず図1のように、DOMのツリーがあるとします。ユーザーのアクションなどによって、矢印の部分の状態に変更が入るとします。
図1●矢印のUI要素の状態が変更された
（出所：FiNC）
[画像のクリックで拡大表示]
