イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

Nuxt.jsについて調べてみたよ

どうも。はすみんです。
今回のブログはNuxt.jsについて調べたことを書きました。

Agenda

  • Nuxt.js概要と特徴

  • 個人的に嬉しいなと思ったところ

  • Nuxt.jsを使ったほうがいい場面って?

  • Nuxt.jsを使うときの注意点

Nuxt.js概要と特徴

Nuxt.jsはVue.jsで書かれたフレームワークです。
本家のドキュメントには以下のように書かれています。

Nuxt.js は Vue アプリケーションを作成するフレームワークです。
ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から
作成するアプリケーションを選ぶことができます。

また、Nuxt.jsには以下の構成がデフォルトで入っています。

- Vue 2
- Vue-Router
- Vuex(ストアオプションを利用している場合に限る)
- Vue Server Renderer(mode: 'spa' を利用している場合を除く)
- vue-meta

要は、Vue.jsを作りたいものに合わせて柔軟に、かつ簡単に書けるようにしてくれるのがNuxt.jsなのかなーと。

主な機能としては以下です。

- Vue ファイルで記述できること(*.vue)
- コードを自動的に分割すること
- サーバーサイドレンダリング
- 非同期データをハンドリングするパワフルなルーティング
- 静的ファイルの配信
- ES6/ES7 のトランスパイレーション
- JS と CSS のバンドル及びミニファイ化
- <head> 要素(<title>、<meta> など)の管理
- 開発モードにおけるホットリローディング
- プリプロセッサ: Sass, Less, Stylus など
- HTTP/2 push headers ready
- モジュール構造で拡張できること

機能が多いので、いいなと思ったところをピックアップしていこうと思います。

個人的に嬉しいなと思ったところ

・書きたいことに集中できる

Nuxt.jsでは、Vue RouterやVuexといった構成がまるっと入っています。
そのためルーティング処理などが簡単になります。
例えば、aboutページを作成したい場合、about.vueファイルさえ作成すればOKです。
Vue.jsで必要なルーティング処理は、Nuxt.js自身がよしなにやってくれます。
Nuxt.jsの思想として「*.vueの記述だけ、要は書きたいことに集中できるようにする」があり、魅力的に感じました。

・設定より規約を重視、複数人で開発するときに迷いづらい

これはNuxt.jsの魅力というよりフレームワークそのものの魅力ですが、規約がきっちりしています。
そのため、開発者であれこれ決めなくていいです。
複数人で開発するときにもスピード感持って開発できるのかなーと思います。

・(良いか悪いかは別として)SSRを簡単に試せる

Nuxt.jsでは、サーバーサイドレンダリング(SSR)を簡単に試すことができます。
アプリケーション作成時にコンソールから聞かれたときにYesと答えるだけで簡単に設定できます。
また、後から変えたい場合もconfigを1行変更するだけでいいので簡単です。
SSRという機能自体が不要かは置いておいて、実装が大変なSSRを簡単に導入できるのは魅力ですね。

Nuxt.jsを使ったほうがいい場面って?

・開発メンバーがVue.jsに慣れているとき

Vue.js経験者が多いのであれば、Nuxt.jsを使ったほうがスピード感持って開発できるかなと思います。
上記でも触れましたが、
・設定より規約を重視していること
・必要な構成がデフォルトで入っていること
が実現されているので、レールに乗って早く開発できるのかなと思います。

・SSRを使って初期表示を早くさせたい or モバイルサイトを早く表示させたい

通常のWebサイトでは、リクエストを送ったあとクライアントサイドでレンダリング処理をすることが多いですが、
SSRではレンダリング処理をサーバーサイドで行います。
そのためクライアントサイドの負荷が下がり、初期表示を早くすることができます。
クライアントサイドのスペックに左右されないので、スペックが古いPCやモバイルサイトの場合はSSRが有効なケースが多いです。
デメリットももちろんあるので、それは後述します。

・単純に使ってみたい!

個人的にはこれが一番大きな理由であってほしいですね。
せっかく使うなら、
・Vue.jsはどういうところに課題を持っているのか
・Nuxt.jsはVue.jsの課題をどのように解決しているのか
・使うとどんなメリットがあるのか
などを意識して使うと、より楽しく使えるのではないかなと思います。

Nuxt.jsを使うときの注意点

・ユニバーサルJavaScriptであること

ユニバーサルJavaScriptとは、クライアントサイドでもサーバーサイドでも使えることをいいます。
なので、例えばサーバーサイドで使えない処理(location.reload()など)を書いてしまうと、思わぬところで落ちるので注意が必要です。
設計をちゃんとやることで回避できるかと思いますが、注意する管理コストが発生するかと思います。

・SSRを使うとCPUの負荷が上がる

SSRを使うと、サーバーサイドでレンダリング処理をするためCPUが上がります。
インフラのスペックを上げたり、オートスケールさせることで対応はできますが、天秤ですね。

・Vue CLI3.0との立ち位置は?

2018年4月にVue CLI3.0が発表され、大きなアップデートとなりました。
具体的には、Vue CLI3.0でも構成がビルトインされていたり、パッケージのカスタマイズがいい感じにできたりなどです。
これまでNuxt.jsがカバーしていた分野を、Vue CLI3.0が解決する面も増えています。
SSRしたいなとか、規約を重視して開発したいな、といったときはNuxt.jsで良いかと思いますが、
両者の棲み分けを考えて開発しくことが大事かと思います。

おわりに

次はNuxt.jsを使ってこんなサービス作ったよ、って紹介したいなと思います〜