AtomicDesignって実際どうなん

フロントエンド開発において、実際に導入するにはこういう問題があるんじゃない？っていう個人の考えまとめです。

あんまり参考にならないかも。

AtomicDesignって何？

AtomicDesignはUIデザイン手法です。

Atoms、Molecules、Organisms、Templates、Pagesの５階層に分かれており、各階層を組み合わせて画面を作ります。

細かいことは調べてみてください。

Atomic Designを分かったつもりになる

とか、他にもたくさんあります。

（というか、もともとUIデザイン手法なので、全くそのまま使えるわけではないんですが）

結局何言いたいの

• フロント部分の実装が1人じゃないと厳しい。
• CSSを別で管理するとめんどくさすぎる。
• デザインとロジックは分離しよう。

理由

フロント部分の実装が1人じゃないと厳しい

• Molecules・Organismsの判別が個人で差が出る可能性がある。（完璧なルールがあれば別です）
• UIパーツが増えれば把握が難しくなっていく。

CSSを別で管理するとめんどくさすぎる

• CSSやSCSSファイルを別で管理しない方式の方が楽です。Vue.jsやCSS in JS形式にするといいです。

デザインとロジックは分離しよう

• ロジックはPagesかTemplatesから注入してあげよう。色々使い回しやすくなる。（ここら辺は作るプロダクトと要相談）

• クリーンアーキテクチャとか参考にしよう

  実装クリーンアーキテクチャ

結論

個人開発や小さなプロジェクトレベルなら大丈夫かなあと思いました。（もちろんルール制定を行なった上で）

人が多いと細かく分ける仕様上、どうしても把握できない部分は生まれると思います。

解決策としては、パーツ一覧を作成しておくといいのかな〜と思います。

ロジックとデザインは分離しとくと🙆‍♀️

(急な変更にも耐えやすいので、、、)