こんにちは！kintone フロントエンド刷新プロジェクト（通称フロリア）にてエンジニアをしている キム テフンです。今日は フロントエンド職で新卒入社後にできることの一例として、現在も継続して社内で開催している「React のドキュメントを読む会」の事例を紹介しつつ、面白かった React の学びを少しだけ共有したいと思います！
※ この記事は Cybozu Frontend Advent Calendar 2023 の 5 日目の小さなトリートになります :)
目次
React のドキュメントを読む会を始めたきっかけ
きっかけとしては、DOGO（どうご）チームのまっつー（@ryo-manba）からの誘いでした。ドキュメントを読む会を開催することで周りを巻き込んでみんなで楽しく React の熟練度を高められそうだと思ったのと、「自立と議論」というサイボウズが大事にしている文化にも当てはまるような企画だと思い開催を決意しました！
社内勉強会開催のハードル
「React のドキュメントを読む会」という名前の社内勉強会についての事例紹介ですが、便宜上以下「社内勉強会」と呼びます。
社内勉強会の開催までの流れは以下の通りです。
- 新卒メンバーでテーマ決め相談会（Zoom で雑談ベース）
- 社内勉強会に時間を使うことに対し、各自所属チームメンバーからの了承を得る
- 社内カレンダーに日程登録
- Slack チャンネルで社内勉強会の宣伝
このように、主催者側の社内勉強会開催のハードルはとても低めで、必要性さえあれば誰でも気軽に開催できる雰囲気があります。参加者側からも社内勉強会参加のために取るべきプロセスは特になくて、チームメンバーからの了承を得るくらいで良い流れです。
開催のハードルはともかく、社内勉強会の質が気になってなかなか主催することを躊躇ってしまうかもしれませんが、以下のようにガッツリとした社内勉強会でなくても大丈夫です :)
社内勉強会の内容紹介
私を含めた 3 人のフロントエンド職新卒が中心となって社内勉強会を進行しています。内容としては基本的に公式 React ドキュメントを読み通す流れになります。
その過程で、各々が思ったことや疑問を発信及び議論することで理解を深めることを目指します。
参加条件として特に掲げているものはなく、事前準備も不要なふらっと参加できる勉強会です。（直接フロントエンド開発をせずとも React コードに興味を持つ方も気軽に参加してくれています）
最小開催人数は 3 人に指定していますが、最大参加人数に制限はなく、平均の参加人数は 4~5 人です。個人的には、参加者が意見を出し合いやすいちょうど良い人数だと感じました。
社内勉強会の進行と合わせて、参加者でアウトプットもしてきました。
みんなでアウトプット
３人の固定メンバーで、React ドキュメントからの学び、参加者からの補足説明資料、参加者の声、などをノートにサクッとまとめています。ノートにまとめることは良い復習にはなりますが、アウトプットとして少し物足りなかったり、もっと生産的なものを残したい場合には以下のように追加でアクションを起こしました。
個人でアウトプット
私は社内勉強会のノートで復習するときに感じる疑問を追加で学習し、あとで個人ノートにまとめたりしていましたが、メンバーの中には React 公式ドキュメントの翻訳を改善する形でアウトプットしていました！
このように、社内勉強会からのアウトプットは持続的なところに重点を置きつつ、物足りないところは各々で埋めるような形にすれば、社内勉強会の質が気になって開催を躊躇うといった心配はなくなると思います。
社内勉強会の紹介はここで終了なのですが、せっかくなので最後に私が社内勉強会で学んで面白かった内容２つを紹介します :)
BONUS：面白かった学びの共有
useRefのベースはuseState？
※ 参考：useRef の内部動作
よく input field のonChangeが毎回トリガーされないようにsetStateの代わりにuseRefを使ったりすると思います。useRefはコンポーネントの再レンダリングを起こさず情報を記憶したい場合に使う「避難ハッチ」とも呼ばれたりしますね。しかし、なんとuseRefは以下のように実装されているのとほとんと同じであるとのことです！
function useRef(initialValue) { const [ref, unused] = useState({ current: initialValue }); return ref; }
このように、useRefは最初のレンダーで{ current: initialValue }を返しますが、それからもレンダーが発生するたびに同じオブジェクトを返す構造になってます。加えて、useRefは常に再レンダリングを起こさず情報を記憶するので、セッターを返さないことが納得できますね。
React の理念の 1 つである 「イミュータビリティ」から離れるための「避難ハッチ」であるuseRefが、実は「イミュータビリティ」理念に最も忠実なuseStateをベースに実装されているのと同然であることから皮肉を感じた面白い学びでした！
keyでstateをリセットする「上級技」
※ 資料：key で state をリセットする
上記の画像のように React はコンポーネント構造を「レンダーツリー」としてビルドすることで、各stateの所属コンポーネントを把握及び紐付けます。紐付けられたstateは、所属するコンポーネントと生死を共にすることになります。
こういった特徴によって、同じ位置の同じコンポーネントへの再レンダーはstateが維持されますが、同じ位置の異なるコンポーネントへの再レンダーはstateがリセットされてしまいます。しかし、ここで同じ位置の同じコンポーネントにも関わらず state をリセットさせる「上級技」を Mira チーム担当のコンポーネントで活用していることを学びました！
上のイメージ例のように、コンポーネントの位置は常に同じですが、ボタンが選択されるたびに fade-out アニメーションをさせるための state をリセットさせないといけません。
const Component = () => { ... return ( ... <MintMessage key={uniqueKey} /> ...
そこで上記のようにkeyを使って「特定のメッセージコンポーネント」として React に識別させることで、同じ位置の異なるコンポーネントとして認知するように強制しています。keyを使う際には一意性のことをお忘れなく！
React レンダーツリーの特徴を実際に所属しているチームで活用していることがわかった面白い学びでした。
あとがき
面白かった内容の共有で少し話の流れが逸れかけたところで、締めの挨拶になります。紹介したように新卒メンバーが主体的に社内勉強会を企画できた背景には、開催のためのシンプルなプロセスも大きく関係しています。サイボウズには「実務で必要な学びが欲しい、でも 1 人では眠くなりそうだからガッツリでなくともみんなで楽しく勉強する場が欲しい！」などの場合に気軽に社内勉強会を開催できるような環境が整っています。
この記事が、新卒でも主体的に動くことで成長の場をいくらでも設けられるサイボウズのフロントエンド職に興味を持っていただくきっかけとなれれば幸いです :)
以上、フロントエンド職の新卒ができることの一例である「React のドキュメントを読む会」を紹介させて頂きました！🫡
