Nuxt.js v2.7.0 の変更点と注目のポイントまとめ

本日 Nuxt.js v2.7.0 がリリースされました。

普段は大きな変更点がある場合を除き日本語でまとめたりしないのですが、いくつか便利そうな変更点があったので簡単にまとめます。

tl;dr

アップデートにおいて変わった主な変更は以下(# は該当の Pull Request)

• SSR 側での console.log が開発環境に限定してクライアントへと引き継がれるように #5673
• store ディレクトリ内の新規作成がウォッチ対象に #5681
• serverMiddleware のウォッチも改善 #5681
• TypeScript プロジェクトにて Node.js v8.6 のサポートを廃止 #5691

今回のリリースについての公式情報

• GitHub Release
  • https://github.com/nuxt/nuxt.js/releases/tag/v2.7.0
• Official Twitter
  • https://twitter.com/nuxt_js/status/1128281138877882368

あたりで機能を追って、後は Pull Request 単位で見ています。

詳細

SSR logs in your browser 🖥️

Officialの GitHub の添付画像をそのまま掲載

nuxt dev コマンドの実行時に限り、SSR 側での console.log 結果がブラウザで確認できるようになりました。
割とサーバー用にログをガリガリ出している場合にはかえって困りそう……。自分の持っているプロジェクトでもそういったものがいくつかあるので、ロガーにはきちんと表示するログレベルを決められるような設定を追加しておくべきですね。

そうはいっても普通にロギングするだけではどうやってもこんなもの実装のしようがないので、ちょっと Pull Request を覗いてみました。

どうやら、logger を独自で定義した上で、 SSR 時にはそこにログを格納。Vuex の State の受け渡しと同じように、 window.__NUXT__ にログデータを渡して、そこからクライアントで描画しているみたいです。

描画には、 Nuxt.js が管理しているきれいな console.log を表示してくれるパッケージ consola が使われています。

実際に手元で v2.7.0 で動かしてみるとこんな感じ。便利っぽいですが、オフにできるオプションがあってもよさそうですね。

ファイル監視の改善

store と serverMiddleware の監視が改善、これまでは store は変更のみ検知できたのが新たに追加も対応、 serverMiddleware の監視も併せて改善されたみたいです。

ちょっとここはガッツリ見ないとわからないのですが、serverMiddleware に関しては、これまではオプションから filter で渡されて固定だったものが、ロジックが改善されているように見えます。

とはいえ、serverMiddleware の watch は昔からあまり精度が高くないので注意が必要です。

余談ですが、これは Node.js のファイル監視で一番良く使われているファイル監視のライブラリ chokidar(Nuxt.jsもこれを利用している) がファイルサイズベースでの監視を行っていることによって起きる現象であることが殆どです。

1 文字の Typo 修正を行って反映されなかった経験を持っている人も多いかと思いますが、基本的にこれに起因する現象なので、細かな反映されない現象については、適当な文字を打つなりコメントアウトしてすぐ解除するなりで対処するのが賢かったりします。

TypeScript プロジェクトにて Node.js v8.6 のサポートを廃止

そのままですね。
TypeScript の webpack loader である ts-loader のバージョンの都合に併せて廃止されたようです。

今の Node.js の最新の LTS はもう v10.x ですし、 Lambda 環境 / Cloud Function 環境も Node v10 が使えるようになっているので、この機会にアップデートしておくと良さそうです。

その他の変更

その他はあまり目立った変更はなさそうですが、新たに transition が deprecated になって pageTransition にリネームになったり(#5558)しているので、このあたりは Nuxt v3 に向けて早期に潰しておくと良さそうです。

以前のリリースでの Vuex の Classic モードの deprecated 化など、 v3 に向けて徐々に変化が起こっていますので、これからに耐えられるようにしておくと良さそうです。

その他の気になるところ

今のリリースとは直接関係がないですが、最近 v3 に向けた動きがどんどん活発になっている気がします

メンテナンスが滞っている axios の代わりとして、 nuxt/http という専用の Universal な HTTP 通信ライブラリが生えてきていたりするのが顕著でしょうか。

一方で、別の実装を行うのではなく、新たに Nuxt.js Team に管理が移ったものもあります。 https://github.com/declandewet/vue-meta などは、メンテナンスを引き継ぐ形でしれっと https://github.com/nuxt/vue-meta へと移行されており、メジャーバージョンアップもなされています。

多くのエコシステムを開発・運用していくことでより便利になっている Nuxt.js ですが、どんどんと囲い込みが増えてきている印象もあります。
Nuxt.js を利用している意義はプロジェクトごとに違うと思うので、「このプロジェクトでは Nuxt.js にどこまで依存するのか」を考えつつ技術選定をしていくと良さそうです。