Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
78
Help us understand the problem. What is going on with this article?
@potato4d

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

More than 1 year has passed since last update.

Screen Shot 2019-05-14 at 22.58.01.png

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

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

tl;dr

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

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

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

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

詳細

SSR logs in your browser 🖥️

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

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

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

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

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

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

Screen Shot 2019-05-14 at 22.23.38.png

ファイル監視の改善

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 に向けた動きがどんどん活発になっている気がします :eyes:

メンテナンスが滞っている 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 にどこまで依存するのか」を考えつつ技術選定をしていくと良さそうです。

78
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
potato4d
Senior Front-End Engineer at LINE Corp.
elevenback
合同会社ElevenBack は Web を通じたソフトウェアによる課題の解決を専門とする企業です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
78
Help us understand the problem. What is going on with this article?