「Nuxt.jsビギナーズガイド」の感想・備忘録1

書籍「Nuxt.jsビギナーズガイド」のまとめ。

点数

84点

感想

Nuxt.jsの概要から使い方までわかりやすく書かれており、なかなかの良書だった。

SPAを実装する際はVue.jsだけで実装するのではなく、Nuxt.jsを使うべきだと思う。

Nuxt.jsの概要

Nuxt.jsとは

1. Vue.jsアプリをサーバサードレンダリングするために生まれ、 そこから様々な機能が追加されていった。
2. 機能は大きく分けると以下の3つである。
   （1はVue CLIでも同様なので、2と3がNuxt.jsのメリットといえる）
   • ビルドプロセスの隠蔽
     webpackの設定から解放される。
   • Vueのエコシステムとインテグレーション
     Vue Router, Vuex, Vue Server renderer, vue-metaが組み込まれている。
   • 独自レイヤの実装
     middleware, pluginsなど。
3. Vue.jsは自由度が高いため、Nuxt.jsを使うことでルールに沿った開発を行うことができる。
   • SPAでない場合は、Nuxt.jsを使うべきではない。
   • SPAであれば、Nuxt.jsを使うべき。
4. 3つのモードがあり、SSRの場合はサーバにNode.jsが必要になる。
   • Universal=SSR
   • SPA
   • Generate=SSG

規約

Nuxt.jsではVue.jsで多く利用されてきた開発パターンを「規約」として固定のルールにしている。
例えば、以下のような規約がある。

• 「pages配下のvueファイルはページを表す」という規約により、開発者はVue Routerの設定から解放される。
• 「data関数の代わりにasyncData関数を使う」という規約により、簡単にSSRを実装することができる。

assetsディレクトリにはwebpackでコンパイルしたい静的ファイル、staticにはコンパイルしたくない静的ファイルを格納する。
assetsへのパスは'~assets/image.png'のように先頭にチルダを使う。
本番環境用にコンパイルするとimage.db46865.jpgのようなハッシュ付きのファイル名になるため、キャッシュの影響を受けないというメリットがある。

開発環境構築

vue initによる開発環境構築

1. npm -y init
2. npm install @vue/cli @vue/cli-init npx vue init nuxt-community/starter-template my-first-nuxt-app
3. cd my-first-nuxt-app
4. npm install
5. npm run dev

create-nuxt-appによる開発環境構築

1. npm install --save-dev create-nuxt-app
2. npx create-nuxt-app アプリ名
3. cd アプリ名
4. npm run dev

• 通常はvue initのstarter-templateではなくcreate-nuxt-appを使う。
• Nuxt.jsオフィシャルもcreate-nuxt-appの利用を推奨している。
• starter-templateはミニマムな環境構築なので、何かの動作確認などの場合に使うとよい。

direnv

direnvという「カレントディレクトリに合わせて環境変数を設定してくれるツール」がある。
API用のトークンなどをソースに書かずに環境変数を利用する場合の開発に役立つ。

Macでのインストール手順

1. brew install direnv
2. echo eval "$(direnv hook bash)" >> ~/.bashrc