フロントエンドのコンポーネント設計
コンポーネント指向
な
GUI
開発では、
カプセル化
の単位はコンポーネント
コンポーネント = HTML x a11y x CSS x JSの相互作用をカプセル化したもの
現代では
BEM
や
OOCSS
などの
構造化CSS設計
単体の技法を覚える優先度は低い
CSS設計の勘所
ベスト/グッドプラクティスよりもアンチパターンを優先的に理解する
というのが重要
コンポーネント指向
の
メンタルモデル
Fat component, skinny pages
GUIのデータアーキテクチャと状態管理の変遷
Reactコンポーネント同士の結合度を考える
宣言的UIのデータアーキテクチャはコンポーネントを中心に考える
宣言的UIのモジュラリティや堅牢性はコンポーネント設計で担保する
GUIでスケーラブルなアプリを書く秘訣は、良いコンポーネントを適切なタイミングで抽出することで、それ以上のことはない
モデリングとOOUIとFigmaとCSSとコンポーネント設計
コンポーネント設計の基礎
Higher-Order Component
Container/Presenterパターン
Render Props
renderHooksパターン
Layoutコンポーネント
Compoundコンポーネント
Passive View
Humble View
フロントエンドのデザインパターン
patterns.dev
プロジェクトを理解するためのReactデザインパターン
レイヤリング
PresentationDomainDataLayering
関心の分離はドメインとプレゼンテーションから考える(PDS)
SPAでのレイヤードアーキテクチャの考察と不確実性へのマインドセット
~design系
#デザインとは
ソフトウェア開発に関わる「●●デザイン」の分類｜usagimaru
実装
Atomic Design
Atomic ReDesign
Tree Design
Feature-Sliced Design
BCD Design
その他の参考
スケールしやすいReactフォルダ構造
フロントエンドのコンポーネントの責務分離のための方針とその効果について
モダンフロントエンドで始めるつらくないReactディレクトリ構成
私のフロントエンドディレクトリ構成・テスト観点 2022
Next.jsディレクトリ構成・設計再考（featuresが何を解決するか）
React 実践のために調べまくったこと書き綴り まとめメモ
共通言語としてのNext.jsテンプレート
📚参考文献
https://github.com/fumi-sagawa/next-simple-template/blob/main/docs/resources.md
ここもかなり情報集まってる
koushisa.icon
SVO型のパッケージングで機能的凝集を目指すオニオンアーキテクチャ