なんでこんな記事書いたか
社内ではFEとBEの間をウロチョロしていて、
そこまでhtmlコーディングをしない私。
社内のガチFEさんたちがhtmlで静的ファイルを作る場合は
FLOCSSが多く、んじゃあ今後Nuxtのコーディングルールもそっちに合わせよか
とやり出してはみたものの、まったくしっくりいかず。
やはり思想的には個人的にAtomicDesignのほうがしっくりくるので、
AtomicDesignと柴犬でもわかるFLOCSSを読み直しながら
相互対応表を作り、今後他のエンジニアがNuxtプロジェクトに関わるときに
コンポーネント設計に迷いが出ないようにしようとおもったわけですさ。
FLOCSSかAtomicDesignか
Nuxtにおけるコンポーネント設計におけるディレクトリ構造が
FLOCSSよりはAtomicDesignの方がシンプルかつわかりやすいもの
であるため、今後Nuxt.jsにおける開発に限っては、
AtomicDesignの思想でコンポーネントを分類する方が良いと感じている。
└── nuxt-sample //プロジェクトディレクトリ
├── nuxt.config.js
├── src
│ ├── assets
│ ├── components
│ │ ├── atoms
│ │ ├── molecules
│ │ ├── organisms
│ │ └── templates
│ ├── layouts
│ ├── pages
│ ├── plugins
│ ├── static
│ ├── store
│ └── types
├── storybook
└── test
理由
Nuxt.jsの基本ディレクトリは以下のようになっている。
└── src
├── assets
├── components
├── layouts
└── pages
そこに、FLOCSSのディレクトリ基準を当て込むと以下のような状態になる。
└── src
├── assets //元からあるディレクトリ
├── components //元からあるディレクトリ
│ ├── layout
│ └── object
│ ├── component
│ ├── project
│ └── utility
├── layouts //元からあるディレクトリ
└── pages //元からあるディレクトリ
この状態だと、layoutが複数あったり、pagesとprojectの違いが分かりづらいなどの問題が発生する。
対策、FLOCSSからAtomicDesignsに乗り換える場合の分類目安
FLOCSS
AtomicDesign
備考
Foundation
assets/css
scssとして用意し、あらかじめロードする。
Object/Utility
該当なし
Tailwind CSSで代用する。Tailwind CSSを利用しない場合は、scssファイルにまとめた上で、assets/cssに格納する。
Object/Componentのなかでもより原始的なもの
component/atoms
h2やbuttonなどのよりプリミティブなコンポーネント。他のコンポーネントに依存することがあってはならない。
Object/ComponentのなかでもComponentを含むもの
component/molecules
atomsが複数連なってなるコンポーネント。独立したコンポーネントというよりは、OrganismsやLayout内の一要素となるもの。
Object/Project
component/organisms
moleculesやatomsを含む、プロジェクト固有のパターンであり、汎用性が低いもの。
Layout
component/templates
大小問わず、レイアウトテンプレートは全てここに格納する。
該当なし
pages
ページのルーティング。
└── nuxt-sample //プロジェクトディレクトリ
├── nuxt.config.js
├── src
│ ├── assets
│ │ └── css //Foundation
│ ├── components
│ │ ├── atoms //Object/Component
│ │ ├── molecules //Object/Component
│ │ ├── organisms //Object/Project
│ │ └── templates //Layout
│ ├── layouts
│ ├── pages
│ ├── plugins
│ ├── static
│ ├── store
│ └── types
├── storybook
└── test
参考書籍
Atomic Design ～堅牢で使いやすいUIを効率良く設計する
柴犬でもわかるFLOCSS
↧