Propsによるデータの受け渡し（チルドレン属性、コンポーネントへの型付け）

どうも、君のチームのチーフアーキテクトだ。今日は、Reactの中級者が必ず一度はハマり、そして「なるほど、こう書くのか！」と腑に落ちるテーマについて話そう。そう、`forwardRef`を用いたPropsとRefの型定義、そしてその裏側の挙...

こんにちは。チームのコードレビューをしていて、最近こんなコードをよく見かけませんか？「汎用的なボタンを作りたいだけなのに、親から渡すPropsの型定義が面倒くさくなって、全部 `any` にしたり、あるいは似たようなコンポーネントをコピペで...

こんにちは。君もそろそろ「単に動くだけのReactコード」から卒業し、大規模なアプリケーションを破綻させずにスケールさせるための設計力に直面するころだな。実務でコードベースが肥大化してくると、一番最初に頭を悩ませるのが「コンポーネント間のP...

こんにちは。プロダクトの規模が膨らみ、日々の型エラーやリファクタリングに頭を悩ませている中級エンジニアの皆さん、お疲れ様です。今回は、React 18以降のTypeScript環境で多くの開発者を「おっ？」と躓かせた、`React.Prop...

やあ。今日も元気にコード書いてるかい？「ボタンコンポーネント作ったんだけど、なんだかPropsがカオスになってきた……」「`href`が渡されたら``タグになって、渡されなかったら``にしたいんだけど、なんか型定義がガバガバで、存在しないは...

こんにちは。チームのコードレビューをしていて、「あ、またこのボロが出てるな」と思う瞬間がある。それは、既存のHTML要素をラップした汎用コンポーネントを作るとき、Propsの型定義で車輪の再発明をしていたり、`any`や`unknown`で...

こんにちは。チームのコードレビューをしていて、「またPropsのバケツリレーが発生しているな……」とか、「この汎用モーダル、中に渡すコンテンツが変わるたびに新しいPropが増えてカオスになってるぞ」と頭を抱えた経験、君たちにもないかい？中級...

密結合を脱却せよ：Compound Componentsが「本当に」現場で愛される理由フロントエンドの現場で、「propsバケツリレー」に頭を抱えた経験はないだろうか？ 親が子へ、子が孫へ…とひたすらデータを渡すだけのコンポーネント。あれは...

Propsスプレッドの「沼」にハマるな：安全なコンポーネント設計の極意Reactを書いていると、ついやってしまうのが `{...props}` という記述。いわゆる「Propsスプレッド」だ。「とりあえずこれで全部渡しておけば楽だし、型も通...

Reactジェネリックコンポーネント：型安全を極め、「再利用可能なUI」を実装する武器現場でReactを書いていると、必ずぶち当たる壁がある。それは、「汎用的なコンポーネントを作ろうとすると、Propsの型定義が`any`や`unknown...