Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 皆さんこんにちは。この記事は株式会社カオナビ Advent Calendar 2024の1日目の記事です。このアドベントカレンダーでは、筆者が所属する株式会社カオナビの有志が記事を投稿していく予定です。 筆者はフロントエンドの開発環境改善を含むさまざまな改善を行っていますが、今回はESLintのCIにreviewdogを導入した話をご紹介します。 また、途中でreviewdogが発するexit status: 128 という謎のエラーに苦しめられたので、その原因と解決策もお伝えします。 ESLintのルールに対する継続的な改善とrevi

TL;DR （3行まとめ） React 18 までは、TypeScript で forwardRef するために、ref の型を書いたり、引数の順番・型引数の順番を気にしたり、めんどくさかった React 19 では、forwardRef が不要になり、普通に ref Prop を受け取れる TypeScript 型の記述量がかなり減って、書き間違いやすい部分も削減された React18までの書き方 React 18 以前では、ref Prop を指定できるコンポーネントを書くために、forwardRef を使う必要がありました。 生の button と同じように、属性、ref を設定できるカスタマイズ性を保つ カスタマイズ性を保ったまま、CSS Modules でスタイルを設定する という要件を満たす「button をラップしたカードUIコンポーネント」を作成するためには、以下のようなコ