「Nuxt tech book」読んで素振りしました

技術書典04で購入したNuxt tech bookを読みました。読みながらやった素振りの結果 → c18t/hello-nuxt

総評

Vue.jsでフルスタックなウェブアプリケーション開発をしたいなと思っていたのでNuxtが気になっており購入。軽めのウェブアプリケーション開発で必要になりそうなトピックの選び方がいい感じで、公式以外の情報が少ない中、軽く読んでまとまった情報が手に入る良書でした。

TOC

  • 01: イントロダクション
  • 02: Nuxt.js概論
  • 03: Nuxtによる基本的なWebアプリケーション開発
  • 04: Nuxtの機能をフル活用する
  • 05: 実践的なWebアプリケーション開発ノウハウ
  • 06: Nuxtのエコシステム
  • 07: Nuxtの情報収集・キャッチアップのススメ
  • 08: あとがき

01: イントロダクション

  • 今後、フロントエンドのフレームワークに求められるモノ
    • 高い生産性を誇る開発基盤 ― Vue.jsとAngularのいいとこ取りのような
    • これから流行する技術への対応 ― PWA, Web Assemblyなどへの柔軟な対応
  • これらを満たすのは既存のライブラリ・フレームワークをベースにしたものになるだろう

02: Nuxt概論

  • Vue.jsをベースに開発された、フロントエンドのフルスタックフレームワーク
  • 先行のReactをベースとしたNext.jsをもして開発されたが、Next.jsとは異なり厚く柔軟なフレームワーク
  • Vue.jsでのSPA開発に秩序をもたらす
  • 流行する技術への追従を正しく行っている。コミュニティーの中でPWAやSSRのモジュールや基盤を提供しており、手厚いサポートがある。また、Vue.js本体のルールから逸脱していない。

03: Nuxtによる基本的なWebアプリケーション開発

内容に習って以下を実施

$ ghq get c18t/hello-nuxt
$ ghq look c18t/hello-nuxt
$ vue init nuxt/starter
$ yarn
$ yarn dev

うごいた

Nuxtのプロジェクト構成

  • assets: リソースや設定のjsonなど、ソースコード以外のもの。webpackのfile-loader経由で読まれる
  • components: .vue。基本的にここに全ておいていくので、適宜サブディレクトリを切ると良い
  • pages: ルーティングの対象になる
  • static: 公開用の静的リソース。favicon.icoなど固定の名前がほしいもの
  • store: Vuexストアとそのモジュールを配置。ストアオートローディングの対象になり、グローバルに利用可能になる。

ルーティングとページコンポーネントの作成

  • about.vue → /about
  • user/_id.vue → /user/1
    • _で始まるものは :id の形式をサポートする。ファイル名がルーティングパラメータの変数名

ルーティングに応じたコンテンツの出し分け

asyncData ({ params }) {
  const { id } = params
  return { id }
}

axios-moduleによる外部リソースの取得

$ yarn add '@nuxtjs/axios'
  modules: [
    '@nuxtjs/axios'
  ],

を追加。

async asyncData ({ params, app }) {
  const { id } = params
  const user = await app.$axios.$get(
    `https://api.github.com/users/${id}`
  )
  return { user }
}

Vuexストアへのデータの取扱の移譲

store/index.jsを作成

import Vuex from 'vuex'
const store = () => new Vuex.Store({
  state: {
    user: null
  },
  mutations: {},
  actions: {}
})
export default store

上記のようにすると、Vue.js devtoolsが反応するようになるので、あとはいい感じに開発していく。

Nuxtの機能をフル活用する

layoutsによるレイアウトの共通化

components以下に、default.vueという名前で下記のようなファイルを作れば、共通部分をきれいに記述できる

<template>
  <AppNavigation />
</template>

<script>
import AppNavigation from '~/components/AppNavigation.vue'

export default {
  components: {
    AppNavigation
  }
}
</script>

middlewareを利用したルーティング結果の改ざん

例えば、リダイレクトするmiddleware/regdirector.js

export default function({ redirect, route }) {
  if (route.path == '/user/2') redirect('/')
}

注意点として、SPAモードではmiddlewareは動かない

pluginによるグローバルな機能拡張

  • middlewareがreq/resに対する拡張なら、pluginはreq/resに関係しないアプリケーション全体に対する機能拡張
  • ライブラリのインポートとか、ルーターのフックとか、loggerの作成とか

Vuexのモジュールモードを活用したオートローディング

  • クラシックモードとモジュールモード
    • クラシックモード: 単一のVuexストアをベースに、適宜手動でモジュールを追加していく
    • モジュールモード: Nuxtが自動で名前空間を管理するやつ。こちら推奨

no-ssrとprocess.browser

エラーページのカスタマイズ

  • layouts/error.vueがレンダリングされる
  • 全部error.vueに来るので、v-ifで分岐していく

05: 実践的なWebアプリケーション開発ノウハウ

  • SSRとSPAでデータを共有できるのでcookieを利用しておくと非常に便利とのこと
  • 認証については飛ばします。必要になったら読む
  • NuxtがSSRサーバを立てるのを利用して、前段にExpressでAPIサーバを構築すると便利
    • /api 以下はExpressが動いて、それ以外はNuxtのSSRが動く
  • vue-meta
  • nuxt.config.jsのheadキーがサイト全体のメタタグとして作用する
    • headキーの情報はより狭いスコープでの指定で上書きされる
  • nuxt generateSSRとして実行した結果を静的サイトとしてHTMLで出力できる

06: Nuxtのエコシステム

07: Nuxtの情報収集・キャッチアップのススメ

英語のドキュメントを読もう、エッジケースに当たったらソースコードを読もう、日本語翻訳プロジェクトがあるから参加してね

おわり

素晴らしい本をありがとうございます。