Tips2021.04.02

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

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

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

そもそもNuxtって何なのか?Vueとは何が違うのか使い所を書いていきます。

Nuxt + Composition APIの使い所も別記事に書きました。

[Nuxt + Composition APIを実用するための判断基準](./nuxt-compositionapi-decision)

目次

Nuxt.jsはVue.jsを単体で使うのと何が違うのか？
1. Nuxt.jsはvue-cliを使ったプロジェクトテンプレート？
Nuxt.jsが良いと思ったところ
1. デフォルトのライブラリ
2. ライブラリ初期化のコードが必要ない
## Nuxt.jsの使い所

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

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

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

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は下記のようにアプリの作成を作って、ローカルサーバーを立てることができる。

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

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

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

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

```bash
$ 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を使って何かアプリケーション作ろうとした時に、下記のようなライブラリを使うことが多い。

uex: データと状態を管理
vue-router: ルーティング・SPAページ遷移
axios: APIのデータやりとり

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

Nuxt.jsはこの上記3つのライブラリがプラグインにより使いやすくされていたりします。

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

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

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