Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした