0Pricing
Vue Academy · レッスン

Viteエコシステム：プラグインとツール

unpluginエコシステム、vite-plugin-vue、vite-plugin-inspect、vite-bundle-visualizer

「Viteエコシステム：プラグインとツール」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

Viteプラグインエコシステム

Viteのプラグインシステム（RollupのインターフェースにVite固有のフックを加えたもの）は、豊かなエコシステムを支えています。Vueプロジェクトでは、自動インポート、自動コンポーネント登録、変換処理の確認、バンドル分析などのプラグインによって、開発者体験が大幅に向上します。

unplugin-auto-import

unplugin-auto-importは、よく使うAPI（Vueのrefやcomputed、RouterやPiniaのヘルパー、自作のcomposableなど）を自動的にインポートします。そのため、import文を記述せずに使用できます。

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts'
    })
  ]
})

composableの自動インポート

composableのディレクトリを指定すると、そこにある関数もグローバルに利用できるようになります。さらに.d.tsファイルを生成するため、TypeScriptやエディターでもその関数を正しく認識できます。

AutoImport({
  imports: ['vue'],
  dirs: ['src/composables'], // auto-import useFoo, useBar
  dts: 'src/auto-imports.d.ts'
})

// in a component, no import needed:
// const x = ref(0); const { user } = useAuth()

unplugin-vue-components

unplugin-vue-componentsは、コンポーネントを必要なときに自動インポートして登録します。テンプレートに<MyButton />と記述するだけで、プラグインが自動的にインポートします。未使用のコンポーネントをtree-shakingすることもできます。

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts'
    })
  ]
})

UIライブラリ用のリゾルバー

componentsプラグインは、人気のUIライブラリ（Element Plus、Vuetify、Naive UI）向けのリゾルバーに対応しています。使用したコンポーネントとスタイルを自動的にインポートできるため、手動登録は必要ありません。

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

Components({
  resolvers: [ElementPlusResolver()]
})
// <el-button> now works with no import

vite-plugin-inspect

vite-plugin-inspectは、各プラグインがパイプラインでコードをどのように変換するかを確認できるUIを提供します。ファイルが最終的になぜその形になったのかをデバッグする際に非常に役立ちます。

import Inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [Inspect()]
})
// visit http://localhost:5173/__inspect/ in dev

変換パイプラインを読み解く

Inspect UIでは、モジュールを選択して各プラグインの変換処理を順番に確認できます。たとえば、Vue SFCがrender/scriptに分割される様子や、auto-importによってコードが挿入される様子を確認でき、問題のあるプラグインを特定できます。

バンドルビジュアライザー

本番バンドルのサイズを把握するには、ビジュアライザープラグイン（例：rollup-plugin-visualizer）を使用します。ビルド後に各チャンクに含まれる内容を、インタラクティブなツリーマップとして表示します。

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({ open: true, filename: 'stats.html' })
  ]
})

ビジュアライザーの分析結果を活用する

ツリーマップを使って、サイズの大きい依存関係や重複しているパッケージを見つけます。よくある対策は、重いルートやコンポーネントの遅延読み込み、より軽量なライブラリへの切り替え、manualChunksによるベンダーコードの分割です。

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia']
      }
    }
  }
}

プラグインを組み合わせる

これらのプラグインは相性よく組み合わせられます。一般的なVue設定では、自動インポート、components、開発時のみ使用するinspect、ビルド時のみ使用するビジュアライザーをまとめて設定し、快適なワークフローを構築します。

plugins: [
  vue(),
  AutoImport({ imports: ['vue', 'vue-router'] }),
  Components({ dirs: ['src/components'] }),
  Inspect(),
  visualizer({ filename: 'stats.html' })
]

dtsファイルとGit ignoreの注意点

auto-importプラグインとcomponentsプラグインは.d.tsファイルを生成します。これらをコミットするか（ビルドなしでCIの型チェックを行うのに役立ちます）、gitignoreに追加するか（開発開始時に再生成されます）を決めてください。どちらの場合も、tsconfigのincludesには含めておきます。

理解度チェック

Viteツールエコシステムについての理解度を確認しましょう。

まとめ

Viteツールエコシステムについて学びました。

  • unplugin-auto-import — Vue APIとcomposableを自動インポートします
  • unplugin-vue-components — UIリゾルバーにも対応し、コンポーネントを自動インポート・登録します
  • vite-plugin-inspect — 各モジュールがプラグインによってどのように変換されるかを確認できます
  • バンドルビジュアライザー — チャンクの内容をツリーマップで表示し、最適化の指針を示します
  • これらのプラグインを組み合わせることで、Vueの開発・ビルドワークフローが快適になります

よくある質問

「Viteエコシステム：プラグインとツール」レッスンは無料ですか？

はい。「Viteエコシステム：プラグインとツール」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「Viteエコシステム：プラグインとツール」で何を学びますか？

unpluginエコシステム、vite-plugin-vue、vite-plugin-inspect、vite-bundle-visualizer ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「Viteエコシステム：プラグインとツール」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Vue Vapor Mode：コンパイル時最適化
  2. Viteエコシステム：プラグインとツール
  3. Vue Macrosとコミュニティ提案
  4. 2025年以降に適したVueスタックの選び方
← Vue Academyに戻る