【フロントエンド】課題解決手法としてのAtomic Designの解釈と実装 | プロマリ | プログラミング教室 | リモートワーク | 港区

以下の記事はQiitaの@kei-tamiyaさんが記述した「課題解決手法としてのAtomic Designの解釈と実装」の紹介記事です。

前提

どんなプロジェクト？

• もともとVue.jsを用いて動いているアプリケーションを1からリファクタするプロジェクト
• 別リポジトリに、Nuxt.js, Typescript, Vue Apolloを使用して開発
• フロントエンドエンジニア3〜4人、デザイナー1人
• 全員リモートで、週1で30〜60minぐらいミーティングできる
• GraphQLのAPIサーバーはおよそある状態
• 主に大きなページごと（Userに関するページなど）をエンジニア1人が担当して開発する

もともと課題に感じていたこと・選定理由

もともとそこまで厳格に規約を決めずシンプルにVue.jsで開発をしていましたが、以下のような課題を感じていました。

• 複数のエンジニアがデザインカンプを見て各々の実装をすると、デザインや実装に統一感がなくなる
• 1つのVueファイルが多くの責務を持って肥大化してしまう
• 車輪の再発明しがち・逆に誰かがコンポーネント作るだろうと様子の見合いになって結局作らない/できても中途半端
• デザイナー・エンジニア間の共通言語を作ることで、将来の追加実装や他のプロダクトを開発する際にも応用できる状態にし、スムーズに開発できるようにしたい

そこで、Atomic Designを採用することでデザインや実装方針をある程度画一化し、品質を担保することを目指しました。

Atomic Designとは？

画面を「原子」や「分子」などの単位になぞらえてパーツやコンポーネントとして分割して、それらを組み合わせることで構築するUIデザイン手法です。