Recomposeとは何だったのか、またはHooksが開けたパンドラの箱について

React Hooksが発表されて思ったこと

大岡由佳氏：それでは、「Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察」について、始めさせていただきます。大岡由佳と申します、よろしくお願いします。

（会場拍手）

今回はあまりためにになることは話しません。みなさんご存知の通り、数日前にReact Hooksが発表されましたけど、その影響でテーマにしようと思っていたことが今後あまり意味のないものになりかねなくなってしまいました。それで何を話そうかなって困っていたところ、知人に「今の戸惑いは今しか表現できないから、それをそのままLTすればいいんじゃないか」とアドバイスされたので、そういう感じのLTをさせていただきます。

なおスライドはSpeaker Deckに上がっていますので、随時参照してください。

改めて自己紹介を。大岡由佳と申します。フリーランスのエンジニアです。フロントエンド開発を中心に、教育や採用のお手伝いとかもしています。

React歴はまだ1年半ほどで、その前はRailsエンジニアでした。今日は見かけませんが、Forkwellっていう、最近いろんな勉強会でスポンサーをやってるエンジニアの求人サービスがあるんですけれども、そこの初代プロダクトマネージャーという経歴もあったりします。

先日「技術書典5」という技術書の同人誌即売会イベントがありまして、1万人くらい来られたんですかね。そこで『りあクト！』というそのまんまの名前のReact本を出させていただいたところ、けっこう反響があって。開催当日600部、後日通販で200部を売り上げました。ちなみに、「盛り上がりでVue勢に勝つ（笑）」というのが今回の私の目標だったんですけど、これが通販での売上のランキングですね。今10位で、全てのVue本を上回ってます。やった、Vueに勝った！

（会場笑）

（会場拍手）

なお内容はTypeScriptによるReactの入門書です。商業誌で出さないかというお声がけもいただいていて、前向きに検討中です。

最新のECMAScriptからTypeScript、JSXと言語の基礎的なところ、さらに関数型プログラミング、コンポーネントの基本といったところから始まって、業務用の大規模開発を考慮したRecomposeを使った関数型コンポーネント＋HOCやReduxのプラクティスに進むという内容でした。後半のほうは本当に、こんな感じでHOCとRecomposeとか、ガンガン使ってます。

React Hooksの発表––Reconposeのメンテナンス終了

ところがそれからわずか17日後。React Conf 2018の中のキーノートセッションみたいなところで、React Hooksというものが発表されました。

これはコミュニティが導き出したHOCとReconposeのベストプラクティスをそのまま置き換えて駆逐するポテンシャルのある技術で、発表直後から今にかけて開発コミュニティが大騒ぎになっています。そしてその数日後、これはサイボウズの小林さんのツイートで、「Recompose、メンテやめるってよ」みたいな情報が流れてきました（笑）。

（会場笑）

該当のページを見ると、Recomposeの開発者が「今後はメンテしないのでHooksに移ってね」という声明を出していました。本を出した瞬間にはしごを外された感じですね。

私もいろいろパニックになって、「この先どうなるんだ」的なツイートを連投してたところにDMが来ました。

「えっ、誰？」と思ったんですけど、そしたらまさかのDan先生でした。

Dan先生をご存知でない方いらっしゃいますか？　Dan AbramovさんっていうReduxの作者で、今FacebookのReactチームで中心になって開発をされている方です。

私の日本語のツイートを翻訳機能経由で見られてんでしょうか、「今回の変更のせいで、あなたの執筆プランを台無しにしてゴメンね。だいじょうぶ？」みたいな感じのことを心配してくださいまして（笑）。いやいやそんなと、恐れ多くてとっさに『ご心配ありがとうございます。でも私も今回の変更が、将来的にはReactをシンプルにしてくれることを期待していますので』返しちゃったんですけど。そんなやり取りがありました。

