Nuxt.jsの作業ディレクトリを整理する理由
Nuxt.jsで開発していると、ルート直下にフォルダとファイルが混在しまくってめっちゃカオス化します。
また、がっつり作業するようなコアファイル・フォルダ関係なく混在するので、脳内のメモリがどんどん食われていくんですよね…
開発が進めば進むほどディレクトリ構成がややこしくなるし、「後で変えよう!!」と言った場合にディレクトリ構成を変えるのも面倒です。
それに、共同開発してる場合だと、コンフリクトめっちゃ起きたりすると、なおさら面倒くさいみたいなこと往々にしてあるんですよね。(というか結構面倒くさかった。)
Nuxt.jsの作業ディレクトリを整理してみた
before
Nuxt.jsで普通に開発していると、下のディレクトリ構成のような感じで、ルート直下にフォルダとファイルが混在します。
app_name
├──assets
├──components
├──layouts
├──middleware
├──pages
├──plugins
├──static
├──store
├──nuxt.config.js
├──package.json
├──yarn.lock
//一部割愛
これらのディレクトリを以下のように整理します。
after
app_name
├──app
│ ├──assets
│ ├──components
│ ├──layouts
│ ├──middleware
│ ├──pages
│ ├──plugins
│ ├──static
│ ├──store
├──nuxt.config.js
├──package.json
├──yarn.lock
//一部割愛
ぶっちゃけツリーを文字で眺めても分かりづらいなと思ったので、2枚画像を貼り付けておきます。
before
after
これで、スッキリ度合いは伝わっていただけたかなと思ってます。
ディレクトリの構成は公式ドキュメントを参考にしました。
参考：https://ja.nuxtjs.org/api/configuration-srcdir
ただ、現在のプロジェクトではNuxt.jsとは、別でサーバーを立てるのでclientという切り分けは適してないなと思ったので、公式ドキュメントをまんま踏襲はしてません。
「サーバー側は別で作るし、Nuxt.jsで1つのアプリを構築しているようなもんだよな〜」と思ったので、もうappでいいかなと思って、そういう命名にしています。(同じプロジェクトの別案件で、Nuxtではありませんが、Flutterを使ってBLoCパターンで設計した際に、appという切り分けをしていたので踏襲したという感じです。)
ただ、ここの命名についてですが、下の引用の通りsrcとかも適切だよな〜と思いました。
ビルドを行うタイプの言語やプロジェクトではソースコードはsrc/配下に置くのが当たり前
引用：https://log.pocka.io/posts/nuxt-website-my-fav-config/
作業ディレクトリを整理して実行してもエラーが出る
作業ディレクトリを整理してyarn devやnpm run devとかで起動しても以下のようなエラーが出ます。
#実行結果
ERROR Could not compile template /../../../../../node_modules/@nuxt/vue-app/template/App.js: Cannot resolve "~/../../..
.css" from "/../../../../../../../...scss"
at node_modules/@nuxt/builder/dist/builder.js:6013:17
at async Promise.all (index 1)
at async Builder.compileTemplates (node_modules/@nuxt/builder/dist/builder.js:5991:5)
at async Builder.generateRoutesAndFiles (node_modules/@nuxt/builder/dist/builder.js:5677:5)
at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:5589:5)
at async Object._buildDev (node_modules/@nuxt/cli/dist/cli-dev.js:98:5)
at async Object.startDev (node_modules/@nuxt/cli/dist/cli-dev.js:56:7)
at async Object.run (node_modules/@nuxt/cli/dist/cli-dev.js:43:5)
at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-command.js:2575:7)
// エラーログは適当にぼかしてます。
Nuxt.jsのsrcDirで作業ディレクトリを整理してもアプリ起動出来るようにする
結論、nuxt.config.jsにsrcDirで切り分けたディレクトリ名(app/)を指定してあげれば、アプリを起動することができます。
実際にソースコードを見てみましょう。
exportdefault{// 省略srcDir:'app/'}参考：https://ja.nuxtjs.org/api/configuration-srcdir/
これで、Nuxt.jsでディレクトリを整理しても起動するはずです。
yarn devやnpm run devで起動してみましょう。
$ yarn dev
yarn run v1.15.2
$ nuxt
╭───────────────────────────────────────────────╮
│ │
│ Nuxt.js v2.10.2 │
│ Running in development mode (universal) │
│ │
│ Listening on: http://192.168.100.61:3000/ │
│ │
╰───────────────────────────────────────────────╯
ℹ Preparing project for development 19:41:34
ℹ Initial build may take a while 19:41:34
✔ Builder initialized 19:41:34
✔ Nuxt files generated 19:41:34
✔ Client
Compiled successfully in 4.40s
✔ Server
Compiled successfully in 3.76s
これで起動できました。
Nuxt.jsのsrcDirについて掘り下げ
srcDirの概要は以下です。
srcDir
このオプションで、Nuxt.js アプリケーションのソースディレクトリを指定できます。
引用：https://ja.nuxtjs.org/guide/configuration/
ソースディレクトリが何かを説明していない以上、「ソースディレクトリを指定できます。」と言われても…って感じ。
srcDirの説明をしているページだけでは、何をやってるかイマイチ分からなかったことはやや不満…
ただ、以下の説明で使い道についてはある程度理解できました。
もしアプリケーションのパスを node_modules なしで設定したいときは srcDir オプション を使ってください。
引用：https://ja.nuxtjs.org/api/configuration-rootdir
アプリケーションのパスを設定する時に、Nuxt.jsが用意してるプロパティで設定できるのは便利だな〜という感じです。
また、node_modulesは、npmやyarnでinstallしたモジュール群が格納されています。
この辺をいじって、意味不明なバグ起きるとかになっても嫌なので触りません。
srcDirとrootDirのプロパティの関係性
以下に、srcDirとrootDirのプロパティをまとめてみました。
API: srcDir プロパティ
型: String
デフォルト: rootDir の値
引用：https://ja.nuxtjs.org/api/configuration-srcdir
srcDirはデフォルトだとrootDirの値となるようです。
API: rootDir プロパティ
型: String
デフォルト: process.cwd()Nuxt.js アプリケーションのワークスペースを指定します。
このプロパティは nuxt コマンド により上書きされ、そのコマンドの引数がセットされます（例: nuxt my-app/ を実行すると rootDir に my-app/ が絶対パス付きでセットされます）
引用：https://ja.nuxtjs.org/api/configuration-rootdir
rootDirで何もパスを指定しなかった場合は、process.cwd()が呼び出されます。
process.cwd()の役割は以下となります。
原文
The process.cwd() method returns the current working directory of the Node.js process.
引用：https://nodejs.org/api/process.html#process_process_cwd
直訳
process.cwd（）メソッドは、Node.jsプロセスの現在の作業ディレクトリを返します。
また、rootDirのコマンド引数の渡し方は以下です。
$ yarn dev app/
yarn run v1.15.2
$ nuxt app/
╭─────────────────────────────────────────────╮
│ │
│ Nuxt.js v2.10.2 │
│ Running in development mode (universal) │
│ │
│ Listening on: http://192.168.11.9:3000/ │
│ │
╰─────────────────────────────────────────────╯
ℹ Preparing project for development 01:24:31
ℹ Initial build may take a while 01:24:31
✔ Builder initialized 01:24:31
✔ Nuxt files generated 01:24:31
✔ Client
Compiled successfully in 4.51s
✔ Server
Compiled successfully in 4.86s
ℹ Waiting for file changes 01:24:37
ℹ Memory usage: 223 MB (RSS: 299 MB)
nuxt.config.jsでsrcDirにパスを指定しなくてもアプリは起動しました。
毎回コマンド叩くのはさすがに勘弁なので、srcDirを大人しく設定すればいいかな〜という感じです。
ちなみに、nuxt.config.jsでrootDirにパスを指定しても普通に起動します。
「rootDirかsrcDirどちらでパスを指定すればいいのか」について、ProsConsを出すのは骨が折れるし、本質じゃないので諦めました。
そのため、脳死でsrcDirを使います。