Nuxtを採用できないプロジェクトでNuxtのアーキテクチャを採用する

この記事はNuxt.js Advent Calendar 2018の7日目の記事です。

概要

かめぽんさんの記事ではNuxtというアーキテクトを組織に適応するメリットを語ってくれていますが、僕はここでは「Nuxtというアーキテクチャを技術的にどう持ち込むか」を考え、試している内容をアウトプットします。

Nuxtを使うメリット

大きく分けて以下かなと。

• 簡単にSSRできる
• 簡単に静的サイトが作れる
• チームにVueのアーキテクチャを提供してくれる

今回話したいのは3つ目の「チームにVueのアーキテクチャを提供してくれる」です。

Nuxtのアーキテクチャって？

VueRouter Vuexを内包し、components pages layoutsに分類されるViewから構成されるVue主体のフロントエンドアーキテクチャ。

アーキテクチャのみを採用する理由

• pages componentsにViewを分割することで、役割を明確に分離できる
  • React的にpagesをContainerComponent, componentsをPresentationalComponentとみなせる
  • AtomicDesign的にpagesをPages, componentsをAtoms, Molecules, Organisms, Templatesとみなせる
• pagesとルーティングを結合させることで、手間をへらす
• Vuexをモジュールに分割することで巨大なストアの作成リスクを減らす

これらが「Nuxtと同じ」の一言で片付くとしたら、楽じゃありませんか？

Nuxtを使わずにNuxtのアーキテクチャを実現する

ルーティング

vue-cli-auto-routingを用いることで、VueCLI(または自前のWebPackでも)
NuxtJSと同等のディレクトリ構造とルーティングを用いることができる。

利用者、チームは以下のNuxtのガイドラインを参照すればよいのです。

• layouts
• pages

ディレクトリ構造

layouts, pagesがVueCLIによって提供されたことにより、
以下のディレクトリについてもWebPackのみの設定で提供が可能になります。

• assets
• components

また、エントリーファイルを中心に、
middlewareやpluginといった機構を用意することも可能です。

データストア

一番のボトルネックはここで、
現状NuxtのVuexの自動解決を提供してくれるライブラリが存在しない。

前項でpluginを提供できると言ったな？ Vuexに関しては嘘だ。
完全に隠蔽することはできません。

NuxtJSのストアの実装
から、Vuexストアの実装を模索するしかないというのが現状です。（そうじゃなかったら教えてください）

しかし、待って欲しい。
本当にそこまで厳密な実装が必要なのか？

「構造」だけにフォーカスすれば、このくらいの実装でも大丈夫かもしれない。
本格的に隠蔽が必要になったら、vue-cli-auto-storeを作りましょう。

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = () => {}

import * as moduleA from "./module-a"
import * as moduleB from "./module-b"

export default new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
})

規約としてのNuxt

これまで、Vueに関するディレクトリ構造やアーキテクチャを多くの人が模索し、悩んできたはずで、
Nuxtはそれに対する答えの一つだと思っています。

アーキテクチャを問題に対応する構造として考えたとき、
Nuxtの構造は多くの場合において最低限な抽象化を果たしています。

明確な理由を説明できないのであれば、
すでにあるアーキテクチャに乗っておくことで、より本質的な問題と向き合う時間を確保できるのではないか？

Nuxtというライブラリを導入できないチームであっても、
複数人、それもフロントエンドアーキテクチャに強い人がリードを取り続けられない環境において、
Nuxtというアーキテクチャは非常に強力なツールになりえると僕は考えます。

ぜひ、一度Nuxtのアーキテクチャを適応できないかを考えてみて欲しい。

まとめ

Nuxtを使えないプロジェクトで、Nuxtのアーキテクチャを採用する方法をご紹介しました。

昨日の組織構築としてのNuxt.jsの可能性についての記事は非常に良い記事で、Nuxtは組織にもポジティブな影響を与えられると僕も考えています。

アーキテクチャの議論は空中戦になりやすく、明確な答えが見つけづらいものです。
そういう悩みを抱えている方は、Nuxtを採用するかどうかは置いといて、一度構造を知ってそれを土台に「Vueでもこういうことができるんですよ」というふうに話をつなげてもらえると、道が拓けるかもしれません。