コンポーネント周りのディレクトリの棲み分けについて

[tomoyahiroe]

現在考えているcomponents/ 配下の構成

について意見を求めたい。

atoms/
  card/
    status.vue
    index.vue
  form/
    questions/ checkbox.vue
    questionContainer.vue

organisms/
  form/ section.vue

• questionContainer.vueの役割

「questions/配下に存在するquestionコンポーネントのうち一つを選択すること」(ロジック)
containerという名前は、Reactでよく使われているらしい「Presentation Container Pattern」から取ってきた。
ロジックをcontainerに、UIをpresentationに記述するらしい。

• atomsとorganismsとは？

Atomic designという、コンポーネントを以下の五つに分類する考え方

1. Atoms
2. Modules
3. Organisms
4. Templates
5. Pages

フロントのフレームワークと相性が良いためアーキテクチャとして扱われることが多い。
採用方法は次の章で。

atomic design を参考にしたNuxtプロジェクトの構成

(参考記事)

(atoms/ modules/ organisms/ templates/ pages)

• Pages と Templates

pages はそのまま pages 配下に、templates は layouts と対応させる。
APIを叩いたりデータを取得するのはここ

• Organisms

例)components/organisms/form/section.vue
Modules や Atoms で構成される独立したページの部品
Vuex による状態管理の使用やAPIを叩いたりはorganisms以上の大きいコンポーネントでのみ行う

• Atoms と Modules

小さい部品。
components/atoms 配下に置く。
AtomsとModulesは分けるのが難しいのであえて同じ階層にまとめる。
ここではprops/emitsを使用したデータのやり取りのみ行う。
状態管理やAPIを叩いたりはしない。(API周りの話は別にディスカッションを設けたい！)