はじめに

こんにちは。レバレジーズ株式会社の松本です。普段はHRテック事業部で主にフロントエンドの開発を担当しております。今回の記事では、入社2ヶ月の私がテックフェス全体のレポートと、弊社フロントエンジニアの小林がReact18について発表した「Parce que j’aime la React.」を受けて、追加で調べたり試したりしたことをご紹介したいと思います！

テックフェスとは？

レバレジーズグループに所属するエンジニアを対象に社内で半年に一度行われている技術の祭典です。エンジニアが新しい技術に興味を持ち、勉強をするきっかけを作ることを目的とし、グループ全体の技術力向上を目指します。

11月22日行われたテックフェス2022秋では、「まずは知ろう。次に学ぼう。そして明日使おう」というテーマで開催されました。

テックフェス全体について

当日の流れは、有名な「テスト駆動開発」の日本語訳をされた和田卓人氏をお招きし、「質とスピード - ソフトウェア開発の典型的な誤解を解く（2022年秋版）」の基調講演から始まり、Sessionが2時間弱、LTが30分程、最後にパネルディスカッションが1時間程というタイムスケジュールでした。

オープニング
↓
基調講演（和田卓人氏）
↓
Sessions（30分 × 4名の弊社エンジニア）
↓
LT（5分 × 5名の弊社エンジニア）
↓
パネルディスカッション（1時間 4名の弊社ベテランエンジニア）

パネルディスカッションでは、「ITエンジニア35歳定年説について語る」というテーマで、意見を交わしていました。

・面白かった発表
特に面白かった発表は、個人的には和田卓人氏の発表と最後のパネルディスカッションでした。和田卓人氏の「質とスピード」についての発表では、スピードのために犠牲にしようとしている品質とは何を指すのか、品質とスピードはトレードオフではないことを経験談やデータに基づいてお話ししていただきました。スピードおよび質とトレードオフなのは教育、成長、多様性への投資であるというお話もあったので、内部品質（スピードは落とさない）への投資はエンジニアだけでなく事業会社全体にとって重要であると感じました。

また、最後のパネルディスカッションも個人的には非常に面白かったです。一般的に、「ITエンジニア35歳定年説」というのはネガティブな意味で広まっていると思います。調べてみると一般的に35歳定年説と言われているのは、学習能力の低下や体力の低下が理由とされているようです。

ただ、今回はそれとは反対にポジティブな印象を受けました。登壇された方々もキャリアを積むにつれてコードを書くことが減ってきているとのことでしたが、前述したネガティブな理由ではなく、できることが増えたことで業務の幅が広がったことが大きな理由の一つとなっているようでした。エンジニアに関わらず、年齢に関するトピックではネガティブに語られることが多いイメージだったので、今回はポジティブな話を聞くことができて非常に良かったなと感じました。

・関心があった発表
SessionsやLTの発表も非常に面白かったです。また、個人的には弊社フロントエンジニアの小林によるReactについての発表（30分のSesssion）「Parce que j’aime la React.」は、普段触れている技術領域ということもあり非常に関心がありました。今回は、この発表から何を知って、何を学んで、何を使ったのかについても共有できればなと思います！

何を知って、何を学んで、何を使ったのか？

・知ったこと
小林の発表ではReact18で提供されるものとして、並行処理レンダリング、Suspense（正しくはアップデート）の紹介がありました。例えば、以下のような実装だと、FetchComponent内でPromiseがthrowされている場合（サスペンドした場合）は、fallbackで指定されているComponentが返されます。このPromiseが解決された時はFetchComponentが返されます。

function App() {
 return (
     <Suspense fallback={<Spinner />}>
       <FetchComponent />
     </Suspense>
 );
}

また、Reactの日本語公式ドキュメントには、以下のような記述があります。

サスペンスにより、「UI ロード中状態」というものが、React のプログラミングモデルで宣言的に記述可能な主要コンセプトに昇格します。

今まではuseQuery等を利用してloadingの状態を実装者が管理し、それを用いてUIを分岐させるような実装をしていた方も多いと思います。私も同じような実装をしておりました。

この分岐のロジックをReact側が担ってくれるようになるため、我々はloadingの状態やそれを利用した分岐に関心を持つ必要がなくなり、ロード中とロード完了後のUIを宣言するだけで良くなったということだと解釈しています。

・学んだこと
React18で提供される機能の一つとしてTransitionというものがあります。今回はこの機能について学んでみました。

Transitionは更新処理に優先順位をつけたり、中断するための機能です。この機能では、更新処理を「緊急性の高い更新」と「トランジションによる更新（緊急性の低い更新）」で区別しています。緊急性の高い更新は即座にUIを更新します。一方、トランジションによる更新では緊急性の高い更新が発生したら更新処理を中断し、最終的な結果のみを返します。これはSuspenseと合わせて利用することもできるようです。

また、React18について学んでみて面白かったのは、この更新処理に優先度をつけたり更新処理を中断するような機能は ”React Fiber” というアーキテクチャによって実現可能になったということです。

Fiberについて調べていた中で、こちらの記事がとても面白かったです。 ”React Fiber”はReact16から採用されたもので、React16以前とは仮想DOMを更新してUIに反映するアルゴリズムが変更されているとのことです。今までは仮想DOMを上から再帰的に更新していたものが、各ReactElement一つ一つに対して更新処理が用意されるため、非同期的に仮想DOMを更新することが可能になったとのことみたいです。

また、少し古いものですが、こちらにも以下のような記載があります。

The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures.

“suitability”という単語が使われているように、FiberはUIの動きを絶対的に早くするものではなく適性を高めること、つまりUXの向上を目的にしていると考えられそうです。この目的を達成するための基盤にFiberが必要で、今回のReact18で導入された機能はまさにこの目的を達成するための具体的な方法の一つと言えそうだなと感じました。

・使ったこと
今回学んだ内容は業務ですぐに使える内容ではないこともあり、ここではサンプルを触ってみた感想のみにしようと思います。公式のReact Docsに載っているuseTransitionのサンプルコードを手元で動かしてみました。所感としてはSuspenseは比較的理解しやすく感じた一方で、useTransitionは思っていたよりも腰を据えて学んでいく必要があるものだなと感じました。

SuspenseもuseTransitionも背景には並行処理レンダリングがあって、私たちが見えている画面の状態とは別でもう一つ状態をもっていることが少し理解できました。今後遠くない未来で実務での利用もありそうなので、引き続きインプットを続けていこうと思います。

最後に

今回の記事では、テックフェスで知った内容からReact18について自分なりに学んだことを書かせていただきました。ReactはUX改善のためのアップデートを続けているというのが非常に面白かったです。また、テックフェスは非常に魅力的な発表ばかりで、話を聞いていてとても楽しかったです。私は今年の9月に中途で入社したばかりですが、このように組織内での技術の共有があるのは、ナレッジ共有の観点からも非常に有意義だと感じています。皆さんもレバレジーズで一緒に働いてみませんか？レバレジーズに少しでも興味を持っていただけた方は、こちらからエントリーをお願いします！

recruit.jobcan.jp