年々進化する「React」の魅力とは？～エンジニアが語る技術愛＃14～

MIXIには、探究心溢れるエンジニアがたくさん在籍しています。その探究心は業務で扱う技術に留まらず、趣味で書いているプログラムだったり、個人的に研究している言語だったりと、自身の気になった技術への追求も留まることを知りません。今回は、『TIPSTAR』や『humy』の開発に携わるフロントエンドエンジニアの阿部に「React」の魅力を語ってもらいました！

阿部峻大
2017年MIXI入社。フロントエンドエンジニアとして、『TIPSTAR』のWebサイトおよび『humy』の開発を担当している。

【用語解説：Reactとは】
Facebook（現Meta）が開発しているUI（ユーザーインタフェース）構築用のJavaScriptライブラリ。「Learn once, write anywhere」をテーマとし、Reactの使い方を学べば、Webに限らずモバイルアプリやデスクトップアプリなど様々な環境向けのUIをReactで開発できるようになります。

転換点は関数コンポーネント

━━Reactに触れたのはいつ頃ですか？
最初に触ったのは2015年くらいだったと思います。その頃は個人として触っていた時期で、社会人になって2017年くらいから業務でも使うようになりました。現在は『TIPSTAR』という公営競技のブラウザ版の開発や、『humy』の開発を担当する中でReactを使っています。

━━Reactに触れたきっかけは何ですか？
元々はVue.jsを先に使っていました。その流れでReactがあるのを知りました。サンプルコードを読んだり、自分で書いてみたりして感触がとても良かったのを覚えています。設計も綺麗だな、というのが最初の印象ですね。

━━Reactの特に魅力的なポイントを挙げるとすると？
宣言的にUIを作れる点です。今まで手続き的に書き換えていたものがstateの更新をすることでUIへ反映されるというフローに変わったことで、見通しが良くなりました。その利点を特に顕著に感じるようになったのは関数コンポーネントを使うようになってからです。

さらにReact hooksが出てきてから、基本的に関数だけでコンポーネントが書けるようになっています。ただの関数なので、引数のpropsで入力を受け取ってUIパーツとして出力するような形でほとんどのコンポーネントを組めるようになります。これが綺麗だと感じますし、開発を続ける中で破綻しづらいという印象が強いです。

━━それまでの開発とまったく違うわけですね
そうですね。私自身、昔はjQueryでガリガリUIを動かすような実装を経験してきました。その頃と比べると、すごく秩序が保たれている印象があります。これがReactの良い部分だなと感じます。

活発な開発をキャッチアップするには

━━Reactというと、ミドルウェア周りの栄枯盛衰が激しいイメージがあります
そうですね。様々な試行錯誤が行われた結果、今はある程度収束したと思います。1つに収束した訳ではなく、様々な目的に応じて最適な設計パターンが生まれています。それを要件に合わせて組み合わせていくような形に収まってきているかなと思います。

そうした現状とフィードバックを受けた上で、React本体の開発チームがより開発者体験が良くなるような仕組みを構築しています。開発計画はRFCとして発表されていて、要件に合わせて取捨選択はできつつも、一定の設計パターンは定まってきていると感じます。

━━最近好んで利用するライブラリ、ミドルウェアはありますか？
私が担当するプロダクトはサーバーで持っているデータを主体とする要件が多く、データ取得周りを担ってくれるuseSWRを利用することが多いです。
クライアント側での状態管理が多い場合などはuseSWRだけでは機能不足になる場合もあるためRecoil等を検討したり、GraphQLを採用している場合はApollo Client等のデータ取得と状態管理の双方を持っているライブラリを検討します。
キャッシュがしっかりと効くので、画面の遷移前後でのUI崩れが軽減されたり、状態管理をライブラリ内で保ってくれるので、自分たちは他の部分に集中できるので便利です。

━━Reactの活発なアップデートに追従する上で工夫していることはありますか？
Reactの開発は確かに活発なのですが、開発計画自体はかなり前から発表されています。また、すぐに移行しないといけないようなアップデートはあまりありません。そのため、キャッチアップだけ適切に行っていれば問題ないかと思います。

どちらかというと、React本体よりも周辺のライブラリの方がしっかりバージョンアップしておかないといけないことが多いです。そのため、普段の業務中にも頻繁にライブラリ更新を行うようにしています。バッチでの大きなアップデートではなく、小さなアップデートを頻繁に行っているイメージです。

実務でのReact活用方法

