はじめに
前回の投稿でAtomic Designについてまとめました。
今回は実際に Atomic Design を用いた開発を実践した感想をまとめていきたいと思います。
行ったこと : Atomic Design をデザイン手法として用いた画面開発
使用言語 : Vue.js
対象者 : エンジニア初心者・Atomic Designを実践しようと考えているエンジニア／デザイナー
実際に開発して感じたこと（メリット編）
前回まとめた、Atomic Design のメリットデメリットをもとに、画面開発を通して感じたことを振り返っていきます。
★前回挙げたメリット
| No. | メリット |
|---|---|
| ① | スタイルを書く回数が減り、デザインの効率が格段に上がる |
| ② | コンポーネントを再利用できるため、ページデザインに統一感が生まれる |
| ③ | 各コンポーネントの役割を理解しやすい |
| ④ | データの流れを追いやすくなる |
①デザインの効率が格段に上がる
Atomic Design では画面要素を細かくコンポーネント化しています。ですので、一度作成したコンポーネントを配置するだけで、画面に表示することができました。特に効率が格段に上がった場面として、画面開発中にUIが追加された際に、すでに作成済みのコンポーネントを再利用することで、新たなパーツをすぐに作成※することができたという場面がありました。
※すでに作成済のボタンコンポーネントとテキストコンポーネントを組み合わせて、ボタンテキストコンポーネントをデザインできたこと
②ページデザインに統一感が生まれる
今回複数人で複数の画面開発を行いました。全員が同じ画面を実装したわけではないため、画面によって必要なコンポーネントは異なります。しかし、画面の実装方法が定まっていたため、誰が実装しても画面の統一感を保つことができました。実際に、手順に沿って開発するだけで初心者の自分でも綺麗な画面を実装することができました（修正ポイントはたくさんありましたが、一つ画面を実装できたことは自信になりました）。
③各コンポーネントの役割を理解しやすい
こちらはコンポーネント設計のルールを決めておくことが、こちらのメリットにつながると思いました。Atomic Designでは、Pages、template、Organisms、molecules、atomsと画面の構成要素を分割しています。プロジェクトでは、その構成要素をさらに細かく設計していくことで、このコンポーネントは何をするかが明確になると思います。実際に、今回Pagesでは何を実装する、organismsでは何を実装するを明確に設計していたため、この画面を作るときはどのコンポーネントを使えばよいかなどで迷うことはありませんでした。また命名規則などさらにこだわるポイントがあることも実際に体験して気づきました。
④データの流れを追いやすくなる
Atomic Designを用いることで、各コンポーネントの親子関係が理解できていたので、その結果データの流れは追いやすくなりました。またdevToolsを使い、デバックがしやすくなることで、データの流れを追うことが容易になることにつながったと思います。
実際に開発して感じたこと（デメリット編）
★前回挙げたデメリット
| No. | デメリット |
|---|---|
| ① | プロジェクトの規模によってはコンポーネントの数が増え過ぎて、管理が大変になる |
| ② | ルールを決めて管理・認識を統一しないと、コンポーネントを分割する粒度がバラバラになる |
①管理が大変になる
日々開発する中で新規コンポーネントが追加されることが多くあったため、最初に決めごとをチームで合意形成することが大切だと感じました。特に以下のポイントが大事になると思います。
・ 状態管理の方法（vuex）を決める
・ 状態管理の粒度を決める、共通認識を取る
・ 共通で利用する定数やファイルの配置などの運用方法を決める
②コンポーネントを分割する粒度がバラバラになる
こちらも上記の管理するためのポイントと同じです。
状態管理の粒度やファイルの運用方法の合意形成を最初にチームで取っておくことが大事だと感じました。それは、チームメンバーが増えた時にキャッチアップしやすくなったり、どの機能にどのコンポーネントを使うかの認識を合わせやすくなることにつながると思います。実際に、今回画面開発を進めていく中で、毎日新規で追加されたコンポーネントの使い方や、状態管理の方法をチームで共有する時間を取っていましたし、開発手法をまとめて日々アップデートすることも意識しました。
Atomic Designをうまく導入・運用していくために
まとめとして、Atomic Designをうまく導入・運用するポイントをまとめます。
・状態管理の方法・粒度を決めて合意形成を取る
・コンポーネント設計のルールを決める（命名規則など）
・各決め事を見える化し、アップデートする / メンバーとのコミュニケーションを怠らない
以上が今回実際にAtomic Designを実践してみて、今後うまく導入・運用していくためのポイントです。Atomic Designに限った話ではありませんが、決め事を作ること、決め事の見える化・コミュニケーションを怠らないことがよりよい開発につながるということを身をもって感じました。