アトミックデザインの使い辛さを改善する

3.5K Views

March 13, 23

スライド概要

アトミックデザインの使い辛さを改善する

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

アトミックデザインの使い 辛さを改善する ampersand 2023.03.14

2.

自己紹介 はじめまして、新規事業に特化してエンジニアをしています ampersandと申します。 よろしくお願いします。 twitter:https://twitter.com/ampersand000/ ブログ:https://blog.ampersand.today/

3.

アトミックデザインって使い辛い・・・ ・AtomsとMoleculesの違いが分かりづらい ・Templatesってどう使ったらいい? ・OrganismsとTemplatesってどう違うの? ・props drillingが大変

4.

アトミックデザインを改造して運用を楽 にしたい!

5.

アトミックデザインの復習(1) AtomicDesignは小さいUIコンポーネントを組み合わせて大きなコンポーネントを作るためのデザイ ンフレームワークです。

6.

アトミックデザインの復習(2) AtomicDesignには以下の5つの粒度が存在します。 出典:https://bradfrost.com/blog/post/atomic-web-design/

7.

アトミックデザインの復習(3) AtomicDesignは小さいコンポーネントを組み合わせて大きいコンポーネントを作ります。 よって依存の方向性が存在します。

8.

アトミックデザインの復習(4) それぞれの層には関心ごとがあります。 層名 関心ごと 特徴 Pages プロダクトそのもの Templates 画面全体のレイアウト Organisms ユーザーの行動を促すコンテンツ templatesを介してコンテンツやルーティング をコンポーネントに接続する ページの雛形、具体的なコンポーネントを持 たない 独立して存在できるスタンドアローンなコンテ ンツを提供 Molecules 行動を阻害しない操作性 ユーザーの関心事を提供 Atoms デザインの統一性 コンポーネントの最小単位

9.

層が多い!分かりづらい!

10.

観点を変えてみる 観点を変えてコンテナ/プレゼンテーションパターンからアプロー チしてみます。

11.

コンテナ/プレゼンテーションパターンとは 見た目(プレゼンテーション )とロジック(コンテナ)を分離することで、関心ごとの分離を強制するパターン のこと コンテナ 何のデータがユーザーに表示されるかを管理するコンポーネント UIのロジックを担当する。 プレゼンテーション データがユーザーにどのように表示されるかを管理するコンポーネントのこと UIの表示を担当する 参考:https://www.patterns.dev/posts/presentational-container-pattern

12.

コンテナ/プレゼンテーションパターンとアト ミックデザインを対応させる 層名 関心ごと パターン Pages プロダクトそのもの コンテナ Templates 画面全体のレイアウト プレゼンテーション Organisms ユーザーの行動を促すコンテンツ プレゼンテーション Molecules 行動を阻害しない操作性 プレゼンテーション Atoms デザインの統一性 プレゼンテーション

13.

あれ、2層で良くない???

14.

適切な層数を考える アトミックデザインだと5層 コンテナ/プレゼンテーションパターンだと2層 2~5層の中で適正な層数を探っていきます

15.

層数の私感 5層:多い 5層 4層 3層 2層 4層:良い Pages Pages Pages Pages 3層:良い Templates Templates Templates 2層:少ない Organisms Organisms Molecules 結論:4or3層が良い Atoms elements elements Presentation

16.

結論 アトミックデザインの辛さはプレゼンテーション層をまとめることで解決できる Organisms層を含むなら4層、含まないなら3層 Organisms層をどう捉えるのか?で違う 個人的にはOrganisms層はあったほうがいいので4層が好み

17.

参考 出典: アトミックデザイン https://bradfrost.com/blog/post/atomic-web-design/ コンテナ/プレゼンテーショナルパターン https://www.patterns.dev/posts/presentational-container-pattern/ 過去記事 https://zenn.dev/ampersand/articles/5cce75cfb1fdda/