「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

コメント