実践！コンポーネント設計の勘所
コンポーネント設計への理解を深めたいエンジニア、より保守性・再利用性の高いコードを目指したいエンジニア向け
-
10
「設計の問い」を持ち続け、知識を実践に変えるには――React「コンポーネント設計」連載総仕上げ
最終回では、連載で深めてきた問いを整理し、現場でどう活かすか、そしてAI支援開発が広がる中でその問いが持つ意味を筆者の視点からまとめます。
-
9
SSRファーストで考えるReactコンポーネントの責務分担。実行環境別の設計3パターン
今回は、SSRファーストな設計思想と、それが現代のコンポーネント設計に与える影響を解説します。
-
8
Testing Trophyに基づくUIコンポーネントテスト戦略。Storybookをテスト基盤として使い倒す
今回は、Testing Trophyの考え方でテスト戦略を整理し、Storybookを使ったコンポーネントテストの実践について解説します。
-
7
React状態管理ライブラリの選択指針：「ローカル/グローバル/サーバー」における使い分けの基準
今回は、状態の種類に応じた実践的なライブラリ選択指針と、状態管理パターンの進化について解説します。
-
6
Reactコンポーネントの不要な再レンダリングを制御する。useMemo/useCallbackの使いどころとPropsの粒度管理
前回はCompound ComponentsパターンとTypeScriptによる型安全なProps設計について学びました。今回は、その設計を踏まえて、アプリケーションの実行時パフォーマンスに直結するPropsの最適化テクニックについて解説します。
-
5
Reactデザインパターン「Compound Components」実践ガイド。TypeScriptの型設計でPropsを意のままに操る
今回は、複雑なUIを柔軟に構築するCompound Componentsパターンと、TypeScriptによる型安全なProps設計について解説します。
-
4
App Router時代における「大規模React開発」のフォルダ設計術。Colocationによる関心の分離
今回は、React開発における機能別分類の理論を、Next.js App Routerとの連携やプロジェクト特性に応じた実装パターンを交えて解説します。
-
3
Reactフォルダ構造の最適解。コンポーネントの数に合わせて選ぶ基本方針
今回は「フォルダ設計」に焦点を当てます。フォルダ設計の基礎理論として、なぜ機能別分類が重要なのかを解説します。
-
2
Atomic Designの分類を見直す。3階層から始める、UI変更に強いコンポーネント設計
今回は、Atomic Designについて振り返り、現代のフロントエンド開発により適した実践的アプローチを提案します。
-
1
本稿では、UI開発の複雑化に対するアプローチとしてのコンポーネント設計と、その利点について解説します。