この方は公式のGitHub Issueはもちろん、RedditやTwitterでの議論を細かくチェックして、さらには日本語のツイートまでフォローされてるんですね。私だけじゃなく、他の日本語ツイートにもレスを返されてるのを見かけて。すごくヒマ人……じゃなく気遣いの方だなっていう印象を受けました。

（会場笑）

それで、溜飲が下がったというわけじゃないですけど、今回の騒動も前向きに考えようかなという気持ちになりました。

Recomposeとは何か

Recomposeの話に戻ります。Recomposeとは何か。

Reactで開発していく際、クラスコンポーネントを使っていらっしゃる方が多いかもしれないんですけれども、それを関数コンポーネントで書くためのユーティリティですね。

これを使うと、クラスコンポーネントでしか利用できなかった機能、たとえばLocal Stateやライフサイクルメソッドが関数コンポーネントでも使えるようになります。

そのためのインターフェースとしてHOCという、コンポーネントを引数にとって、機能を合成した新しいコンポーネントを返す関数を使います。また複数のHOC、たとえばReduxのconnectとかReact RouterのwithRouterとか、それらをひとつの関数に合成するためにも使われます。

まず状態を持たないPresentational Componentを関数コンポーネントで作り、そこに必要な機能をHOCで合成してContainer Componentを作って組み合わせていくというのがコミュニティの生み出したベストプラクティスで、意識の高い開発者にとっては鉄板といっていい手法でした。

なぜRecomposeの開発をやめたのか

それなのになぜRecomposeは開発をやめたのかというところなんですけれども。

この方、Andrew Clarkさん。Recomposeの開発者ですが、現在のGitHubのOrganizationを見るとFacebookにいるじゃないですか。もともとこの方、3年前にRecomposeを作ったんですけど、そのときはFacebookにいなかった。

ところがFacebookの本体のコントリビューターのところを見ると、2017年あたりからすごく活発に入ってる。つまり、Reduxの開発者のDan Abramovさんも実はそうなんですけど、Facebook本家のReactチームにリクルートされちゃったんですね。

このAndrew ClarkさんがRecomposeを作ったんだけれども、FacebookにジョインしてHooksの開発に参加した、だからRecomposeの開発を止めてHooksを推奨してるわけです。ちなみにLocal Stateを付与するwithStateっていうAPIがRecomposeにはあるんですけど、今回Hooksで出たuseStateっていうのがそっくりなんです。もう納得ですよね。

Reactはこれからどうなるのか

「それでこんな騒ぎになって、Reactはこれからどうなるの？」みたいなところの話ですが、実際のところ私も本当にわからなくて。ネット上の議論を見たり、有識者の方々から話を聞いたりしながら、自分なりの予測をまとめてみました。

Hooksはまだ正式なバージョンではなく16.7.0のアルファ版で公開されたわけですが、これだけの反響を巻き起こしたわけですから。これがもう撤回されることはないでしょう。今後のReact界隈はHooksを中心に再編成されるというのは、まちがいないんじゃないかなというところですね。

HOCについては、コアチームの人たちがすごく嫌ってるらしいので（笑）、Hooksの普及とともに使われなくなっていきそうです。同様に公式が推奨していたRender Propsも言うほど広まらなかったので、これもフェードアウトしていくんじゃないかなと。

Hooksによる書き方自体が関数コンポーネントを前提にしていて、公式的にもそちらを推奨しているようにしか見えないので、クラスコンポーネントもそのうち非推奨になるんじゃないでしょうか。Danさんは否定されていたようですが、雰囲気的にはその線が濃厚でしょう。

というわけで今後は「すべてがF（Function Component）になる」と。これはただ言いたかっただけなんですけれども（笑）。

あとuseEffectにより、ライフサイクルメソッドも使う機会がなくなっていくんじゃないかというのも予想できますね。

Reduxはなくならない？

そしてReduxについてなんですけど、私もReduxがなくなることはないんじゃないかなと思うんですよね。公式としてはReduxを排除したい意向のように見えて、今後Suspenseによる非同期のデータフェッチ機能が提供される予定らしいのですが。

