[プロダクトデザイン] Atomic Design
Atomic Design
- UIコンポーネントを再利用可能にするための考え方（小さな部品からおきな画面を作る考え方）
- エンジニアよりもどちらかというとデザイナのためのプロダクト設計（エンジニアが使いやすいと思う物とは違うものである）
- フレームワークによっても変わるからFWでどう変わるか最初に調べよう
ポイント
無理に5つ分けなくても良い
- 無理に5つ分けなくても良い
- ディレクトリ構成で悩むくらいならAtoms、Moleculesだけでも良い
Atoms（原子）
UIを構成するための最小単位となるのが「原子」です。ボタン・カラーパレット、フォント・アニメーション・ラベル・入力部分などが原子に当てはまります。UIデザインに必要となる原子を事前に作り、組み合わせていくことでページを作り上げていきます。
Molecules（分子）
複数のAtomsを組み合わせて作る構成物が「分子」です。たとえば、原子の「ラベル」「インプット」「ボタン」などを組み合わせることで、分子である「入力ボタン」として機能するようになります。
分子は一度作ってしまえばほかのページでも再利用が可能なため、使い勝手がよいのが特徴です。ただし、分子の作り方は担当者の個性がでる部分でもあるため、自社のサイトに最適な分子であるかどうかの確認が重要です。
Organisms（有機体）
原子や分子を組み合わせて作られるのが「有機体」です。有機体はヘッダーやフッターのような複雑な機能を備えたパーツで、サイト管理者の要望を組み込めることができる部分です。
有機体のレベルまでくると、機能性に加えてデザイン性が重要になってくるため、デザイナーのセンスも必要なります。
Templates（テンプレート）
原子や分子、有機体を組み合わせ、サイト全体の構成を作るのが「テンプレート」です。テンプレートは、ヘッダーやフッター、ホームページのテキスト配置、画像配置、検索機能などが組み込まれた構造物です。
テンプレートのレベルにまで完成されていれば、テンプレートを元に複数のサイトを作り上げたり、テンプレート自体を販売したりできるようになります。
Pages（ページ）
テンプレートに独自のコンテンツを入力したものがアトミックデザインの最終形である「ページ」です。文章や画像、さまざまな情報を入力し、Web上で公開できるように準備を進めていきます。
コンポーネントをステートレスに保つ
コンポーネントにはできるだけデータを持たせない（ステートレス）（親からpropで受け取る→テストが圧倒的に楽になる）
プレゼンテーショナルとそれ以外に役割分担する
見た目専用のコンポーネント（初期表示時apiを飛ばすなどのロジックを持たせない）
例：Moleculesはイベントを飛ばすだけ、ハンドリングするのは、親（Organisms→・・・Pages）
エンジニアが気にするポイント
再利用しやすいか
役割分担がされているか
変更に柔軟か
おまけ
ファイル名
vuexに格納する機能があるファイルのprefixにcontainerとつける
Discussion