NuxtとVueの違いは?実装して感じたNuxt.jsのメリット

Vue.js大好きマンなのにNuxt.jsは触ったことない・・。

これでは時代に乗り遅れるぞ!ということで、どんなものかとNuxt.jsを触ったら面白くて勢いで自分のホームページを作り変えてしまった。

作り変えたサイトはこれ。

https://murakamikoji.com

Nuxt.jsっVue.jsを単体で使うのと何が違うのか?

これ僕自身がNuxt.js使うまで思っていたことで、Vue.jsは好きだけどNuxt.jsは使ったことがないって人は同じことを思っている人が多いと思う。

Nuxt.jsはVue.jsを単体で使うのと違い、Nuxt.jsだけで1つのアプリケーションを作るような場合に使うとメリットがある。

Nuxt.js自体でローカルサーバーを立てることができSSRしたり、そのコードを静的HTMLにビルドすることができる。

たとえばRailsでAPIを実装して、RailsのビューでVue.jsをSPA化なり部分適用するなり、よくある開発スタイルの場合はNuxt.jsではなくVue.jsのままでよいと思う。

Nuxt.jsはvue-cliを使ったプロジェクトテンプレート?

最初にNuxt.js触った時に感じたのはSSRしないVue.jsを使ったAngularっぽいなという印象だった。

たとえばAngularは下記のようにアプリの作成を作って、ローカルサーバーを立てることができる。

$ ng new app-name // アプリの雛形を作成
$ ng serve --open // ローカルサーバー起動

Vue.jsにはAngularのngコマンドのようなvue-cliがある。

Nuxt.jsはvue-cliを使って雛形を作成するため、ひとつのプロジェクトテンプレートとも言える。

ちなみにNuxt.jsでプロジェクトを作るときは公式にあるように

$ vue init nuxt-community/starter-template app-name

で作成することができる。

このテンプレートを使う上でNuxt.jsが必要になるわけだけど、Vue.jsという言語があればNuxt.jsはそのフレームワークという位置づけ。

JavaScriptとexpressとか、RubyとRailsのような関係性。

Vue.js自体はシンプルで小さいライブラリのためこれまで普通にnpmなりyarnでインストールしても使うことが多く、Nuxt.jsがVue.jsを使った何なのかいまいちイメージが沸いていなかった。

Nuxt.jsが良いと思ったところ

Nuxt.jsを実際に使ってみてVue.js単体でアプリを作るよりも便利すぎる!と思う点があった。

デフォルトのライブラリ

Vue.js以外に改めてライブラリを追加しなくても基本的なことができてしまう。

例えばVue.jsを使って何かアプリケーション作ろうとした時に、下記のようなライブラリを使うことが多い。

  • vuex: データと状態を管理
  • vue-router: ルーティング・SPAページ遷移
  • axios: APIのデータやりとり
{%/box%}

僕自身Vue.jsは趣味でも仕事でもよく使っていて、上記の3ライブラリは必然レベルでまあいるよね、くらいの間隔で最初から入れてしまう。

Nuxt.jsはこの上記3つのライブラリがデフォルトで採用されていて、自分でインストールする必要がない。

ライブラリ初期化のコードが必要ない

ライブラリが最初から入っているのは上記の通りだけど、Nuxt.jsはvue-routerとvuex使うための初期化コードを各必要がない。

たとえばvue-routerを普通に使うとこんな感じのコードを書くことになる。

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export default new VueRouter({
 mode: 'history',
 routes: [
  { path: '/', component: IndexPage },
 ],
 scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
   return savedPosition
  } else {
   return { x: 0, y: 0 }
  }
 }
});

ページを増やすごとにページのvueを読み込んでルーティングを設定してというような工程が必要なるけど、Nuxt.jsではその必要がなくなる。

pages/という決まったディレクトリにvueファイルを設置するだけで、自動的にルーティングが設定される。

またvuexにしてもルーティングと同じような考え方で、store/というディレクトリにファイルを配置するだけで自動的にstore登録することができる。

この自動化は単体でVue.js使っている身としてはめちゃくちゃ楽ですげーー!!と思った。

Nuxt.jsの使い所

便利であるNuxt.jsだけど、使い所としては今のところ下記のような感じかなと思っている。

  • 静的サイトジェネレーター
  • Expressと合わせてSSRのアプリケーション
  • SEOを必要ないSPA
{%/box%}

静的サイトジェネレーターとして使う場合、API連携が必要でないパターンが多いと思うけど、その時にNuxt.jsを使うのはオーバースペック?と思う部分はある。

またSSRのアプリケーションやSPAとして作るにしても別途APIが必要だったりということを考えると、外部のAPIを使ってなにかアプリを作りたいって時にNuxt.js使うと一番恩恵を受けれられるかな?というのが今のところの感想。

コウジ
Vue.jsが好きなフリーランスのフロントエンドエンジニアです。 フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。