Vue.js からみた AtomicDesign

この記事はVue.js #3 Advent Calendar 2017の13日目の記事です

Atomic Design自体の記事は色々ありますので、この記事ではAtomicDesignで設計したコンポーネントをVue.jsで実際に運用してみて感じた事をまとめてみました

実際にどんな感じになるか

VueコンポーネントをAtomicDesignで実装するとだいたいこんな感じになります。

Atomの役割

  • 直接描画要素にデータをレンダリング
  • 描画要素のイベントを発行
  • 親要素からのデータ受け取り
  • 登場箇所がすごく多いのでステートレスを徹底する
  • Storeみちゃダメ絶対!

Moleculeの役割

  • Atomをレイアウト
  • 色の指定
  • 状態に応じてAtomのプロパティを変更したり、別なAtom要素を表示する
  • イベントを発行
  • Atomのイベントハンドリング
  • 親要素からのデータ受け取り
  • ステートレスが理想、どうしても入るものは吟味する
  • Storeみちゃダメ絶対!

Organismの役割

  • AtomやMoleculeの配置
  • 複数のTemplateから利用されても大丈夫に作る
  • 固定文言の配置
  • 文脈に沿ったStoreへのアクセス
  • イベントの発行
  • 子要素のイベントハンドリング
  • 親要素からのデータ受け取り(なるべく少ない情報が望ましい)
  • 子要素のレイアウト

Templateの役割

  • Atom, molecule, organismをレイアウト
  • 必要であれば複数のStoreへのアクセス
  • 子要素へのデータバインディング
  • 画面の状態管理

作業上気をつけている事

  • OrganismとTemplateとはStoreと密結合すればいいよ万歳!
  • 要素はいらなくなったら消しましょう
  • デザインと実装で粒度が合わなくなったら、なる早でどちらかを修正しましょうケースバイケースです。

プログラマーのメリット

  • Storeの依存先が明確になる
  • AtomとMoleculeは別プロダクへも転用できる
  • デザイナの作る構造が整ってくるので実装の安心感が違う

デザイナーのメリット

  • 別プロダクト作るときにプログラマーに速攻で実装してもらえる

難しいところ

  • デザイン = コンポーネント構造なので、慣れるまではデザイナがかなり大変
  • プログラマが違う粒度や名前で実装してしまうと、旨味が50%くらいになってしまう

デザインもやるプログラマです。 farmnoteで働いてます。

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store