66924


Nuxt.jsのstore配下のディレクトリ構成について、  
どのようなのがいいのか調べているのですが、  
どのようなVuexを使用する場合どのような単位でディレクトリを  
分けるのが一般的（理想的？）なのでしょうか？

> <https://qiita.com/kazu_death/items/ad35d2a40c3aea008b30>
[code]

    /store/a/b/c/c-child.js
    
[/code]

> <https://qiita.com/yoshinbo/items/1cd6464a3655230223b1>
[code]

    store/models/xxx
    store/pages/xxx
    
[/code]

上記のようなサイトを見かけました。  
前者はURLに沿うような形でディレクトリを切っていて、  
こういうつくりもいいかなと思ったんですが、  
後者のmodelsとpagesがいまいちどういう意図なのか理解できず、  
まだどのように分けるべきか考え中です。

なにかアドバイス頂けると助かります。


CC BY-SA 4.0
2020-05-23T11:28:14.817
66916
2020-05-24T03:38:08.443
2020-05-24T03:38:08.443
7997
12842
question
javascript vue.js nuxt.js
Nuxt.jsのstore配下のディレクトリ構成について


ディレクトリ構成に対する回答は無数にあります。また、どれが一般的で、どれが理想的かもユースケース次第になります。

ディレクトリ設計やStore/State/Actionなどの分割単位を決定するには、今実装している対象（サービスや業務ロジック）に対する深い理解が必要です。これは小手先のテクニックでできるようなものではなく、とても多くの時間をかけて考える部類に入る内容になります。

なぜならば、と続けたいところですがそれ自体を説明するためにはたくさんの文献を読む必要があります。  
実装対象に対する効果的なディレクトリ構造を構築するための方法はありますが、この方法は「これをしないほうがいい」という、誰もが容易に踏むアンチパターンを回避することです。

抽象的な説明が続きますが、フロントエンド（Webに限らずiOSやAndroidも）のエンジニアリングに携わる方は、この抽象から具体的な実装に落とし込む仕事を行っています。

> なにかアドバイス頂けると助かります。

というような回答を求めていらっしゃるので、ある程度具体的な回答をしておくと、小規模なアプリケーションを実装するのであれば初期ディレクトリにフラットに並べておくだけでも十分でしょう。中規模〜大規模にスケールするような場合（例えばStackOverflowのエディター機能など）、Atomic
DesignにならうOrganismsの単位に応じてStoreを階層構造を構築します。

Single Page
Applicationのフロントエンドが増えてきてからよりドメインや業務ロジックがフロントエンドに集まるようになってきました。その影響でバックエンドと呼ばれる領域で利用されてきたソフトウェアの設計方法がフロントエンドに輸入されているので（例えば今回のmodelsとか）、領域の垣根を超えてさまざま情報を得ることをおすすめします。  
たとえ、どんな設計が来てもユースケース単位の解になってしまうので、最終的に自分の実装に対する解を見つけるには関係者と議論し考え抜かねばなりません。

## 参考

### ソフトウェア一般的な範囲

一般的なところ書くと、以下のようなキーワードで色々と探してみると良いでしょう。ここで回答できる範囲の内容ではないことがわかるかと思います。

  * [ドメイン駆動設計](https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%A7%86%E5%8B%95%E8%A8%AD%E8%A8%88)
  * [クリーンアーキテクチャ](https://en.wikipedia.org/wiki/Robert_C._Martin)
  * [多層アーキテクチャ](https://ja.wikipedia.org/wiki/%E5%A4%9A%E5%B1%A4%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3)

### Webフロントエンドの範囲

情報源はたくさんありますが、固いところだと、カンファレンスや、Reactの作者がブログに、Atomic
Desingの記事など、こういったところから知識を吸収することもあります。

  * [JSConf](https://jsconf.com/)などのカンファレンス資料など
  * [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
  * [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)


CC BY-SA 4.0
2020-05-23T14:43:01.463
66924
2020-05-23T14:43:01.463
7997
66916
answer