はじめに
こんにちは！クライアント開発チームの安野です。
クライアント開発チームでは、クライアントポータルという to B 向けのサービス開発を担当しており、私はそこでフロントエンド・バックエンドの開発に携わっています。
クライアントポータルの内容はこちらからも確認できるので、ご興味があれば是非ご一読いただけますと幸いです！
そんなクライアント開発チームですが、先日 Nuxt の更新を行いました。
更新に伴ってNuxt Devtools も利用可能となったため、それが持つ機能やどんなことができるのか調べてみました。
Nuxt Devtools とは
Nuxt Devtools は Nuxt で作成されたアプリケーションの分析をするためのツールです。
Nuxt DevTools: Unleash Nuxt Developer Experience
デバッグやパフォーマンス周りの動作をモニタリングできる機能で、開発体験の向上が期待されるそうです。
導入
Nuxt v3.8.0 以降の場合、デフォルトで Nuxt Devtools は有効になっています。
アプリ内にて⇧ Shift + ⌥ Option + D を押下すると画面上から Nuxt Devtools を確認できます。
Nuxt DevTools is enabled by default in Nuxt v3.8.0. You can press Shift + Alt / ⇧ Shift + ⌥ Option + D in your app to open it up. https://github.com/nuxt/devtools?tab=readme-ov-file#installation
有効となっている場合はページ下部に devtool が表示されます。
今回は適当なサンプルアプリで紹介を進めます。
提供されている機能
Nuxt Devtools では多くの機能が提供されています。
主だったものを以下に紹介します。
ルーティング情報
ルーティングの一覧を参照できる。
クリックすると選択したリンクに遷移できる。
プロジェクト内のコンポーネント
https://devtools.nuxt.com/guide/features#components
Nuxt が認識するコンポーネントの一覧を参照できる。
Inspectモード
で画面上から要素を選択することもできる。
選択するとエディター上で該当のコンポーネントが開かれる。
コンポーネントツリー
コンポーネントの親子関係を参照できる。
前述の Inspect モードのように、ページ上から任意のコンポーネントを選択することができる。
アセット
利用しているアセットを参照できる。
https://devtools.nuxt.com/guide/features#assets
pinia
pinia を利用している場合のみ確認できる。
pinia で定義しているストアと、各ストアに格納されている state の値を参照できる。
Timeline ビューでは画面操作にしたがって、実行されたストア関数が参照できる。
後述しますが、state 内の値を書き換えることも可能です。
Nuxt サーバのエンドポイント
Nuxt サーバで定義しているエンドポイントの一覧を参照できる。
さらにツール上でリクエストを実行することもできる。
ユースケース
ここまで機能ベースでお伝えしてきましたが、できることベースで便利だった使用方法を紹介します。
画面からその要素を出力しているコンポーネントを特定する
表示されている商品カードがどのコンポーネントで出力されているか確認したい場合
Inspect モードを起動して、
特定したい要素をクリックするとエディターで該当のコンポーネントを開いてくれます。(便利！)
コンポーネントの親子関係を特定する
表示されている商品カードの親子関係を確認したい場合
Components TreeからInspectモードを起動し任意のコンポーネントをクリックすると、コンポーネントの親子関係を示したツリーを表示してくれます。
コンポーネントが受け取るprops等もここで確認できます。
(ProductCard配下には特にコンポーネント作っていないですが...例えばAtomsButtonのようなコンポーネントがあればここから確認することもできます。)
ストアの値を変更して画面の表示を確認する
表示されている項目の要素数を増やしてスタイル崩れが発生しないか確認したい場合
Piniaから変更を確認したい箇所のデータを保持しているストアを開く
既存の要素の値をEdit Valueで確認してコピーする
配列側でAdd new valueして新たな要素を作成し、コピーした値をペーストする
すると、ストアの値を参照している部分の値が画面上更新されます。
一時的なものですがわざわざテストデータを投入せずに済むため、エッジケースの確認に便利そうです。
他にも、例えばユーザの属性をストアで持っている場合には、ツール上で一時的にユーザの属性を変更して画面の動作を確認するといった使い方もできるかと思います。
(ex: 一時的に権限強めのユーザ属性に切り替えて、操作に権限が必要なページへのリンクが表示されるか確認する)
アプリ内のページ一覧を確認して任意のページに遷移する
Pagesを選択するとアプリ内のページ一覧を確認できます。
ページに適用されているミドルウェアもここから確認することができます。
ここでページを選択すると、そのページに遷移してactiveなルートを切り替えることができます。
直リンクされた時の動作確認に使えそうです。
また、各ページのOpen in editorアイコンを選択すると、そのページコンポーネントをエディターで表示してくれます。
ページ単位でコンポーネントを追いたい時に便利そうです。
終わりに
一通り調べてみましたが、使い勝手の良い機能が多く開発効率を高める効果が期待できそうです。
特に画面上からコンポーネントを確認できる機能が個人的に一番使いそうでした。
他にも今回あまり調査できていないですが、デバッグやパフォーマンス改善の観点でも効果的な利用が見込めるかと思います。
ビザスクではエンジニアの仲間を募集しています！ 少しでもビザスク開発組織にご興味を持たれた方は、ぜひ一度カジュアルにお話ししましょう！ developer-recruit.visasq.works
