はじめに
こんにちは。Developer Engagementブロックの@wirohaです。12月10日に「株式会社ユーザベース×株式会社ZOZO×株式会社PR TIMES 3社合同フロントエンド勉強会」を開催しました。3社のエンジニアが集まり、フロントエンドに関する取り組みを発信するイベントです。
登壇内容まとめ
各社から次の7名が登壇しました。
| 発表タイトル | 登壇者 |
|---|---|
| PR TIMESにおけるNext.jsとキャッシュの付き合い方 | 株式会社PR TIMES 柳 龍哉 |
| Next.jsのアップデートに伴い、mswを2系に上げた話 | 株式会社ZOZO 田中勇太 |
| こつこつ育てるSLO | 株式会社ユーザベース ニッシー☆ |
| 三年間の関わりから見る PR TIMES エンジニアリングの変化 | Shogo SENSUI (@1000ch) |
| useSyncExternalStoreを使いまくる | 株式会社ZOZO 冨川宗太郎 |
| あの日見たUIの名前を俺たちはまだ知らない 〜サイドピーク、はじめました〜 | 株式会社ユーザベース 田端 樹人 |
| Recoilを剥がしている話 | 株式会社PR TIMES 桐澤 康平 |
PR TIMESにおけるNext.jsとキャッシュの付き合い方
Next.jsの運用構成、キャッシュ戦略、Next.jsとの付き合い方についてお話ししました。キャッシュ戦略はページの特性によって異なる工夫をしていました。
Next.jsのアップデートに伴い、mswを2系に上げた話
MSW 1.xから2.xへ上げた際に苦労したことや、2.xのメリットついて共有しました。メリットはスライド内でコードを比較して示しているため、そちらをご覧ください。
こつこつ育てるSLO
SLOの設定とその運用について、具体的な事例を交えて説明しました。「SLOの名前を具体的にする」「CUJベースでもっと具体的な命名にする」「指標をアップデートする」といったノウハウが共有されました。
三年間の関わりから見る PR TIMES エンジニアリングの変化
PR TIMESにアドバイザーとして入り、積み重ねてきた改善についてお話ししました。課題解決の思考フレームワークを導入することで議論の質が向上したそうです。Backendと同居していたFrontend実装の別リポジトリ化は大きな成果だと感じました。
useSyncExternalStoreを使いまくる
useSyncExternalStoreの活用方法とその効果について説明しました。ブラウザ側でしか使えない関数やリソースを必要なときだけ利用できるようになり、Hydration Errorの回避などのメリットが得られるそうです。
あの日見たUIの名前を俺たちはまだ知らない 〜サイドピーク、はじめました〜
画面右側からページがせり出してくる表示方法「サイドピーク」の実装方法を発表しました。現在はNotionで使用されていますが、まだ珍しいUIです。多くの段階を経て実現できており、同じUIを実装したい方にとって参考になる内容でした。
Recoilを剥がしている話
RecoilがReact 19で動かず対応される見込みがないことから、脱却するために取り組んでいることを共有しました。複数のパターンがあり一律に置き換えられるものではなく、影響範囲が広い場合もあり、戦略立てて進める必要がありそうでした。
最後に
本イベントは3社からエンジニアが集まることで、自社内だけでは得られない情報や知見を共有できる機会となりました。今後もこういったイベントを開催していきますので、ぜひご参加ください！
ZOZOでは一緒に働く仲間を募集中です。ご興味のある方は以下のリンクからぜひご応募ください。
