Frontend Academy · レッスン

Vite：プラグインシステムとSSRモード

transformとloadフックを備えたViteプラグインを記述し、サードパーティープラグインを統合して、ssrBuildオプションでViteをサーバーサイドレンダリング用に設定します。

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

Viteが選ばれた理由

フランス語で「速い」を意味するViteは、Evan Youによって開発されました。開発時にはネイティブESモジュールを使ってソースファイルをバンドルせずに配信するため、コールドスタートが瞬時に完了します。本番環境ではバンドルにRollupを使用します。開発体験はWebpackよりも大幅に高速です。

Viteの開発サーバーの仕組み

最新のブラウザーはESモジュールをネイティブにサポートしています。Viteはソースファイルをそのまま配信し、必要に応じてTypeScriptやJSXを変換します。バンドルを行わないため、コールドスタートで待たされることがありません。

ホットモジュールリプレースメント

HMRはページを再読み込みせずにモジュールを置き換えます。ViteのHMRはESMを中心に構築されており、Webpackのものよりもはるかに高速です。ほとんどのフレームワーク（React、Vue、Svelte）がこれに対応し、状態を保持したままコンポーネント単位で更新できます。

Vite設定の基本

プロジェクトルートのvite.config.tsで設定します。

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: { port: 5173 },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom']
        }
      }
    }
  }
});

プラグインシステム

ViteプラグインはRollupプラグインを拡張したもので、開発サーバー用の追加フックを備えています。プラグインは、名前付きフックを持つオブジェクト、またはそのオブジェクトを返す関数です。

// myPlugin.ts
export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!id.endsWith('.mdx')) return null;
      // transform MDX to JS:
      return { code: compileMdx(code), map: null };
    },
    handleHotUpdate(ctx) {
      // react to file changes
    }
  };
}

// vite.config.ts
import myPlugin from './myPlugin';
export default { plugins: [myPlugin()] };

主要なフック

transform(code, id)：ファイルの内容を変更します（例：MDXのコンパイル、環境変数の注入）。load(id)：仮想モジュールの内容を提供します。resolveId(source)：モジュールの解決方法をカスタマイズします。configureServer(server)：開発サーバーにミドルウェアを追加します。

代表的なプラグイン

@vitejs/plugin-react（React + Fast Refresh）。@vitejs/plugin-vue。vite-plugin-pwa。vite-plugin-svgr（SVGをコンポーネントとしてインポート）。vite-plugin-checker（オーバーレイでTypeScript／ESLintを実行）。vite-plugin-mkcert（ローカルHTTPS）。

ViteのSSRモード

Viteは低レベルのプリミティブによるサーバーサイドレンダリングに対応しています。Nuxt、SvelteKit、Remix、Astroなどのフレームワークは、これを基盤として構築されています。独自のSSRを実装する場合は、ViteのSSRガイドに従います。

// server.ts
import { createServer } from 'vite';

const vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom'
});

express()
  .use(vite.middlewares)
  .use('*', async (req, res) => {
    const url = req.originalUrl;
    let template = await readFile('index.html', 'utf-8');
    template = await vite.transformIndexHtml(url, template);
    const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
    const appHtml = await render(url);
    res.send(template.replace('<!--app-html-->', appHtml));
  });

SSR向けのビルド

クライアント用とサーバー用の2つをビルドします。vite build --ssr entry-server.tsでサーバーバンドルを出力します。

// package.json
"scripts": {
  "build:client": "vite build",
  "build:server": "vite build --ssr src/entry-server.ts",
  "build": "npm run build:client && npm run build:server"
}

環境変数

import.meta.env.MODEは'development'または'production'です。VITE_を接頭辞とするカスタム変数が公開されます。

CSSの処理

ViteはCSS、CSS Modules（foo.module.css）、PostCSS（postcss.config.jsを自動検出）、CSSプリプロセッサ（Sass、Less、Stylus）を標準で処理します。プラグインを使ってクリティカルCSSを注入できます。

ViteとWebpackとTurbopackの比較

Vite：ESMネイティブの開発環境、Rollupによるビルド、幅広いエコシステム。Webpack：歴史が長く巨大で、設定の自由度が高い一方、低速です。Turbopack（Vercel）：Rust製でWebpack互換、現在はNextに組み込まれています。新規プロジェクトでは、SPAにはVite、Next固有の開発にはNext／Turbopackを選びます。

クイックチェック

Viteの開発サーバーのコールドスタートが、Webpackよりもはるかに高速なのはなぜですか？

まとめ：Vite

ESMベースの開発サーバーにより、瞬時のコールドスタートと高速なHMRを実現します。本番環境ではRollupを使用します。プラグインによってRollupのフック（transform、load、resolveId）とVite固有のフック（configureServer、handleHotUpdate）を拡張できます。SSRモードはcreateServerとmiddlewareModeで利用し、--ssrでビルドします。PWA、MDX、SVGR、mkcert向けのプラグインがあります。環境変数にはimport.meta.envを使用します。CSS Modules、PostCSS、プリプロセッサが組み込まれています。

よくある質問

「Vite：プラグインシステムとSSRモード」レッスンは無料ですか？

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

「Vite：プラグインシステムとSSRモード」で何を学びますか？

transformとloadフックを備えたViteプラグインを記述し、サードパーティープラグインを統合して、ssrBuildオプションでViteをサーバーサイドレンダリング用に設定します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

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

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

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

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

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

← Frontend Academyに戻る