vite について
フロントエンド開発者向けの Vite 6.x スキルです。設定や開発・本番ビルドに加え、プラグイン、フレームワーク連携、高度な API を解説します。
主な機能
- 01設定とコマンドライン操作
- 02TypeScript、JSX、CSS の処理
- 03プラグインと静的アセット
- 04環境変数と HMR
- 05本番・ライブラリ・SSR ビルド
- 06JavaScript とプラグイン API
活用シーン
- 01Vite プロジェクトの設定
- 02開発サーバーの構築
- 03ライブラリや複数ページアプリのビルド
- 04Vite とバックエンドの連携
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/viteを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
GENERATION.mdLICENSE.mdSYNC.mdreferences/advanced-api.mdadvanced-backend.mdadvanced-performance.mdadvanced-plugin-api.mdbuild-library.mdbuild-production.mdbuild-ssr.mdcore-cli.mdcore-config.mdcore-features.mdcore-plugins.mdfeatures-assets.mdfeatures-css.mdfeatures-dep-bundling.mdfeatures-env.mdfeatures-glob-import.mdfeatures-hmr.mdfeatures-workers.md詳細
Vite は、ネイティブ ES モジュールによる即時のサーバー起動、超高速な HMR、Rolldown/Rollup を使用した最適化済みの本番ビルドを特徴とする、フロントエンド開発向けの最新のビルドツールです。TypeScript、JSX、CSS プリプロセッサーを標準でサポートし、豊富なプラグインエコシステムを備えています。
このスキルは Vite 6.x に基づいており、2026-01-28 に生成されました。
コア
| トピック | 説明 | リファレンス |
|---|---|---|
| 設定 | 設定ファイルのセットアップ、defineConfig、条件付き設定と非同期設定 | core-config |
| CLI コマンド | 開発サーバー、ビルド、プレビューのコマンドとオプション | core-cli |
| コア機能 | TypeScript、JSX、CSS、HTML の処理、JSON の処理 | core-features |
| プラグインの使用 | プラグインの追加、設定、順序付け | core-plugins |
機能
| トピック | 説明 | リファレンス |
|---|---|---|
| CSS の処理 | CSS モジュール、プリプロセッサー、PostCSS、Lightning CSS | features-css |
| 静的アセット | アセットのインポート、public ディレクトリ、URL の処理 | features-assets |
| Glob インポート | import.meta.glob、動的インポート、一括読み込み | features-glob-import |
| 環境変数 | .env ファイル、モード、import.meta.env 定数 | features-env |
| HMR API | ホットモジュールリプレースメントのクライアント API | features-hmr |
| Web ワーカー | ワーカーのインポートと設定 | features-workers |
| 依存関係の事前バンドル | optimizeDeps、キャッシュ、モノレポのセットアップ | features-dep-bundling |
ビルド
| トピック | 説明 | リファレンス |
|---|---|---|
| 本番ビルド | ビルドオプション、ブラウザーのターゲット、複数ページアプリ | build-production |
| ライブラリモード | 適切なパッケージエクスポートを使用したライブラリのビルド | build-library |
| SSR | サーバーサイドレンダリングのセットアップと設定 | build-ssr |
高度な内容
| トピック | 説明 | リファレンス |
|---|---|---|
| JavaScript API | createServer、build、preview のプログラマティック API | advanced-api |
| プラグイン API | Vite プラグインの作成、フック、仮想モジュール | advanced-plugin-api |
| パフォーマンス | 開発サーバーとビルドの最適化のヒント | advanced-performance |
| バックエンド統合 | 従来のバックエンドとの Vite の統合 | advanced-backend |
コメント
Markdown 対応