JavaScriptのUI用ライブラリーとして定着したReactですが、最近公式Blogに React 16.x Roadmap という記事がかかれて話題になっています。そこで最近のReactの動向と、思うことを書きます。
Reactの進化
私は昨年、作りながら学ぶ React入門 という書籍を出版しました。この時点では React バージョン 15 でした。その後の進化を簡単にまとめると
- 15 小規模な機能追加・改良 2016-04 〜
- 16.0 コアの全面的な書き換え 2017-09 〜
- 16.3 Context APIの追加 2018-03 〜
- 16.6 Suspenseの追加 2018-10 〜
そして今回の React 16.x Roadmap で以下が発表されました。これらの機能は既にReact Conf 2018等で発表されていましたが、アルファ版がGitHubに公開され、最新のReactを追っている開発者達がブログ等を書き話題になっています。
- 16.x Hooks の追加 2019 Q1くらい
- 16.x Concurrent Mode 2019 Q2くらい
- 16.x Suspense for Data Fetching 2019中頃くらい
16.0 はコアの全面的な書き換を行い、おおざっぱに言うと表示がスムーズになりました、詳しくは React Fiber Architecture を読んで下さい。大きな書き換えを行ったので、その後しばらくはバグ対応等に時間が費やされていたのではないかと思われます。
そして、 16.3で Context APIの追加 されました。これはReactのコンポーネントのパラメターは親→子→孫といちいち渡す必用があり、子コンポーネントではそのパラメータを使わなくても孫コンポーネントのためにバケツリレーする必用がありました。これが嫌なだけで Redux を使っているという開発者がいるくらい不評な部分でした。 Context APIこのバケツリレーを緩和する機能です。
16.6 の時点では Suspenseはライブラリー等を動的にプログラムに取り込む事が出来ます、ただし本命は Suspense for Data Fetching の方かなと思います。
Reactのコンポーネント
Reactは画面の部分部分(例えば ヘッダー、一覧表、操作エリア…)をコンポーネントとしてコーディングします。
コンポーネントは React.Componentを継承したクラス(ここではクラスコンポーネントと呼びます)と、関数で書いたシンプルな関数コンポーネント(正式な言葉ではありませんが、ここではそう呼びます)の2つがあります。
クラスコンポーネントはReactの全ての機能が使えますが、現状では関数コンポーネントは機能が制限されておりシンプルな表示用のコンポーネント程度しか作れませんでした。
たとえば制限は、
- 状態(state)を持てない
- 非同期処理を書けない
- コンポーネントの状態変化に処理を組み込めるlife cycleメソッドが書けない
Reactの今後
React 16.x Roadmap で示された、Hooksは関数コンポーネントにstateを持てるようにする機能、Suspenseは非同期処理を関数コンポーネントに書ける機能、Concurrent Modeはクリック等の操作を表示より優先しよりスムーズなUIを実現できる機能です。
またlife cycleメソッドの一部を関数コンポーネントに書ける機能も既に追加されています。
Reactの開発者(Facebookの開発者)は関数コンポーネントを強化したいと考えているようです。
過去に私が書いた150コンポーネント程度の大きさReactプロダクトのコードを見直してみましたが、これらの機能が実装されれば約90%のコンポーネントは関数コンポーネントで書けそうです。
これは私見ですが、JavaScriptはシンプルな関数型言語風の言語で、取って付けたようなクラスより関数の方が相性が良く、より良いコードが書けるのではないかと思います。
さらなる未来のロードマップは示されていませんが、コア部分の強化が終わりReactの機能アップに注力しだしたようです、今後のReactの変貌が楽しみです。
