Nuxtのassetsディレクトリとは？〜何が嬉しいのか〜

Nuxt.jsでウェブサイトやアプリケーションを開発する際、画像やスタイルシート、フォントなどの「アセット」を効率よく管理することは非常に重要です。assetsディレクトリは、これらのファイルをビルドツールが適切に処理し、最適化や変換を行ったうえでアプリに組み込むための専用フォルダです。

この仕組みを使うことで、単にファイルを置くだけでなく、SassやLessなどのプリプロセッサを利用したスタイルのコンパイルや、画像の圧縮・最適化が自動的に行われます。結果として、開発効率の向上やパフォーマンスの改善につながるのが大きなメリットです。

まず結論：assetsディレクトリのポイント

• ビルド時に処理されるため、SassやPostCSSなどのプリプロセッサが使える
• 画像やフォントなどの静的ファイルも置けるが、publicディレクトリとは役割が異なる
• assets内のファイルはJavaScriptやVueコンポーネントから~assets/で参照可能
• 直接URLでアクセスする用途には向かず、ビルド後に最適化された形で利用される
• 画像の最適化やスタイルのモジュール化など、パフォーマンス改善に寄与する

いつ使うべきか？使わない方がよいケース

assetsを使うべきケース

• SassやLessなどのプリプロセッサを使ってスタイルを管理したいとき
• 画像をビルド時に圧縮・最適化したい場合
• フォントファイルをビルドに組み込みたいとき
• Vueコンポーネント内で動的に画像やスタイルをインポートしたい場合

assetsを使わない方がよいケース

• 直接URLでアクセスされることが前提の画像やファイル（例：faviconやrobots.txtなど）はpublicディレクトリに置く
• CDNなど外部配信を利用する静的ファイル
• ビルド時の処理が不要な単純な静的ファイル

実務でよくあるユースケースとサンプルコード

1. Sassファイルの管理と利用

assets/scss/main.scssにスタイルを記述し、Vueコンポーネントで読み込む例です。

// assets/scss/main.scss
$primary-color: #3490dc;

body {
  background-color: $primary-color;
}

import '~/assets/scss/main.scss'

このように書くと、ビルド時にSassがCSSに変換され、スタイルが適用されます。

2. 画像のインポートと最適化

assets/images/logo.pngをVueコンポーネントで使う例です。

<template>
  <img :src="logo" alt="Logo" />
</template>

<script setup>
import logo from '~/assets/images/logo.png'
</script>

ビルド時に画像は最適化され、ファイル名もハッシュ付きに変換されるためキャッシュ対策も自動で行われます。

3. フォントファイルの組み込み

assets/fonts/MyFont.woff2をCSSで読み込む例です。

@font-face {
  font-family: 'MyFont';
  src: url('~assets/fonts/MyFont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyFont', sans-serif;
}

このようにassets内にフォントを置くことで、ビルド時に適切に処理されます。

よくある落とし穴・注意点

1. SSRとHydrationの違いに注意

assets内のファイルはビルド時に処理されるため、サーバーサイドレンダリング（SSR）時にはファイルのパスが変わることがあります。Vueコンポーネントで画像を動的に読み込む場合は、ビルド後のパスを正しく解決できるようにimportやrequireを使うことが重要です。

2. 直接URLでのアクセスには向かない

assetsディレクトリのファイルはビルドツールが処理するため、/assets/のようなURLで直接アクセスできません。ユーザーが直接アクセスする必要があるファイルはpublicディレクトリに置きましょう。

3. パフォーマンスへの影響

大量の画像や大きなフォントファイルをassetsに置くと、ビルド時間が長くなったり、バンドルサイズが増加する可能性があります。必要に応じてCDN配信やpublicディレクトリの活用を検討してください。

まとめ

Nuxtのassetsディレクトリは、スタイルシートや画像、フォントなどのアセットをビルド時に最適化しながら管理できる便利な仕組みです。プリプロセッサの利用や画像の圧縮、動的インポートなど実務で役立つ機能が豊富にあります。一方で、直接URLでアクセスするファイルはpublicディレクトリに置くなど、使い分けが重要です。正しく理解して活用すれば、開発効率とパフォーマンスの両面で大きなメリットを享受できます。