Nuxt DevTools v1.0 · Nuxtブログ

Nuxt DevTools v1.0のリリースを発表できることを嬉しく思います！ 🎉

このリリース以降、Nuxt DevToolsはNuxt v3.8以降でデフォルトで有効になっています。すべてのNuxtプロジェクトで一般的に利用可能です！

最新のNuxtにアップグレードして、ブラウザでShift + Option + D（macOS）またはShift + Alt + D（Windows）を押してDevToolsを開くと、使い始めることができます。デフォルトでは、フローティングパネルは気が散らないように非表示になっています。 Nuxt DevToolsの設定ページで有効にするか、設定で明示的に有効にすることができます

nuxt.config.ts

export default defineNuxtConfig({
  devtools: {
    enabled: true
  }
})

Nuxt DevToolsを構築した理由

近年、開発者エクスペリエンス（DX）への注目が高まっています。ツールとフレームワークは、DXの向上に努めてきました。その過程で、Nuxtは日々の開発をより簡単かつ効率的にするための多くの革新的な機能と規約を導入しました。

たとえば、ファイルベースのルーティング、レイアウトシステム、プラグイン、ルートミドルウェア、コンポーザブルの自動インポート、ファイルベースのサーバーAPI、強力なモジュールシステムなどです。

List of Nuxt features that enhance developer experience

Nuxtは、シンプルな趣味のプロジェクトから大規模なアプリケーション、シンプルなクライアントレンダリングのシングルページアプリケーションからエッジにサーバーレス関数を持つハイブリッドレンダリングサイトまで、さまざまなアプリケーションを作成できます。これらのユースケースとシナリオをすべてサポートしやすくするために、これらの機能と規約を提供しています。

問題点

強力なフレームワークを持つことのこれらのすべての利点のうち、いくつかのトレードオフを行う必要がありました。使いやすくするために、基礎となる実装の透明性を少し犠牲にする必要がある場合があります。

"Transparency" as the trade offs of having "Conventions", "Abstractions", "Sensible Defaults" and "Normalizations"

従来の抽象化は、実装の複雑さを軽減し、構築時に集中しやすくするための優れた方法です。一方、ユーザーが内部で何が起こっているのかを学習して理解するための負担を増やす可能性もあります。自動インポートされたコンポーネントの出所や、特定のコンポーネントを使用しているモジュールの数など、暗黙的なものにもつながります。また、デバッグが困難になる場合もあります。

トレードオフは避けられません。一般的に、これらのトレードオフは、ユーザーのコードベースを整理し、長期的にメンテナンスを容易にするのに役立つため、価値があると信じています。同時に、何が起こっているのかを理解し、学習曲線をスムーズにするためのツールを提供することで、失われた透明性を補いたいと考えています。

そこでNuxt DevToolsが登場します！ 2023年2月に初めて導入し、このアイデアを試しました。数か月間の調査と開発の後、コミュニティからの驚くほど肯定的なフィードバックから、このアイデアは有用であることが証明され、Nuxt開発エクスペリエンスの中核部分にすることにしました。

機能

Nuxt DevToolsは、Nuxtアプリを理解し、開発者エクスペリエンスをさらに向上させるのに役立つビジュアルツールのセットです。 Nuxtとアプリ間の透明性を高め、パフォーマンスのボトルネックを見つけ、アプリと構成の管理を支援するために作成されました。

アプリ内DevTools

概要から、Nuxt DevToolsはアプリと一緒に存在するアプリ内DevToolsです。クリックして開くことができるフローティングパネルとして表示されます。

これは従来のブラウザ拡張DevToolsよりも優れたアプローチであると考えています。

**すべてのブラウザ、さらにはモバイルデバイスでも動作します！** - ブラウザ拡張DevToolsの機能は、各ブラウザが提供するAPIによって制限されており、複数の拡張機能を維持するには多くの労力が必要です。このアプローチにより、機能と機能に集中しながら、あらゆるブラウザやデバイスのユーザーがアクセスできるようにすることができます。
**ビルドツールとの統合** - 従来のブラウザ拡張DevToolsは、アプリのランタイムコンテキストにのみアクセスでき、ビルドツールにはアクセスできません。 DevToolsがNuxtに付属しているため、ビルドツールと通信し、より多くの洞察と機能を提供できます。
**レイアウトのずれを回避** - DevToolsをフローティングパネルとして使用すると、DevToolsを切り替える際のレイアウトのずれを回避できます。

ページビュー

ファイルベースのルーティングの暗黙性を向上させるために、DevToolsにページビューを導入しました。アプリに登録されているすべてのページが一覧表示され、簡単にテストしてページ間を移動できます。

コンポーネントビュー

コンポーネントタブには、アプリで使用しているすべてのコンポーネントとその出所が表示されます。検索してソースコードに移動することもできます。

また、コンポーネント間の関係を示すグラフビューも提供します。コンポーネントをフィルタリングして、特定のコンポーネントの依存関係を確認できます。これは、意図しない依存関係を特定し、ページのパフォーマンスとバンドルサイズを向上させるのに役立ちます。

