Vue.js からみた AtomicDesign

【Vue.js Advent Calendar 2017 13日目】

Takanori Sugawara
Dec 18, 2017 · 3 min read

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

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

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

結論から言うと、AtomとMoleculeにStoreを持たせず。
OrganismsとTemplateあたりの粒度でStoreを利用するとIA的にも収まりがいい様に思えます。是非デザイナーにツッコミ入れましょう。

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

Atomの役割

色・タイポ・ボタン固定文言など

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

Moleculeの役割

Atomの組み合わせで独立した要素として成立する

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

Organismの役割

コンテキストが発生するのでその管理を行う
データはStoreから取得できるのでpropsはデータアクセスのためのキーの様なものが望ましい

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

Templateの役割

単体でページとして成立する構成にする

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

作業上気をつけている事

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

プログラマーのメリット

  • データやイベントのバケツリレーが最大でも4階層までになる
  • Storeの依存先が明確になる
  • AtomとMoleculeは別プロダクへも転用できる
  • デザイナの作る構造が整ってくるので実装の安心感が違う

デザイナーのメリット

  • 実装とデザインの整合性取れている場合、プロトタイピングレベルの速度で実装が可能になるのでPDCAサクサク回せる
  • 別プロダクト作るときにプログラマーに速攻で実装してもらえる

難しいところ

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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