1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

AtomicDesignって実際どうなん

Last updated at Posted at 2021-07-09

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

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

AtomicDesignって何?

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

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

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

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

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

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

結局何言いたいの

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

理由

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

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

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

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

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

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

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

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

結論

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

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

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

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

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?