コンポーザブルビュー

コンポーザブルビューには、Nuxtに登録されているすべての自動インポートコンポーザブルが表示されます。どのファイルがそれらをインポートしているか、そしてそれらの出所を確認できます。一部のエントリでは、簡単な説明とドキュメントへのリンクも提供されます。

モジュール管理

モジュールタブには、アプリに登録されているすべてのモジュールと、ドキュメントとリポジトリへのリンクが表示されます。

また、コミュニティからモジュールを検索して探索する機能も提供しています。ワンクリックでインストールできます！

静的アセット管理

アセットタブには、 publicディレクトリにあるすべての静的アセットが表示されます。画像、ビデオ、フォント、PDF、その他のファイルのプレビューをサポートしており、URLまたはコードスニペットを簡単にコピーしてアプリで使用できます。 Nuxt DevToolsからファイルをドラッグアンドドロップして直接アップロードすることもできます。

ランタイム構成エディター

ランタイム構成タブには、アプリのランタイム構成が表示され、さまざまな値を試すためのインタラクティブなエディターが提供されます。

ペイロードエディター

ランタイム構成エディターと同様に、ペイロードエディターでは、 useStateや useFetchなどのコンポーザブルからのペイロードを編集して、サーバーサイドレンダリングでサーバーからクライアントに何が渡されたかを確認できます。

Open Graphは、ソーシャルメディアの共有とSEOにおいて重要な役割を果たします。従来のワークフローでは、通常、アプリを最初にデプロイして、さまざまなソーシャルメディアプラットフォームでOpen Graphが期待どおりに機能しているかどうかを確認する必要があります。 Open Graphプレビューを使用すると、DevToolsでOpen Graphをプレビューし、インスタントフィードバックループでライブ更新できるようになりました。

また、アプリのOpen Graphタグを確認し、改善するための提案を提供します。生成されたコードスニペットをコピーしてルートに貼り付けると、一度に修正できます。

プラグインの概要

プラグインの概要には、アプリに登録されているすべてのプラグインが一覧表示されます。プラグインはアプリのレンダリング前にランタイムで実行されるため、プラグインのパフォーマンスを維持し、レンダリングのブロックを回避することが重要です。各プラグインの実行時間とすべてのプラグインの合計時間を提供するため、潜在的なパフォーマンスのボトルネックをより適切に特定できます。

タイムライン

タイムラインは、各コンポーザブルがいつどのように呼び出されたかを確認するためのツールです。ブラウザDevToolsのパフォーマンスタブールとは異なり、このタブはルートナビゲーションなどの他のイベントと組み合わせた高レベルのコンポーザブルのみをチェックするため、日々の使用により近くなります。また、各呼び出しの引数と戻り値も記録されるため、何が起こっているのかをよりよく理解できます。

2023年11月現在、タイムラインはまだ実験的な機能であり、手動でオプトインする必要があります。

本番ビルドアナライザー

Nuxt DevToolsは主に開発ツールの提供に焦点を当てていますが、本番環境でチャンクがどのように構成されているかを知りたい場合があります。ビルドアナライザーを使用すると、いつでも本番ビルドを起動してチャンクとモジュールを分析し、それらがどのようにバンドルされているかを確認できます。また、異なるブランチで複数のビルドを実行して、リファクタリング/変更がバンドルサイズにどのように影響するかを比較することもできます。

サーバーAPIプレイグラウンド

Nuxtは、サーバールートを使用してサーバーAPI関数を非常に簡単に作成する方法を提供します。 Nuxtではその情報を持っているため、Postmanなどのツールと同様に、サーバーAPI関数をテストおよびデバッグするためのプレイグラウンドを提供できます。アプリで利用可能なすべてのサーバーAPIを自動的に一覧表示します。また、これらの関数を**アプリと同じコンテキスト内で**実行するため、外部ツールで手動で設定する必要はありません。いつものように、アプリにコピーして貼り付けるためのコードスニペットもあります。

埋め込みフル機能VS Code

DevToolsアプローチの柔軟性のおかげで、最新のWebのパワーを活用して、フル機能のVS CodeをDevToolsに直接埋め込むことができます。そのVS Codeでは、アカウントにサインインして設定を同期でき、すべての拡張機能は通常のVS Codeクライアントと同じように機能します。これにより、ブラウザを離れることなくコードをすばやく編集できます。

コンポーネントインスペクター

インスペクターを使用すると、DOMツリーを検査し、どのコンポーネントがレンダリングしているかを確認できます。クリックして、特定の行のエディターに移動します。プロジェクト構造を徹底的に理解する必要なく、変更をはるかに簡単に行うことができます。

分割画面

最近のリリースでは、2つのタブを並べて開くことができる分割画面機能を導入しました。

UIのカスタマイズ

DevToolsの設定では、表示するタブとDevToolsのレイアウトをカスタマイズするためのいくつかのオプションを提供しています。

エコシステム

