はてなブックマーク

これはほんの些細な違いに思えるかもしれませんが、大規模なシステムの場合、小さな歪みが次の歪みを生み、連鎖的に歪みが大きくなるので、基礎に近い部分の歪みを解消することは意外と重要です。 そのため日頃からこのような小さな歪みは何が原因で生まれているのか？歪みを無くして成立する形にするにはどうすれば良いのか？といったことを意識しています。 これまでの知見を踏まえると、上記の部分だけでも以下のことが言えます。 InputField は Field の派生である InputField だと Input 側にまとまって関心の千切りになってしまう UI層では後方一致のUI名でまとめたほうが望ましい これはアンチパターンを理解して package by feature への記事を読むとしっかり理解できます。 BCD Design において InputField は Base Case どっち？ Input

はじめに ニコニコ生放送でフロントエンドを担当している misuken です。 今回は関心が分散してしまう理由やその原理、この問題に対する適切な対処法を通して、package by feature の合理性や、そこで重要になってくる関心の単位などについて解説していきます。 規模の大きなものを扱っている方、分類が苦手な方、分類に関して悩みを感じている方には特に有用です。 前提 Reactでコンポーネントを管理する例で説明します 当然React以外の様々なディレクトリ構成でも応用できます BCD Design の概念も覚えておくとより体系的に理解できます 精度の高い明名ができれば、分類の効率も精度も上がります 現実世界で捉える関心の分散 通常、自宅や職場でトイレに行くとき、同じフロアや同じ建物内のトイレに行きます。 もしもトイレだけの建物が隣に建っていて、そこに行かなければならないとなったらと

はじめに Dwango でニコニコ生放送のフロント開発を担当している misuken です。 今回は TypeScript で T 型、つまり Generics(総称型)のオブジェクト(props 等)を spread operator で {...props} した際、事実上型チェックが機能しなくなる罠の話をしたいと思います。 Generics(総称型)のオブジェクトが対象なので T 以外の U などでも条件さえ整えば発生します。 React のコードを例に挙げますが、React だけで発生する問題ではないのでご注意ください。 Generics を使わない推論の例 まずは Generics を使わないパターンで期待通りに動作する例を見ていきます。 export const Component1: VFC<{ id?: string }> = (props) => { return ( <

はじめに Dwango でニコニコ生放送のフロント開発を担当している misuken です。 TypeScript で React.forwardRef を簡潔に書く方法を紹介します。 React では Hooks が登場して以来、関数コンポーネントが主流となり、 forwardRef を使用する機会も増えているのではないでしょうか。 そんな身近な forwardRef ですが、以下のような問題に悩まされている方も少なくないはずです。 型の渡し方がよくわからない 型の渡し方が面倒くさい たまに型が通らないときがある そんなことを感じながら使っていたら、この記事を参考にしてみてください。 時間の無い方ヘ react-frec を使うと、 forwardRef 周りをシンプルに書けますよというお話です。 forwardRef の書き方に満足していますか？ forwardRef の型パラメータに