Viteとは？アプリ作成者向けにわかりやすく解説

Vite（ヴィート、フランス語で「速い」の意味）は、Webサイトやウェブアプリのためのビルドツールです。作っている間は、変更をブラウザにほぼ即座に表示する開発サーバーを動かします。公開の準備ができたら、コードを小さく最適化されたファイルにまとめ、どのWebホスティングでも配信できる形にします。無料かつオープンソースで、ReactやVue、Svelteのプロジェクトの多くを裏で支えている標準的なツールです。

AIで作る場合にViteが大切な理由

Viteのコマンドを自分で打つことはないかもしれませんが、AIアプリビルダーで作ったアプリなら、裏ではたいていViteが動いています。Mythexは、別の指定がない限り新しいプロジェクトをVite + React + TypeScript + Tailwindで始めます（技術の選び方）。

Viteの役割を知っておくと、次の点で役立ちます。

• プレビューを理解できます。 AIがファイルを編集すると更新されるライブプレビューは、通常Viteの開発サーバーです。
• デプロイを理解できます。 Viteのアプリは、HTML、JavaScript、CSS、画像といった静的ファイルのフォルダになります。これはホスティングが安く、簡単です。
• エラーメッセージを読めます。 プレビューに赤いエラーの表示が出たり、真っ白なページになったりしたら、それはファイルのコンパイルに失敗したとViteが報告している場合が多いです。
• その限界を知ることができます。 Viteはフロントエンドをビルドします。アプリにバックエンド（データベース、秘密のAPIキー、決済）が必要なら、それは別の場所で動きます。フロントエンドとバックエンドの違いを参照してください。

身近なたとえ

レストランの厨房を考えてみてください。

• 仕込み（開発）の間は、シェフが料理ごとに味を見ながら調整します。味付けを変えて、すぐにもう一度味見をします。これがViteの開発サーバーです。ファイルを変更すると、ページがすぐに更新されます。フォームに入力した内容が消えないことさえ多いです。
• **仕出しの注文（本番）**では、すべてが調理され、分けられ、包装され、ラベルが貼られて、どこに運んでも崩れず、どこででも提供できるようになります。これがvite buildです。コードはまとめられ、小さくされ、固有のファイル名が付けられて、どのホストでも置ける状態になります。

同じレシピを、まったく違う2つの方法で扱うのです。Viteはその両方を行います。

Viteが実際に行うこと

現代のWebアプリは、コンポーネント、スタイル、画像、サードパーティのライブラリなど、多くのファイルでできています。ブラウザは、それらをそのままでは使えません。TypeScriptはJavaScriptに変換される必要があり、ReactのJSXは変換されなければならず、TailwindのクラスはCSSに変換されなければなりません。

Viteは、これを2つのモードで処理します。

古いツールは、画面を表示する前にアプリ全体をまとめていたため、大規模なプロジェクトを起動したり更新したりするのに長い時間がかかりました。Viteの工夫は、開発中にはその工程を省き、ブラウザが必要に応じてファイルを読み込めるようにすることです。本番では、依然としてまとめます。Vite 8からはRolldownというバンドラーを使っていますが、それは、小さなファイルが大量にあるより、最適化された少数のファイルのほうが訪問者にとって速いからです。

実例：Viteプロジェクトの中身

小さなVite + Reactアプリは、おおよそ次のような構成になっています。

my-app/
  index.html          ← the one HTML page the app starts from
  package.json        ← list of libraries and scripts (dev, build)
  vite.config.ts      ← Vite settings and plugins
  src/
    main.tsx          ← starts React and mounts it into index.html
    App.tsx           ← your app's top-level component
    index.css         ← styles, e.g. @import "tailwindcss";
  public/             ← files copied as-is (favicon, robots.txt)

そしてpackage.jsonのスクリプトは次のとおりです。

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

では、ひとつの変更を追ってみましょう。

1. AIに「見出しを青くして」と頼みます。
2. AIがApp.tsxのクラスを編集します。
3. Viteが、ファイルが変更されたことに気づき、そのファイルだけを変換して、更新をブラウザに送ります。
4. プレビューの見出しが青くなります。通常は1秒以内です。

公開するとき、vite buildはdist/index.htmlと、dist/assets/index-a1b2c3.jsのようなファイルを生成します。ランダムに見える部分のファイル名は、内容が変わるたびに変わります。そのため、ブラウザやCDNは、古いコードを配信することなく、ファイルを長期間キャッシュできます。

Viteの環境変数

Viteは、名前がVITE_で始まる変数だけを、ブラウザのコードに公開します。例えばVITE_PUBLIC_MAP_IDです。これは安全対策です。ブラウザのコードにあるものは、訪問者に見えてしまうからです。秘密のキーには、この接頭辞を付けてはいけません。 秘密のキーは、必ずバックエンドに置いてください。環境変数とシークレットを参照してください。

主要な用語

よくある誤解

• 「Viteはフレームワークだ」。 Viteはビルドツールです。フレームワークはReactやVue、Svelteであり、Viteはそれを動かしてまとめます。
• 「Viteのアプリにはバックエンドが含まれている」。 標準のViteアプリはフロントエンドだけです。データベース、ログイン、秘密のキーには、その横にサーバーやAPIが必要です。
• 「開発サーバーを公開しても問題ない」。 開発サーバーは本物の訪問者のトラフィックを想定していません。必ず本番ビルドの出力をデプロイしてください。
• 「.envにあるものはすべて秘密だ」。 Viteのアプリでは、VITE_の変数が、訪問者がダウンロードするすべてのファイルに埋め込まれます。
• 「404エラーのページを更新できないのは、アプリが壊れているからだ」。 シングルページアプリでは、ホストがすべてのルートをindex.htmlに返す必要があります。これはホスティングの設定です。デプロイ後の404エラーの直し方を参照してください。

AIビルダーに頼む内容

• 「このアプリはViteだけのフロントエンドですか、それともバックエンドもありますか？それぞれどこで動いていますか？」
• 「本番ビルドを実行して、公開前にすべてのエラーと警告を直してください。」
• 「秘密のキーがVITE_の変数に入っていないか、またはフロントエンドのコードのどこにも入っていないか確認してください。」
• 「プレビューが真っ白なページになっています。ViteとブラウザのコンソールのエラーをチェックしてFixしてください。」真っ白なページの直し方を参照してください。
• 「公開後は、ホームページだけでなく、どのページのURLを再読み込みしても動くようにしてください。」

MythexでのVite

Mythexでは、Next.js、静的HTML、別のバックエンドを頼まない限り、新しいプロジェクトはすべてViteで始まります。非公開のサンドボックスにあるライブのプレビューは、エージェントがファイルを編集するたびに更新されます。公開すると、アプリをビルドしてデプロイします。自分でホスティングを設定する必要はありません。後でAPIやデータベースが必要になったら、チャットで頼めば、MythexはViteのフロントエンドと並べてバックエンドのサービスを追加できます（マルチサービスのアプリ）。

よくある質問