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)
[画像のクリックで拡大表示]

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら