この記事はウェブクルー Advent Calendar 2023 12日目の記事です。
昨日は@wc-takahara さんの「TypeScriptのふわっとしている部分を再確認」でした。
Nuxt3のモジュールについて
これまで私はモジュールを必要に応じて導入することが多く、追加の利点を考える余地はあまりありませんでした。しかし、Nuxt公式サイトのモジュール一覧を見ると、実に多岐にわたる分野で役立つモジュールがたくさん存在していることがわかります。
この記事では、「開発効率の向上に貢献できそうなNuxt3のモジュール」を5点紹介します。
Nuxt Web Vitals
Web Vitalsに関する情報を取得し、それをGoogle Analytics（GA）と連携できるようになります。
このモジュールを使用することで、ページの読み込み速度やレンダリングの品質に関する計測結果を取得できます。これにより、改善のための洞察を得ることが可能であり、サイトの速度とパフォーマンス向上に貢献することができます。また、設定方法がシンプルであるため、カスタマイズも容易に行えるのが特徴です。
nuxt-seo-kit
6種類のSEO対策用モジュールを1つのパッケージにまとめたものです。
このパッケージを使用することで、sitemap.xmlの生成やサイトのクロール、JSON-LDの生成など、基本的なSEO対策を実装できます。
Nuxtを使用したSEOの設定には、通常多くのモジュールをインストールする必要がありますが、このパッケージを利用することで手軽にそれらの機能を取り入れることができます。新規サイトの開発において、このパッケージを試してみたいと思うポイントですね。
typed-router
nuxt-linkのto属性などでパスを指定する際に、ルートを自動補完してくれる機能を持っています。
具体的には、NuxtLink、useRouter、navigateTo、useRoute、useLocalePathなどの機能をサポートしています。この自動補完機能があれば、開発効率を大幅に向上させることができます。
例えば、パスやルート名を手動で入力する必要がなくなり、モジュールがそれらを補完してくれるため、開発作業がスムーズに進むことが期待できます。
html-validator
ハイドレーションエラーが起きる原因など一般的な問題を自動的に検出し、解決へと導いてくれます。ハイドレーションエラーの原因特定には時間がかかることがありますが、このモジュールを使うことでそれらの問題を素早く特定し、解決することができます。
また、設定オプションの一部としてusePrettierなどを設定すれば、ソースコードを整形してくれる機能も備えています。これにより、エラーの検出だけでなく、ソースコードの整形や修正も自動化されるため、開発効率の向上に非常に役立つでしょう。
link-checker
誤って記述されたリンクやパスなどでSEOに悪影響を及ぼす可能性のあるエラーを検出し、修正する機能を提供しています。例えば、/test/というパスを誤って/testooo/などと誤記述した場合に、エラーを検知してくれます。
また、nuxt-simple-sitemapと連携しており、正しいリンクかどうかを判断して補正する仕組みが備わっています。
特に便利な機能として、「ライブ検査」があります。これは、実際の画面上で誤ったリンクを設定した箇所を特定し、カーソルを合わせるとエラーを表示してくれます。さらに、正しいリンクを提案してくれるだけでなく、修正まで支援してくれる点が特徴です。記述ミスによるリンク切れ対策に非常に効果的なモジュールですね。ライブ検査のデモはこちらで確認できます。
まとめ
いかがでしょうか。どれもとても役立ちそうな機能なのではないでしょうか。自分も是非使ってみたいと思います。
また、いずれも日本語のドキュメントが少ないモジュールなので、
実際に使ってみて使い方や感想などを記事にできたら良いなと思っています。
Nuxt3には他にも様々なモジュールが存在しているので、機会がありましたら是非チェックしてみてください。
明日は@kentaro-arai さんの投稿になります。お楽しみに！
ウェブクルーでは一緒に働いていただける方を随時募集しております。
私たちと一緒に働きましょう！
https://www.webcrew.co.jp/recruit/