Nuxt.js で Atomic Design ベースの設計をする時にコンポーネントのあり方

備忘録 Vue.js Nuxt.js Atomic Design

備忘録。

Nuxt.js で Atomic design を実践する際の各コンポーネントの役割が自分の中でまとまってきたので書き残す。

Atom

  • button や input などの単一の HTML 要素をラップしたもの
    • これによってアプリ全体で共通の CSS が適用できる
  • button をラップした場合、AppButton などの名前にする
  • 使い勝手は変えないように、極力元と同じイベントを emit するようにする
    • 例: button は click イベントを emit する
  • ビジネスロジックは入れない

Molecules

  • Atoms の組み合わせ
  • よくある例だと入力フォームとボタンをセットにした検索フォームなどが該当する
  • 位置づけ的には「よく見かける UI パーツ」
  • ここにもまだビジネスロジックは入れない方がいいと思う

Organisms

  • Atom, Molecules の組み合わせで作る
  • 位置づけ的には「意味のある実際の画面要素」
    • ヘッダ, 検索結果表示部分など
  • もう一つの位置づけとして、「Molecules にビジネスロジックを吹き込む」

Templates, Pages

Nuxt.js の場合、templates と pages が相当する（と思う）。

所感

  • 「ビジネスロジックが入るか入らないか」という観点で考えると Organisms とそれ以下の境界は強く意識した方がいいと思う
    • 逆に Atoms と Molecules の境界は多少手を抜いてもいいかも？
  • ビジネスロジックの有無という境界の引き方が正しいのかはわからないが、今のところはしっくり来ている
    • そもそもデザインのためのシステムなので、そういう考え方はないのかも？