F8:Facebook、React Fiberを発表―JavaScriptのUIフレームワークを完全リニューアル

次の記事

Workplace by Facebookが大幅にパワーアップ―、他社サービスとの連携やボットの導入も

Facebookはユーザー・インターフェイスを書くために利用されているJavaScriptライブラリ、Reactを根本的にリニューアルしたことをF8デベロッパー・カンファレンスで発表した。これまでFacebookからまったく発表がなかったが、React Fiber(これが新しいReactのプロジェクト名)はしばらく前からFacebookのインターフェイスを動かしていた。Fiberについての噂は昨年から流れていたが、今回FacebookはFiberについて公に語ることができる段階に来たと判断したようだ。

Facebookによれば、この後React16がリリースされればデベロッパーもFiberベースのインターフェイス・ライブラリを利用できるようになるという。すでにFacebook.comで作動しているということは、新しいライブラリはサードパーティーに公開できるレベルに達しているとFacebookでは判断しているはずだ。

これに関連してFacebookではデータ量の大きいアプリケーションを書くためのRelayフレームワークもリニューアルした。

React Fiber

Facebookにインタビューしたところによれば、まずReact Fiberは完全に後方互換性を保っており、現行Reactで書かれたアプリケーションを作動させることができるという。その上でReactをリリースして以来の経験を取り入れて新しいフレームワークを作ったという。Facebookによれば、React Fiberは今後のReactの発展、改良の基礎をなすという。

特に力が注がれたのが、Reactの反応性を高めることだった。私は今週、FacebookのエンジニアでReactのコア・チームの一人、Ben Alpertにインタビューした。AplertによればFacebookのチームは「Reactを開発するときいつも心がけているのはデベロッパーができるだけ素早くアプリを開発できる環境を作ることだ。アプリを開発労力を軽減すると同時にパフォーマンスと反応性を改善できるよう努力している」という。【略】

しかしなぜReactをゼロから書き直したのか?  Alpertは「現行のコード・ベースに問題があったわけではない。しかし将来の拡張を考えると全く新しいコード・ベースに切り替えるのがよいと考えた」と語った。つまり新しいReactは拡張性に優れているということなのだろう。

Alpertは Fiberが基本的に後方互換だとしたが、同時にこれまでのReactのメジャー・アップデートでもそうだったが、現行システムと互換性がない新しい機能がいくつか含まれることも強調した。ただしチームはこれがデベロッパーにとって問題をもたらすことはないだろうと考えている。

Relay Modern

今日、FacebookはFiberに加えて新しいRelayも発表した。これはデータ・ドリブンのアプリを書くためのJavaScriptフレームワークで、Fiberの場合と同様、アップデートの中心は反応時間の短縮などパフォーマンスの改善と拡張性の強化に置かれている。デベロッパーはFacebookのソーシャルグラフ、GraphQLに対してRelayとReactを組み合わせて検索を行っている。

今回発表されたRelay Modernを利用することによってパフォーマンスが改善されるだけでなく現行Relayのいくつかの制限が取り除かれるという。今日の発表で開発チームは「Relay Modernは現行Relayの良い点、つまりコロケーションされたデータやデータ定義を簡単に参照でき、デクララティブなデータのフェッチが可能だという点を維持しながら、APIの使い勝手を改善し、新機能を追加した。さらにパフォーマンスを改善し、フレームワーク自体のサイズも小さくした」と述べた。多くの改善の中で、特に重要なものはスタティック・クエリーと事前のオプティマイゼーションをサポートしたことだという。

スタティック・クエリーというのは簡単にいえば、ランタイムの条件によって結果がそのつど変化しないような検索を意味する。こうした検索は事前に準備してFacebookのサーバーに作動を任せることができる。つまりローカル・アプリで構成された複雑な検索条件をネットワークを介してFacebookに送る必要がなくなる。アプリはクエリー名の文字列を送信するだけ多くの変数を含む複雑な検索結果を素早く得ることができる。これと関連して、事前オプティマイゼーションはRelayのコンパイラがクエリーの構造を事前に知ることができるため、あらかじめ最適化を行いサーバに格納された検索を高速に実行できるようにする。つまりユーザーは検索結果をこれまでより速く得ることができる。この他React Modernにはビルトインのガーベージ・コレクションなどの機能が追加されている。

古いRelayを利用していたデベロッパーにはRelay Modernに移行するための互換性APIが提供される。

Facebookによれば、AndroidアプリのMarketplaceタブを現行Relayから新しいRelay Modernに置き換えたところ、反応時間が平均して900ms短縮されたという。それだけ聞けばたいした改善ではないように思うかもしれないが、モバイル環境では1秒1秒がものをいう。0.9秒の短縮はユーザーがアプリの反応性が良くなったことに十分気づくレベルだろう。

[原文へ]

(翻訳:滑川海彦@Facebook Google+

【以上】