フロントエンドチーム LT会【5月号】

2024年5月27日 18:02

こんにちは！ラクスフロントエンドチームの松浦です！
5月になりました！(もう、6月になろうとしていますが…)
気温の上がり下がりが激しく、春から夏への順応を始めていかないとなと密かに考えています。
皆さんも体調を崩さないように気をつけてください！😊

フロントエンド開発課で定期的に開催されるゆるく技術的な内容を話すチームLT会の5月分の中から厳選した4本を共有させていただきます。

Reactのパフォーマンス改善例

RAILモデルのResponseを基に実際のプロダクトで問題になった500行にも及ぶテーブルのパフォーマンス問題を改善した例をわかりやすく紹介してくれました。

※ 「ラクスプロダクトにおける問題」のスライドでは元は動画が流れており、500行のテーブルの全選択チェックボックスをクリックすると約3秒後にチェックがつきます。
※「不要なレンダリングの削減」のスライドでは、改善後の方は0.5秒後くらいにチェックがつきます。

コメント・ガヤ
Aさん）関数の実行結果をメモ化するのと関数の実行自体をメモ化するやつの違いは以前◯◯さんと話した気がする。ハンドラにカリー化(合成関数)みたいな概念が入ってくると意外と面倒だった気がする。
Bさん）普段はどのようなツールでパフォーマンスを測定してるんですか？
　＞　FCPやLCPを測るときには「Web.dev」の「Page Speed Insights」を使っています。

個人的な感想
Reactアプリケーションのパフォーマンス改善について具体的かつ実践的な情報を提供しており、とても参考になりました。RAILモデルの説明から始まり、ボトルネックの特定と改善方法が明確に示されているため、すぐに実践できそうです！
特に、不要なレンダリングの削減方法やパフォーマンスの比較結果が印象的で、改善の効果が一目でわかる点が良かったです。全体として、非常に有益な資料であり、今後の開発に役立つ内容でした。

ErrorBoundaryとSuspenseの導入検討

ReactアプリケーションにおいてErrorBoundaryとSuspenseの導入を検討した内容です。
結果的には見送りになってしまいましたが、それに至るまでの経緯をしっかりとまとめてくださってます。

コメント・ガヤ
Aさん） ErrorBoundaryはウチではReact RouterとViteを使ってerrorElementで済ませちゃってます。
Bさん）React19が出るまでにはSuspenseを使っておきたい所存。

個人的な感想
ErrorBoundaryとSuspenseを使って、綺麗にエラーハンドリングをしたり、ローディング表示をしたりする気持ちはすごく共感しました。
結論としては、見送りになってしまいましたが、柔軟性に応えるには現時点では致し方ない選択だと思いました。

React19Betaをざっと見る

話題のReact19について新機能と変更点を軽く紹介してくれています。

コメント・ガヤ
Aさん） FormStateも更新が入ってるから、React Hook Formが不要な世界になるかもなぁ。
Bさん）React19に向けて何か計画立ててますか？
　＞　まずは他にリプレイスしたいことがいっぱいある。React18のサポートを切るライブラリもあるから、その辺のMWアップデートとか。それから19に向けて準備を始めていく予定です。

個人的な感想
React19の新機能と改善点を非常にわかりやすくまとめてくださってて、とても有難いです。
新しいフックの導入で、非同期処理や状態管理が簡単になり、サーバーコンポーネントによりサーバサイドでのレンダリングも強化され、アプリケーションとしてのパフォーマンスも向上します。
refのプロパティ化によるメンテナンス性も良くなると思われます。
より効率的で性能が高いアプリケーションを開発できるようになる日がとても楽しみです！