React

こんにちは。チームのコードレビューをしていて、最近一番「あぁ、またやってるな」と頭を抱えたくなる瞬間がどこか分かるかい？そう、「Prop Drilling（プロップドリリング）」の泥沼と、それに伴う型定義の迷走だ。画面の深くまでデータを渡し...

やあ、調子はどうだい？日々、コンポーネントを量産してチケットを消化しまくっていることと思う。さて、今回はReactの「Propsによるデータの受け渡し」の核心、それも中級へのステップアップで必ず引っかかる「Default Propsとデフォ...

こんにちは。プロダクトの規模が膨らみ、デザインシステムや共通UIコンポーネントの整備に本格的に取り組むフェーズにくると、誰もが一度はこの壁にぶぶつかります。「ボタンやテキストのコンポーネントを作ったはいいものの、デザインの要望で『ここはやっ...

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

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

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

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

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

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

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