💡

来たるNuxt4リリース

2025/01/16に公開

こんにちは!
株式会社ココナラ フロントエンド開発グループのよしみんです。

突然ですが、エンジニアのみなさん。フレームワークは何を使っていらっしゃるでしょうか?
ココナラスキルマーケットのフロントエンドの大部分ではNuxt.jsを使用しています。

Nuxt.jsは2025年1月16日現在v3.15.2を最新バージョンとしていますが、Nuxt4へのアップデートが予定されています。

2022年11月16日にリリースされたNuxt3ではVueのバージョンが上がったこともあり、Nuxt2から破壊的な変更も多く、アップデートに苦労された経験のある方もいらっしゃるのではないでしょうか?
…私もその一人です。

今回は来たるNuxt4について、ご紹介します。

Nuxt.jsとは

Vue.jsを使用したフレームワークです。
JavaScriptに興味を持つ世界中のIT技術者14,015人が回答したState of JavaScript 2024のアンケート結果によると、フレームワークとしてはNext.js、Astroに続き3位の利用率となっています。

Nuxt4での変更点

※ 下記は正式リリース前の現時点での情報ですので、正式リリース時には変更となる可能性があります。

Nuxt4での変更点はいくつかありますが、必ずすべての対応が必要なわけではありません。
新機能を無効にしたり現状の動作のままとする設定などが用意されているものも多く、バージョンアップは最小限の対応で行うこともできそうです。

いくつかある中でも1番大きな変更点としては、ディレクトリ構成の変更があります。
フォルダー構成例が上記のリンク先の公式ドキュメントに記載されていますが、新しくappディレクトリが切られることになり、appに関するものはここに配置されることになるなどの変更があります。
このディレクトリ構成の変更も現状のディレクトリ構成のままとするように設定することが可能ですが、パフォーマンス向上やIDEの型安全性の為に変更が加わったという背景があるので、変更が大変でなければ対応する方が良いかもしれません。

また、useAsyncDatauseFetchに関しては変更点が多くあるようです。
例えば以前まで実験的機能として実装されていた、呼び出し結果を異なるページ間で共有する機能が有効化されます。(ただしこちらの機能も無効設定にすることは可能です)
他にもdataerrorオブジェクトのデフォルト値がnullからundefinedに変更になるなどがあります。

ここでは一部だけご紹介しましたが、他にも実験的機能の削除などの細かい変更点もありますので詳しくはこちらをご覧ください。

バージョンアップに際する対応について

以上の変更を手動で対応するのに工数がかかってしまうな…と思われたみなさん、朗報です!

書き換えなどが必要な対応に関しては、Nuxt4ではcodemodを使用した自動マイグレーションが用意されています。
一括で実行することもできますが、一部除外して実行することや個別で実行することもできるようになっています。
codemodを使用したNuxt4バージョンアップ対応についての詳細はこちらをご覧ください。

現時点でのNuxt4について

Nuxt4は正式リリース前ですが、現在Nuxt3のバージョンを最新にして設定を変更することで、実際にNuxt4の動作確認を行うことが可能となっています。
手順についてはこちらに記載がありますので、ご確認ください。

最後に

今回もアップデートに苦労するのではないか?と不安はありましたが、マイグレーションが用意されていたりなどサポートも厚くなっており、そこまで苦労することもなさそうですね!(おそらく)
パフォーマンスの向上なども期待されますので、正式リリースが待ち遠しいところです!


ココナラではフロントエンド領域に限らず、各領域のエンジニアを募集しています。
よろしければぜひ以下のページもご覧ください。
https://coconala.co.jp/recruit/engineer/

フロントエンドの求人はこちらです。ご応募お待ちしております!
https://open.talentio.com/r/1/c/coconala/pages/49717

Discussion