Nuxt DevToolsのご紹介

2023年のVue Amsterdam 2023でNuxt DevToolsのプレビューを発表しました。これは、Nuxtアプリを理解し、開発エクスペリエンスをさらに向上させるための新しいツールです。本日、多くのアップデートと改善を含むマイナーバージョンv0.3.0をリリースしました。

この記事では、Nuxt DevToolsの作成理由、開発エクスペリエンスの向上方法、将来の展望について説明します。

開発エクスペリエンス

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

Nuxt 3では、開発中のインスタントホットモジュール置換（HMR）のために、デフォルトのバンドラーとしてViteを採用し、ワークフローへのフィードバックループを高速化しました。さらに、Nitroという新しいサーバーエンジンを導入しました。これにより、Vercel、Netlify、Cloudflareなど、ゼロコンフィグで任意のホスティングサービスにNuxtアプリをデプロイできます。その他。

Nuxtは多くの一般的なプラクティスをビルトインで提供します

• コードベース全体でTypeScriptとESMをすぐに使用できます。
• シングルページアプリケーション（SPA）、サーバーサイドレンダリング（SSR）、静的サイト生成（SSG）、またはルートごとにハイブリッド化 - 同じコードベースをisomorphically（同型的に）明示的な設定なしで使用できます。
• useStateやuseAsyncDataなどのコンポーザブルを使用して、サーバーとクライアント間でアクセスできる状態を共有します。
• useHeadやuseSeoMetaなどのSEOユーティリティを活用して、メタタグの管理を容易にします。

さらに、レイアウトシステム、プラグイン、ルートミドルウェアなどの機能により、アプリの作成が容易になり、コードベースがより整理されます。

ファイルベースのルーティングやファイルベースのサーバーAPIなどの規約により、ルーティングが直感的で簡単になります。

コンポーネントの自動インポートにより、任意のVueファイルで直接利用できる共有コンポーネントを簡単に作成できます。グローバルコンポーネントとは異なり、コード分割されます。また、コンポーザブルの自動インポートも導入しました。これにより、VueのすべてのAPIを直接使用できます。Nuxtモジュールは、独自のコンポーザブルを自動インポートできるように提供することもできます。また、ローカルコンポーザブルも同様です。

最近、クライアント専用コンポーネントとサーバー専用コンポーネントを導入しました。これらは、ファイル名に.clientと.serverを追加することで使用できます。これらの規約はすべて型付きであり、開発者はルートナビゲーションやAPIからのデータ取得を行う際に型補完を利用できます。**これらの規約により、ボイラープレートコードが大幅に削減され、重複が回避され、生産性が向上します。**

エコシステムに関しては、Nuxtには大規模な開発者コミュニティがあり、数百もの高品質なモジュールが利用可能です。モジュールを使用することで、開発者は設定やベストプラクティスを心配することなく、必要な機能を統合できます。

問題点

Nuxtは容易に大規模なアプリケーションを作成できますが、1つの問題があります。それは、**透明性の欠如**です。

導入する新しい機能や規約ごとに、フレームワークに抽象化が少し追加されます。

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

これは、あらゆるツールのトレードオフとみなされる可能性があります。効率的に使用するには、ツールを学習して理解する必要があります。ドキュメントの改善や例を追加することに加えて、**透明性の欠如を改善する機会があると信じています。**

Nuxt DevToolsのご紹介

Nuxt DevToolsは、Nuxtアプリを理解し、開発エクスペリエンスをさらに向上させるための視覚的なツールです。Nuxtとアプリの透明性を高め、パフォーマンスのボトルネックを見つけ、アプリと設定を管理するのに役立つように作成されました。

実験的なモジュールとして提供され、アプリ内に直接ビューを提供します。インストールすると、アプリの下部に小さなアイコンが追加されます。クリックすると、DevToolsパネルが開きます。

試用するには、インストールガイドを参照してください。

概要

使用しているNuxtのバージョン、ページ、コンポーネント、モジュール、プラグインなど、アプリの概要を簡単に表示します。**Nuxtのバージョンもチェックし、ワンクリックでアップグレードできます。**

ページ

ページタブには現在のルートが表示され、それらにすばやく移動できます。動的ルートの場合、各パラメーターを対話的に入力するためのフォームも提供します。テキストボックスを使用して、各ルートのマッチング方法を試すこともできます。

コンポーネント

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

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

「インスペクター」機能を使用してDOMツリーを検査し、どのコンポーネントがレンダリングしているかを確認することもできます。特定の行の編集ツールに移動するにはクリックします。プロジェクト構造を完全に理解する必要なく、変更を行うことがはるかに容易になります。

インポート

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

モジュール

