Vue.js からみた AtomicDesign

【Vue.js Advent Calendar 2017 13日目】

この記事は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%くらいになってしまう