アトミックデザインの使い辛さを改善する
5.5K Views
March 13, 23
スライド概要
アトミックデザインの使い辛さを改善する
関連スライド
各ページのテキスト
アトミックデザインの使い 辛さを改善する ampersand 2023.03.14
自己紹介 はじめまして、新規事業に特化してエンジニアをしています ampersandと申します。 よろしくお願いします。 twitter：https://twitter.com/ampersand000/ ブログ：https://blog.ampersand.today/
アトミックデザインって使い辛い・・・ ・AtomsとMoleculesの違いが分かりづらい ・Templatesってどう使ったらいい？ ・OrganismsとTemplatesってどう違うの？ ・props drillingが大変
アトミックデザインを改造して運用を楽 にしたい！
アトミックデザインの復習(1) AtomicDesignは小さいUIコンポーネントを組み合わせて大きなコンポーネントを作るためのデザイ ンフレームワークです。
アトミックデザインの復習(2) AtomicDesignには以下の5つの粒度が存在します。 出典：https://bradfrost.com/blog/post/atomic-web-design/
アトミックデザインの復習(3) AtomicDesignは小さいコンポーネントを組み合わせて大きいコンポーネントを作ります。 よって依存の方向性が存在します。
アトミックデザインの復習(4) それぞれの層には関心ごとがあります。 層名 関心ごと 特徴 Pages プロダクトそのもの Templates 画面全体のレイアウト Organisms ユーザーの行動を促すコンテンツ templatesを介してコンテンツやルーティング をコンポーネントに接続する ページの雛形、具体的なコンポーネントを持 たない 独立して存在できるスタンドアローンなコンテ ンツを提供 Molecules 行動を阻害しない操作性 ユーザーの関心事を提供 Atoms デザインの統一性 コンポーネントの最小単位
層が多い！分かりづらい！
観点を変えてみる 観点を変えてコンテナ/プレゼンテーションパターンからアプロー チしてみます。
コンテナ/プレゼンテーションパターンとは 見た目(プレゼンテーション )とロジック(コンテナ)を分離することで、関心ごとの分離を強制するパターン のこと コンテナ 何のデータがユーザーに表示されるかを管理するコンポーネント UIのロジックを担当する。 プレゼンテーション データがユーザーにどのように表示されるかを管理するコンポーネントのこと UIの表示を担当する 参考：https://www.patterns.dev/posts/presentational-container-pattern
コンテナ/プレゼンテーションパターンとアト ミックデザインを対応させる 層名 関心ごと パターン Pages プロダクトそのもの コンテナ Templates 画面全体のレイアウト プレゼンテーション Organisms ユーザーの行動を促すコンテンツ プレゼンテーション Molecules 行動を阻害しない操作性 プレゼンテーション Atoms デザインの統一性 プレゼンテーション
あれ、2層で良くない???
適切な層数を考える アトミックデザインだと5層 コンテナ/プレゼンテーションパターンだと2層 2~5層の中で適正な層数を探っていきます
層数の私感 5層：多い 5層 4層 3層 2層 4層：良い Pages Pages Pages Pages 3層：良い Templates Templates Templates 2層：少ない Organisms Organisms Molecules 結論：4or3層が良い Atoms elements elements Presentation
結論 アトミックデザインの辛さはプレゼンテーション層をまとめることで解決できる Organisms層を含むなら4層、含まないなら3層 Organisms層をどう捉えるのか？で違う 個人的にはOrganisms層はあったほうがいいので4層が好み
参考 出典： アトミックデザイン https://bradfrost.com/blog/post/atomic-web-design/ コンテナ/プレゼンテーショナルパターン https://www.patterns.dev/posts/presentational-container-pattern/ 過去記事 https://zenn.dev/ampersand/articles/5cce75cfb1fdda/