モジュールタブには、インストールされているすべてのモジュールと、それらのドキュメントとソースコードへのリンクが表示されます。Nuxtモジュールで利用可能なモジュールをさらに見つけることができます。

最近、Nuxtやモジュールを簡単にアップグレードできる実験的なアップグレード機能を導入しました。ターミナルタブでは、アップグレードプロセスの出力が透明に表示されます。

アセット

アセットタブには、すべての静的アセットとその情報が表示されます。アセットのパスまたはそれらを使用するコードスニペットをコピーできます。将来的には、Nuxt Imageとの統合により、ワンクリックで画像を最適化することもできます。

プラグイン

プラグインタブには、アプリで使用しているすべてのプラグインが表示されます。プラグインはアプリがマウントされる前に実行されるため、アプリのレンダリングをブロックしないように、各プラグインで費やされる時間は最小限にする必要があります。各プラグインのコスト時間は、パフォーマンスのボトルネックを見つけるのに役立ちます。

フック

フックタブを使用すると、クライアント側とサーバー側の両方から各フックに費やされた時間を監視できます。各フックに登録されているリスナーの数と、それらが呼び出された回数も確認できます。これにより、パフォーマンスのボトルネックを見つけるのに役立ちます。

アプリ設定

DevToolsでアプリ設定を検査および変更し、さまざまな設定を試して、その効果をすぐに確認できます。

ペイロードとデータ

このタブには、useState、useAsyncData、useFetchによって作成された状態が表示されます。データの取得方法と状態の管理方法を理解したり、それらをリアクティブに変更してアプリに影響を与えるかどうかを確認したりするのに役立ちます。useAsyncDataとuseFetchでは、再フェッチを手動でトリガーすることもできます。

ターミナル

一部の統合では、特定のジョブを実行するためにサブプロセスを実行する必要がある場合があります。DevToolsを使用する前は、サブプロセスの出力を完全に非表示にして潜在的な警告/エラーを無視するか、stdoutにパイプして複数の出力をターミナルに表示していました。これで、各プロセスのDevToolsで出力を明確に区別して表示できるようになりました。

仮想ファイル

仮想ファイルタブには、規約をサポートするためにNuxtとNitroによって生成された仮想ファイルが表示されます。これは高度なデバッグに役立ちます。

インスペクト

インスペクトはvite-plugin-inspect統合を公開し、Viteの変換手順を検査できます。各プラグインがコードを変換する方法を理解し、潜在的な問題を特定するのに役立ちます。

VS Code

VS Code Serverのおかげで、**フル機能の**VS CodeインスタンスをDevToolsに統合できます。拡張機能をインストールして設定を同期できます。これにより、コードを変更してブラウザーを離れることなくすぐに結果を確認できる、より密接なフィードバックループを実現できます。

モジュールが提供するビュー

エコシステムを考慮して、Nuxt DevToolsは柔軟性と拡張性を備えて設計されています。モジュールは、DevToolsに独自のビューを提供して、統合のための対話型データとプレイグラウンドを提供できます。以下にいくつかの例を示します。

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

UnoCSSモジュールは、各モジュールが最終的なCSSにどのように寄与するかを確認するための対話型インスペクターを提供します。

Nuxt Iconモジュールは、利用可能なすべてのアイコンの検索エンジンを提供します。

Nuxt Vitestモジュールは、Nuxtアプリと同じパイプラインで実行されるテストのためのVitest UIを提供します。

モジュール作成者向け

v0.3.0のリリースにより、モジュール作成者がDevToolsに貢献する機能が向上しました。

含まれるもの

• モジュールが提供するビュー
• クライアントアプリのコンテキストとDevToolsのユーティリティへのアクセス
• サーバーとクライアント間の通信のためのカスタムRPC関数
• サブプロセスの生成と出力ストリーミング
• @nuxt/devtools-kit - DevToolsとの統合を支援するユーティリティのセット
• @nuxt/devtools-ui-kit - DevToolsで使用されるUIコンポーネント。モジュールのビューをDevToolsの他の部分と統一します。
• DevTools統合機能を持つモジュールを作成するためのスターターテンプレート

詳細については、Devtools Module Authors Guide をご覧ください。

今後の予定

これは始まりに過ぎません。より直感的で遊び心のある方法でデータを表示する方法を探りながら、DevToolsにさらに多くの機能を追加する予定です。

Nuxt DevToolsの目標は次のとおりです。

プロジェクトロードマップ を確認し、アイデアや提案 を共有して、DevToolsの改善にご協力ください。

GitHubリポジトリ をスターに追加し、Nuxtの公式Twitter をフォローして、最新のアップデートを確認できます。

お読みいただきありがとうございます。皆様からのフィードバックと貢献をお待ちしております！