Vue.js
nuxt.js
Nuxt.jsDay 7

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がVueCLIによって提供されたことにより、

以下のディレクトリについてもWebPackのみの設定で提供が可能になります。

また、エントリーファイルを中心に、

middlewarepluginといった機構を用意することも可能です。


データストア

一番のボトルネックはここで、

現状NuxtのVuexの自動解決を提供してkるえるライブラリが存在しない。

前項で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でもこういうことができるんですよ」というふうに話をつなげてもらえると、道が拓けるかもしれません。