uiuifree.com

- サイト制作のノウハウと最適化を目指して-

2020.8.8Vue.jsとAtomicデザインを組み合わせた開発手法

Vue.jsとAtomicデザインを組み合わせた開発手法

Vue.jsやNuxt.jsを実務で利用するようになり約3年、自分の中のベストプラクティスがまとまってきたので紹介していきます。

Atomicデザインとは

コンポーネント・パーツ単位でデザイン定義するインターフェースデザイン設計論。 Vue.jsやReact.jsなどで開発してるデザイナー・エンジニアから近年注目を浴びています。 https://atomicdesign.bradfrost.com/table-of-contents/

Vue.jsとAtomicデザイン

Vueで設計するのに「Atomicデザインが良さそう!」と思ってVue.jsに導入したい。デザインに関しては銀の弾丸になるのか?とも言われていて私もAtomicデザインを導入しました。 導入してからは何度も試行錯誤を重ね設計し調べ、結果Atomicデザインはデザイン設計とはしては有能ですが機能設計と組み合わせた時に無理が出てしまうものでもありました。

反省

  • Storyboxに囚われ過ぎた
  • データの取得をPagesのみに拘ってしていた。
  • 共通処理をmixinで再利用したときに、導線によっての分岐を制御しきれず。
  • 後のGA集計における、ありとあらゆる箇所にpropsとクリックイベントが仕込まれる
  • Molecules(分子)が使われなさすぎる。
  • 1ファイル1DOMの関係上、DOM構造が深くなりすぎる(Vue3.xで解決予定)
  • CSSファイルの肥大化
  • ABテストの時のコンポーネント命名が悲しいことになる

Atomicデザインの良かったとこ

最初に反省点を長々と書かせて頂きましたがAtomicデザインを使わないってことではありません。 私のチームではAtomicデザインの利点をVueに落とし込んで開発をしています。

ディレクトリ構成

Vue.js/Nuxt.jsで開発を始めた時に一番始めに作るディレクトリです。

atomic2

ディレクトリ 補足
01-atoms inputやボタンなど単体のパーツ
02-molecules
03-organisims 主要パーツ
04-templates ワイヤー
05-pages URL/Route単位
09-layout サイト内の共通レイアウト

データ構造的には、05-pagesから01-atomsに向かってデータを流し込む構成にしています。 ファイルの読み込みは数字の大きいものを読み込むことは禁止しています。それぞれ役割が違い、コンポーネントのデータの流れや大小関係をはっきりさせるためです。

Pages

Routerで定義する初期読み込みのファイル、各画面の初期描画に必要なデータやmetaタグの指定を行います。

初期表示で必要なものはpagesで取得を行いorganisimsで描画処理することでデータの流し込みの一貫性を保ちます。 各画面共通で使うものまでpagesで取得する必要があるのか?と言われると基本はNOです、例えば都道府県検索から市区町村のデータを取得したりヘッダーで件数カウントしたい時までpagesで取得してると処理が肥大化して仕方がないです。このケースではorganisimsでのみ取得を許容します。

Templates

Templateは要するにワイヤーを示します。サイトのコンテンツ(organisims)をまとめデータを流し込むことのみ行います。デザイン(CSS)を直接編集することは行いません。

Organisims

デザインを構成する要素、検索ボックスやヘッダーなど意味のある単位でコンポーネントをまとめます。 繰り返し処理が出てきたら同じく別コンポーネントに分けましょう、ロジックを差し込む時に別要素を気にすることが無くなり楽になります。 ここではCSSを編集したり、API通信で必要最低限のデータを取得しても良いでしょう。似たようなコンポーネントができた場合はmixinを使わず、外部ファイルに関数などまとめると再利用しやすいです、Composition APIを使えばネームスペースも使えるのでより管理しやすいですね。

atomic

Composition API

Composition APIはVue 3で導入される予定のVueの新しいAPIで、共通処理を関数としてまとめてくれる便利な代物。 https://github.com/vuejs/composition-api

Nuxt.jsでも正式ではありませんがサポートしており、導入することで煩雑になってきたcreated/watch/methodsなどのロジックを綺麗にまとめれます。非常に使い勝手が良いです。

Composition APIのダメな点

  • 現在1.xのベータ版で正式リリースが済んでいない
  • PHPStormなどのIDE補完が完全でない(特にNuxt.jsにインストールした場合)

まとめ

Vueで開発する時にはAtomicデザインの概念を取り入れつつプロジェクトに合った使い方、ルール決めをすることが重要です。またAtomicデザインの短所であるロジックの補完はComposition APIを使うことで一定カバーできるのではないかと現在考えプロジェクトでも進めています。

PROFILE

このサイトを運営してるuiuifreeです。
渋谷のベンチャー企業で2年ほど新規事業を担当した後にフリーランスエンジニアにキャリア転換。
求人サイトの開発が多くエンジニア/看護師/保育士などの分野でサイトを運営しています。

アウトプット中の技術

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)