序文
みなさん、こんにちは。私は起業家歴 10 年のベテランであり、オープンソース テクノロジーの愛好家である Liu Ming です。
最近、Nuxt チームは公式開発者ツール Nuxt DevTools をリリースしました。
- 公式チームが Nuxt DevTools をリリースするのはなぜですか?
- Nuxt DevToolsにはどのような機能がありますか?
これらの疑問を念頭に置いて、Nuxt DevTools の導入に関する公式記事を中国語に翻訳して共有しました。
原題：Introducing Nuxt DevTools
元リンク：https://nuxt.com/blog/introducing-nuxt-devtools
著者：Anthony Fu
リリース日：2023年3月24日
Vue Amsterdam 2023 で、Nuxt アプリケーションを理解し、開発者のエクスペリエンスをさらに向上させる新しいツールである Nuxt DevTools のプレビューを発表しました。本日、多数の更新と改善を加えた新しいマイナー バージョン 0.3.0 をリリースしました。
この投稿では、 Nuxt DevTools を作成する理由、 Nuxt DevToolsによって開発エクスペリエンスがどのように向上するか、将来に何が期待できるかを探っていきます。
開発者の経験
近年、開発者エクスペリエンス（DX）への注目が高まっています。ツールとフレームワークは、DX を向上させるために常に機能しています。その過程で、Nuxt は日々の開発をより簡単かつ効率的に行うために、多くの革新的な機能と規約を導入してきました。
Nuxt 3 では、開発中にインスタント ホット モジュール交換 (HMR) のデフォルト バンドラーとして Vite に切り替え、ワークフローのより高速なフィードバック ループを作成しました。さらに、Nitro という新しいサーバー エンジンを導入しました。これにより、Nuxt アプリケーションを Vercel、Netlify、Cloudflare などのホスティング サービスにゼロ構成でデプロイできるようになります。
Nuxt には、多くの組み込みの一般的なプラクティスが用意されています。
- コードベース全体にわたって、すぐに使える TypeScript と ESM を記述します。
- 明示的なセットアップを行わずに、同型の同じコード ベースを使用して、シングル ページ アプリケーション (SPA)、サーバー側レンダリング (SSR)、静的サイト生成 (SSG) を構築したり、ルートごとにそれらを組み合わせたりできます。
- useState や useAsyncData などの複数のコンポーズ可能な関数を使用して、サーバー側とクライアント側のアクセス間で状態を共有します。
- useHead や useSeoMeta などの強化された SEO ツールにより、メタ タグの管理が簡単になります。
さらに、レイアウト システム、プラグイン、ルーティング ミドルウェア、その他のツールなどの機能により、アプリケーションの作成が容易になり、コードベースがより整理されます。
ファイルベースのルーティングやファイルベースのサーバー API などの規約により、ルーティングが直観的かつ簡単になります。
コンポーネントの自動インポートにより、任意の Vue ファイルで直接使用できる共有コンポーネントを簡単に作成できます。グローバル コンポーネントとは異なり、コード分割されています。また、複合関数の自動インポートも導入されており、Vue のすべての API がすぐに利用できるようになりました。Nuxt モジュールを使用すると、ネイティブおよびカスタム複合関数の自動インポートも可能になります。最近、ファイル名にと
を追加することで使用できるクライアント側とサーバー側のみのコンポーネントを導入しました。これらの規則はすべて完全に型指定されており、開発者はルートをナビゲートしたり、API からデータを取得したりするときに型のオートコンプリートを使用することもできます。これらの規則により、定型コードが大幅に削減され、重複が回避され、生産性が向上します。エコシステムの観点から見ると、Nuxt にはモジュールを構築するための巨大な開発者コミュニティがあり、数百の高品質モジュールを提供しています。モジュールを使用すると、開発者は構成やベスト プラクティスを気にすることなく、必要な機能を統合できます。.client.server
既存の問題
Nuxt を使用すると大規模なアプリケーションを簡単に作成できますが、透明性に欠けるという問題があります。
新しい機能や規約を導入するたびに、フレームワークにさらに抽象化を追加しています。
抽象化は、複雑さを軽減し、構築を容易にし、作業をより集中させるのに最適です。その一方で、基礎的な原則を学び理解するためにユーザーに余分な負担を課すことにもなります。たとえば、自動インポートされたコンポーネントがどこから来たのか、特定のコンポーネントを使用しているモジュールの数など。また、コードのデバッグも困難になります。
トレードオフがあり、ツールを効果的に使用するにはツールを学び、理解する必要があります。私たちはドキュメントを改善し、より多くの例を提供しましたが、透明性の欠如を改善する機会はあると考えています。
Nuxt DevTools の紹介
Nuxt DevTools は、Nuxt アプリケーションを理解し、開発者のエクスペリエンスをさらに向上させるのに役立つ視覚化ツールです。Nuxt とアプリケーションの透明性を高め、パフォーマンスのボトルネックを見つけ、アプリケーションと構成の管理を支援するために作成されました。
これは実験的なモジュールとして導入され、アプリケーション内のビューを提供します。インストールすると、アプリの下部に小さなアイコンが追加されます。クリックすると、DevTools パネルが開きます。
試してみるには、インストール ガイドを参照してください。
Nuxt DevTools タブの概要
概要
使用している Nuxt バージョン、ページ、コンポーネント、モジュール、プラグインなど、アプリケーションの概要を簡単に表示します。また、Nuxt のバージョンもチェックされ、ワンクリックでアップグレードできるようになります。
ページ
[ページ] タブには現在のルートが表示され、そこに簡単に移動する方法が提供されます。動的ルーティングの場合、各パラメーターを対話的に入力するフォームも提供されます。テキスト ボックスを使用して、各ルートを再生し、一致するかどうかをテストすることもできます。
コンポーネント
「コンポーネント」タブには、アプリケーションで使用するすべてのコンポーネントとそのソースが表示されます。それらを検索してソース コードに移動することもできます。
また、コンポーネント間の関係を示すグラフィカル ビューも提供します。コンポーネントをフィルタリングして、特定のコンポーネントの依存関係を確認できます。これは、予期しない依存関係を特定し、ページのパフォーマンスとバンドル サイズを改善するのに役立つ場合があります。
また、インスペクター機能を使用して DOM ツリーを検査し、どのコンポーネントがそれをレンダリングしているかを確認することもできます。クリックすると、特定の行のエディターに移動します。プロジェクトの構造を完全に理解していなくても、より簡単に変更を加えることができます。
輸入品
[インポート] タブには、Nuxt に登録されているすべての自動インポートが表示されます。どのファイルがインポートしているのか、またどこからインポートされたのかを確認できます。一部のエントリでは、短い説明とドキュメントへのリンクを提供することもできます。
モジュール
「モジュール」タブには、インストールしたすべてのモジュールが表示され、そのドキュメントとソース コードへのリンクが提供されます。Nuxt モジュールでさらに利用可能なモジュールを見つけることができます。
最近、Nuxt またはモジュールを簡単にアップグレードできる実験的なアップグレード機能を開始しました。[ターミナル] タブを使用すると、アップグレード プロセスの出力が透過的に表示されます。
資産
すべての静的アセットとその情報を表示する「アセット」タブ。アセットへのパスをコピーすることも、アセットのコード スニペットを使用することもできます。将来的には、Nuxt Image の統合により、ワンクリックで画像を最適化することもできるようになります。
プラグイン
[プラグイン] タブには、アプリで使用したすべてのプラグインが表示されます。プラグインはアプリケーションがインストールされる前に実行されるため、アプリケーションのレンダリングがブロックされないように、それぞれのプラグインに費やす時間を最小限に抑える必要があります。各プラグインで提供される時間コストは、パフォーマンスのボトルネックを見つけるのに役立ちます。
フック
[フック] タブは、クライアント側とサーバー側から各フックに費やされた時間を監視するのに役立ちます。各フックに登録されているリスナーの数と、それらが呼び出された回数も確認できます。これは、パフォーマンスのボトルネックを見つけるのに役立ちます。
アプリ構成
DevTools でアプリケーション構成を検査および変更し、さまざまな構成を試して、その効果をすぐに確認できます。
ペイロードとデータ
このタブには、 および によって作成されたステータスが表示されます。データがどのようにフェッチされ、状態が管理されるか、または受動的に変更されるかを理解し、アプリケーションへの影響を確認すると役立つ場合があります。および については、再フェッチを手動でトリガーすることもできます。useStateuseAsyncDatauseFetchuseAsyncDatauseFetch
端子
一部の統合では、何らかの作業を行うためにサブプロセスを実行する必要がある場合があります。DevTools を使用する前は、サブプロセスの出力を完全に隠して潜在的な警告/エラーを飲み込むか、標準出力にパイプしてターミナルを複数の出力で汚染していました。DevTools で各プロセスの出力を明確に分離して取得できるようになりました。
仮想ファイル
[仮想ファイル] タブには、Nuxt および Nitro によって生成された、規則に対応した仮想ファイルが表示されます。これは高度なデバッグに役立ちます。
検査する
Inspect は、Vite の変換ステップを検査できる統合を公開します。各プラグインがコードをどのように変換し、潜在的な問題を特定するかを理解するのに役立ちます。
VSコード
VS Code Server のおかげで、VS Code の完全に機能するインスタンスを DevTools に統合することができました。拡張機能をインストールして設定を同期できます。これにより、ブラウザを離れることなく、コードに変更を加えて結果をすぐに確認できる、より緊密なフィードバック ループが実現します。
モジュールの投稿ビュー
エコシステムを念頭に置いて、Nuxt DevTools は柔軟性と拡張性を備えたように設計されています。モジュールは独自のビューを DevTools に提供し、統合のためのインタラクティブなデータを提供できます。以下にいくつかの例を示します。
- VueUse モジュールは、利用可能な合成関数の検索ページを提供し、そのドキュメントを表示します。
- UnoCSS モジュールは、各モジュールが最終的な CSS にどのように貢献しているかを確認するための対話型インスペクターを提供します。
- Nuxt Icon モジュールは、利用可能なすべてのアイコンの検索エンジンを提供します。
- Nuxt Vitest モジュールは、Nuxt アプリケーションと同じパイプラインを使用して実行されるテスト用の Vitest UI を提供します。
モジュール作成者向け
v0.3.0 のリリースにより、モジュール作成者が DevTools に貢献できる機能が向上しました。
これも：
- モジュールの貢献ビュー
- クライアント アプリケーションと開発ツールのコンテキストにアクセスするためのユーティリティ
- サーバーとクライアント間で通信するためのカスタム RPC 機能
- サブプロセスの生成と出力の合理化
@nuxt/devtools-kit- モジュールを DevTools と統合するのに役立つ一連のユーティリティ@nuxt/devtools-ui-kit- モジュールのビューを残りの DevTools と一致させるために DevTools で使用される UI コンポーネント- DevTools 統合を使用してモジュールを作成するためのスターター テンプレート詳細については、『Devtools モジュール作成者ガイド』を
参照してください。
他に何をしましょうか？
これは旅の始まりにすぎません。私たちは、より直感的で興味深い方法でデータを表示する方法を模索しながら、DevTools にさらに多くの機能を追加する予定です。
Nuxt DevTools の目標は次のとおりです。
- 契約の透明性を向上させる
- パフォーマンスと分析を確認する
- インタラクティブな楽しみ
- パーソナライズされた文書
- アプリケーションの管理と構築が簡単
- 洞察と改善を提供する
- 開発体験をより楽しくする
プロジェクトのロードマップを確認し、意見や提案を共有することで、DevTools の改善にご協力いただけます。
GitHub リポジトリをフォローし、Nuxt の公式 Twitter をフォローすることで、最新の更新を追跡できます。
読んでいただきありがとうございます。フィードバックや貢献を楽しみにしています。
翻訳はここで終わります。
私は起業家歴 10 年のベテランであり、オープンソース テクノロジーの愛好家である Ming Liu です。コミュニケーションや学習を行っている場合でも、開発ニーズがある場合でも、プライベート メッセージでご連絡ください。
ご質問がございましたら、Lao Liu までお問い合わせください。