━━業務ではどのようにReactを使っていますか？
私は『TIPSTAR』と『humy』の開発に関わっていますが、どちらも技術選定のタイミングから入れていました。その中でNext.jsを提案して、実際に活用しています。

━━Next.jsの使いやすいポイントを教えてください
昔はあまり大きなフレームワークは好きじゃなかったので、最初は懐疑的でした。しかし実際に使ってみた結果、今はNext.jsはフレームワークと言うよりもベストプラクティスの1つであるという印象を持っています。Reactを使ったWebアプリケーションでユーザー体験を良くしようと突き詰めていった結果、Next.jsという形にたどり着いたんだろうなと思います。

Reactは遅いという指摘を目にすることがあるのですが、Next.jsでプロダクトを作り運用している肌感としては、パフォーマンス面の最適化機構が組み込まれているおかげか、Reactであることを起因とするパフォーマンスの問題はあまり気にならないです。ただし、ビルドした際のファイルサイズが大きくなる場合があるので、ファイルをCDNに載せてキャッシュしたり、エッジでユーザー環境に近いところから配信するといった工夫をしています。

━━デザイナーとの協業はどう行っていますか？
現在の業務では、デザイナーがReact周りを触ることは基本ありません。Figmaで作ったデザインをもらって、コードへの組み込みやCSSを書くのはエンジニアの役割です。デザイナーとエンジニアのコミュニケーションもFigmaで行っています。

━━エンジニアでCSSが苦手という人は多くないですか？
私自身はCSSを書くのが好きなタイプなので、あまり苦労はしていないです。もちろんチーム内にはCSSが苦手なエンジニアもいるので、ペアプログラミングでフォローアップしたりすることもあります。

最近ではモダンなCSSがブラウザに普及してきたので、昔よりはレイアウトがしやすくなっています。デザインを実装する難易度は下がっていると感じます。

━━チーム内での情報共有はどのように行っていますか？
週次のミーティングがあるので、そこで新しいトピックや気になった情報を共有しています。私はReactやNext.jsの新しい情報や、予定されている機能をチームに共有しています。そういった新しい機能がプロダクトに入れられるようになったら、どこを整備しないといけないといった軽いディスカッションも行っています。

━━今後のReactで期待していることはありますか？
最近はサーバーコンポーネントに期待しています。これは、Reactのコンポーネントを3つに分ける考え方です。
1. クライアントで動くコンポーネント
2. サーバーで動くコンポーネント
3. クライアントとサーバー、両方で動くコンポーネント
これまではクライアントで動くものか、両方で動くものかの2択でした。新しい選択肢がサーバーコンポーネントになります。

━━どういった場面で使えそうですか？
Reactのコンポーネントはルートから木構造で構築されます。そしてサーバーコンポーネントは木構造の途中の部分であっても、サーバーで処理を行ってUIを組み立てられます。これまでは木構造のルートからどこまでをサーバーで組み立てて、それ以下はすべてクライアントサイドという仕組みだったのですが、途中にサーバーサイドで構築したコンポーネントが入れられるのが利点です。

使いどころとしては、例えばお知らせなどが挙げられます。お知らせなどの認証状態に依存しないコンポーネントのUI構築を、サーバーサイドで行えるようになります。表示された瞬間には情報が表示されるので、ユーザー体験向上が期待できます。

━━サーバー側まで考えると、設計が複雑になりそうですね。
どこをサーバーで描画して、どこをブラウザで描画するのが良いかを設計に組み込む必要があるので、その難易度は上がるかと思います。

ちなみに、Next.jsではgetServerSidePropsという機能があって、これはページ単位でしか使えません。それをコンポーネント単位で使えるようにするのがサーバーコンポーネントだと思っています。そのため、getServerSidePropsが何かを理解していると、考え方を流用できるのではないでしょうか。

情報リソースはGitHubリポジトリ

━━Reactの情報はどうやってキャッチアップしていますか？
最近はGitHubリポジトリのRFCをチェックすることが多いです。利用者からのコメントも広く募集しているので、興味深いです。先ほどのサーバーコンポーネントもRFCの1つですね。

━━Reactに期待したいことは何ですか？
やはりサーバーコンポーネントですね。これはパラダイムシフトが起きそうだと思っています。最終的にどういう形で着地して本体に組み込まれるのかを楽しみに待っています。
後はNext.js以外のフレームワークを使ったプロダクト作りも行っていきたいですね。最近だとAstroというNext.jsとは異なる方向でのユーザー体験向上を目指しているフレームワークがあります。この辺りは引き続きウォッチしたいですね。