Nuxt 3のAuto-imports機能に関する所感
はじめに
Nuxt 3には
Auto-importsという機能があります
この仕組みを使っていて思ったことについてまとめてみます
仕組みについて
Nuxt 3では以下のいずかのディレクトリにあるモジュールから
export されているAPIを
import 文を書かずに自動で利用することができます。
components/
composables/
utils/
例えば、 composables/useCounter.ts というファイルがあったとします
composables/useCounter.tsexport function useCounter() {
const count = ref(0);
const increment = () => {
count.value++;
};
const decrement = () => {
count.value--;
};
return { count, increment, decrement };
}
この場合、アプリケーションでは import を書かずにこの useCounter() を利用することができます
components/Counter.vue<script setup lang="ts">
const { count, increment, decrement } = useCounter();
</script>
個人的意見
この仕組みは記述量を減らすことができ、一見、とても便利な仕組みのように見えます
しかし、個人的にはこの仕組みは乱用をすると危険な仕組みなのではないかと思っています
たしかにこの仕組みには、記述量を減らし開発スピードを改善する効果が期待できると思います
しかし、この仕組みにはES Modulesの仕組みによってもたらされるメリットが損なわれてしまうというデメリットが考えられます
具体的には以下のような点です
1. あるモジュールがどのモジュールに依存しているかが不明瞭になってしまうこと
例えば、以下のファイルは import があることにより utils/foo と utils/bar に依存していることがすぐにわかります
javascriptimport { foo } from '@/utils/foo';
import { bar } from '@/utils/bar';
ESLintのこれらの仕組みを使うことで、あるディレクトリで提供されるモジュールに関する読み込みなどを制限することができます
具体的には、 ./domain ディレクトリからは ./infrastructure ディレクトリのモジュールへの import を禁止する、といったことなどができます
Auto-importsの仕組みはこういった制限を掛けることが難しく、また、容易に制限をすり抜けてしまうことも考えられます
3. composables/ や utils/ で公開されている各API(関数, クラス, 変数など)が、実質的にグローバル変数またはグローバル関数として扱われてしまうこと
4. Auto-importsに依存しているモジュールに対してユニットテストを書きたい場合に ReferenceError が発生してしまうこと
components/**/*.vue から composables/**/*.ts を import なしで読み込めるようにすることはまだよいかもしれませんが、 components/**/*.vue から utils/ 内のありとあらゆるモジュールを import なしで読み込めてしまうのは、控えめに使用しないと設計が破綻してしまうリスクもあるのではないかと思います
そもそも、
LSPを使えば
import 文の自動挿入を行うこともできるため、実はそこまで恩恵がない可能性もあるのではないかと思います
そのため、Auto-importsによる import 文の省略というのは、メリットよりもデメリットの方が大きいのではないかと個人的には思いました
utils/ に配置したあらゆるモジュールは import をせずに利用できてしまうので、あまり乱用はしすぎず、適宜、その他のディレクトリを設けてモジュールを配置するようにした方が安全なのではないかと思いました
おわりに
やや批判的な内容にはなってしまいましたが、
Nuxt 3は様々な機能や有益な仕組みが提供される優れたフレームワークです
Auto-importsの仕組みは便利な機能であることは間違いないと思うものの、その分、乱用することによってリスクが生じる可能性もあると思います
控えめに使う分には便利な仕組みだと思うので、乱用しすぎないようにするのが良いのではないかと思います
また、このページで紹介した懸念については、あくまで
Nuxt 3を使ってバックエンドまで含めてフルスタックにアプリケーションを開発する場合に生じる可能性があるもので、
BFFとしての利用や小規模なアプリであればそこまで問題はないと思います