React Conf 2018でReact HooksとReact 16.7アルファ版が発表

先日のReact Conf 2018では、React 16.7のアルファ版リリース、状態などのReact機能をクラスを記述する必要なく使用するためのHooksプロポーザル、その他いくつかの有望なサードパーティ製Reactパッケージが発表された。

React 16. 7のアルファリリースを使うには、yamでインストールする。

yarn add react@next react-dom@next

React Confでの最大のニュースは、Reactの抱える問題を解決するための活動であるHooksの新たなプロポーザルだ。

• コンポーネント間でのステートフルなロジックの再利用が困難
• コンポーネントが複雑で理解が難しい
• クラスが人とマシンの両方を混乱させる

Reactを学ぶ上で最大の障壁はクラスだとReactチームは考えている。他の言語とはまったく違うため、JavaScriptで’this’がどのような働きをするのか、理解できないエンジニアが非常に多いからだ。Reactにおける現在の関数とクラスコンポーネントの区別と、それぞれを使うタイミングは、経験豊富なReact開発者の間でも意見が一致していない。

Reactはクラスを排除する代わりに、既存のコードでも動作するHooksを提供して、採用を徐々に進めようとしている。

HooksはCodeSandbox内で簡単に試すことができる他、Hooksの例を毎日紹介するUseHooksという新しいWebサイトがある。

同じReact Confでは、MicrosoftのソフトウェアエンジニアであるChris Trevino氏が“The Missing Abstraction of Charting”という題で講演し、データ視覚化を目的とした、フレキシブルでReactフレンドリな文法を提供するオープンソースプロジェクトのchart-partを紹介した。ソースコード構造がReactに特定されていないため、他の言語でのグラフ化やデータ視覚化の実装の基盤としても使用可能だ。

SVGは、仮想DOMの世界でますます人気が高まっている。グラフやデータ視覚化を越える用途として、ソフトウェアエンジニアのElizabet Oliveira氏は、SVGイラストレーションをReactコンポーネントとして提供するテクニックを紹介した。さらに氏は、Reactコンポーネントとして提供されるオープンソースイラストレーションのサンプル集として、React-kawaii(可愛い)を紹介した。

TypeScriptのReactサポートは改善が続けられており、create-react-appの次期リリースには、アプリケーションソースコードのTypeScriptバージョンを生成するためのフラグが含まれている。

React Confではさらに、ReactでGraphQLスタイルのデータ要求のコロケーションを実現する、バックエンドに依存しないオープンソースライブラリであるRouteQLも発表されている。

RouteQLは、GraphQLのようなツールのフロントエンドが持つ、表現力に富んだデータクエリのコロケーションというアイデア(実際にgraphqlのクエリ構造とパーザを使用しています)と、ApolloのようなツールのQueryコンポーネントあるいはその上位コンポーネントであるrouteqlのアイデアを借用し、クエリがバックエンドに依存しないような形で適用したものです。クエリをルート要求に変換することで、ルートとクエリパラメータの決定にporpを使用することができます。

Videos from all of the React Conf 2018 sessions are now available, including the React Today and Tomorrow and 90% Cleaner React video which introduces the motivation behind React Hooks.