Nuxt.jsにおけるFLOCSSとAtomicDesignの比較及び相互変換

なんでこんな記事書いたか

社内では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