でもReduxによるGlobal Stateの管理や既存のエコシステム、Redux DevToolsとかRedux Persistといったものに代替できるものが果たして作れるのかというと、それは難しいんじゃないかというのが私の考えです。

ただし、インターフェースは変わるだろうなと。公式の記事でサジェストされていたように、これまでconnectっていうHOCを使ってたのが、Custom HooksによるuseReduxといった感じのインターフェースになるんじゃないでしょうか

あとは、Hooksの対応が遅れたライブラリはそのポジションを追われるんじゃないかということで、今までデファクトスタンダードだったものが廃れて新しいものに取って代わられるといったReact周辺ライブラリの地殻変動はあるんじゃないかと思います。

ただ心配なのが、Vueがあれだけ盛り上がってる中で、「Reactはこんな混乱してて大丈夫なの？　みんなVueに行っちゃわない？」みたいなところなんですけれども。

この一連の騒動について、少し私には既視感があります。

かつてRailsに起こったことに対する既視感

ちょうど10年前の2008年、Railsがまだ2系が最新版だったときに、DHH（ David Heinemeier Hansson）っていうRailsの作者、超有名な方ですけれど、彼が自分のブログで「クリスマスプレゼント」と称して重大発表をしました。次期バージョンのRails3は、当時「キレイなRails」という名目で勢力を伸ばしていたMerbと統合されてひとつのプロダクトになる。それに伴ってMerbの開発者もRailsの開発チームに参加することになるという内容でした。

この発表によってRailsコミュニティは騒然となりました。「今開発しているプロダクトコードは全てレガシーになってしまうということ？」「後方互換性はどうなるのか？」みたいな。DHHは「1年で出す」とか言ってたんですけど、けっきょくRails3の正式版を出すまで2年くらいかかって、そのあいだRailsコミュニティはそうとう混乱してました。

リリースされたRails3は、内部実装的にはむしろRails3というよりはMerb2といった趣きで、後方互換性もほぼないに等しかったんですが、その結果Railsは今みなさんが知ってるような、モジュラリティが高くクリーンでRESTfulなフレームワークに生まれ変わったわけです。

Reactも開発者を外部から、Dan AbramovさんやAndrew Clarkを取り込んで、「これ以上あとではもう現実的に無理」というこのタイミングで設計をシンプルにするための大幅改変をぶっこんできたのが、状況的にけっこう似てるんじゃないかなって思いました。

つまり今回の騒動は、エポックメイキングなフレームワークが、さらなる普及・発展のために運命的に経なければならない「10年に1度の大変革」なんじゃないかというふうに個人的には考えています。

クラスコンポーネントを排して関数コンポーネントだけを用いて状態を用い、Hooksによって状態を隔離しライフサイクルではなくより核心的な形でその変更を規定する。それはReactの公式ドキュメントの最初に原則として書いてある「Declarative（宣言的）」を徹底するためのものと言えるでしょう。

宣言的であるということは、固有の状態を持たず、入力が同じであれば出力も同じであるということ。Hooksの導入はその原則に立ち返り、よりReactをシンプルにするものだと私は考えます。

ただ、いろいろ問題はあってですね。「useEffectのテストってどうやって書くの？」とかネット上の議論では投げられてるんですけど。Dan先生いわく「これから考える」と（笑）。

（会場笑）

それでもReactの開発チームには優秀な人たちが集まっていて、お金もいっぱいあるわけで。Rails3はリリースまでに2年もかかりましたけど、Reactの場合はもっと早く収拾がつくんじゃないかなと思います。いちReact開発者として肩入れしているので、そう信じたい気持ちが言わせているだけかもしれないですけれども。

このあたりの話を詳しく知りたい方は、Dan先生が書いたMediumの記事とか。あとReactコアチームが今回の話題について話し合ってるPodcastがあるので、それらを参照するといいんじゃないかなと思います。