Nuxtでは、エコシステムを非常に重視しています。 NuxtモジュールがNuxtコアを強化する方法と同様に、Nuxt DevToolsも高度に拡張できるように設計されており、モジュールが追加の機能と統合を提供できるようにしています。

コミュニティモジュール

コミュニティが既に Nuxt DevTools 用のモジュールを構築し始めていることを嬉しく思います。いくつかご紹介します。

Vitest モジュールは、Nuxt アプリと同じパイプラインで実行されるテスト用に Vitest UI を提供します。アプリと並行してテストをデバッグしやすくなりました。

VueUse モジュールは、利用可能なコンポーザブルを検索し、そのドキュメントを参照できる検索ページを提供します。

SiteMap モジュールは、サイトマップを管理するためのインタラクティブなエディタを提供します。

TailwindCSS モジュールは、設定に基づいて利用可能なものを確認できる Tailwind 設定ビューアを提供します。

UnoCSS モジュールは、各モジュールが最終的な CSS にどのように寄与しているかを確認できるインタラクティブなインスペクターを提供します。

Storybook モジュールは、コンポーネント用の Storybook UI を提供します。

そして、これらはほんの一部です！ Nuxt DevTools に المزيدのモジュールが登場することを楽しみにしています！

Nuxt DevTools に触発されたプロジェクト

同時に、他のフレームワークが Nuxt DevTools に触発されて独自の DevTools を構築し始めていることを光栄に思います。

webfansplz/vite-plugin-vue-devtools - Vite + Vue 3 アプリの DevTools をサポートするための Nuxt DevTools ポートです。
pheno-agency/vite-plugin-devtools - Vite 用のフレームワークに依存しない DevTools を構築する実験です。
Modern.js DevTools - Modern.js のアプリ内 DevTools です。
Qwik DevTools - Qwik 用の DevTools です。

私たちはこれらのプロジェクトのメンテナーと緊密に協力して、DevTools のエクスペリエンスを次のレベルに引き上げる方法を検討しています。

今後の展望

Nuxt DevTools は v1.0 に到達したばかりですが、これで終わりではありません。私たちが探求し、改善したいことはまだたくさんあります。私たちが検討しているアイデアをいくつかご紹介します。

Nuxt アクセシビリティ統合 - Nuxt のアクセシビリティ統合を構築しています（#23255）。Nuxt DevTools に専用のビューを構築し、アクセシビリティのヒントをインタラクティブに確認できるようにします。
Vue DevTools 統合 - Vue チームと協力して、ブラウザ拡張機能とvite-plugin-vue-devtools や Nuxt DevTools のようなアプリ内 DevTools の両方で動作する共有ツールに Vue DevTools エクスペリエンスをもたらす作業を行っています。
ご意見・ご提案をお寄せください！

未来

Nuxt DevTools が、より良いアプリの構築と開発エクスペリエンスの向上にどのように役立つかを楽しみにしています。今後、Nuxt DevTools 自体よりも大きなものを想像しています。このようなフレームワーク固有の DevTools を持つことが、より良い開発エクスペリエンスを提供するための今後の道筋だと考えています。また、このようなツールの多くの部分は、実際にはツール間で共有および再利用できると考えています。そこで、DevTools Kit のアイデアを思いつきました。

DevTools Kit

DevTools Kit は、まだ初期のブレインストーミング段階にあるユニバーサルプロトコルのアイデアです。理想的には、DevTools の各機能は**コンポーザブル、拡張可能、そして協調的**であるべきだと考えています。メタフレームワークは、特定のニーズに合わせて独自の機能を構築できますが、一般的な Web 関連ツールは、異なるフレームワーク間で共有および共同作業できます。

DevTools Kit

これらの機能がすべてスタンドアロンパッケージとして存在すると想像してみてください。SEO、アクセシビリティ、PWA、静的アセットなど、一般的な Web 関連ツールを用意できます。次に、Vite ビルドアナライザー、Vite インスペクター、Webpack ビジュアライザーなど、低レベルのビルドツール関連のツールを用意できます。そして最後に、Vue コンポーネントビューや Nuxt サーバー API プレイグラウンドなど、フレームワークやメタフレームワーク固有のツールを用意できます。

Nuxt DevTools

その時点で、Vue DevTools は、一般的な Web 機能と Vue 固有の機能の組み合わせになります。そして、Nuxt DevTools は、基本的に上記の機能の組み合わせとなり、Vue DevTools からすべての機能を継承し、その上に Nuxt 固有の機能を追加します。

Your DevTools

必要に応じて独自の DevTools を構成することも可能です。

とはいえ、DevTools Kit の詳細についてはまだ検討中です. 今後のアップデートにご期待ください！

まとめ

新しい Nuxt DevTools エクスペリエンスをお楽しみいただければ幸いです！より良いアプリの構築と開発エクスペリエンスの向上にどのように役立つかを楽しみにしています。ご意見やご提案がございましたら、アイデアと提案のディスカッションでお気軽にお知らせください。

ご支援ありがとうございます。ハッスルしましょう！ 🚀

← ブログに戻る

（前後のブログ記事へのリンク - 省略）