Viteについて

目的

Vite（ヴィート）がReactを使いたい時になぜ必要なのかわからなかったのでメモ。

Viteの役割とは

現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツール

1. ローカル開発時のサーバーとなる
   • Viteによってファイルを保存すると自動的にブラウザが更新される（そして高速）
     • ない場合は手動でブラウザをリロードする必要あり
2. 本番用のビルドを行う
   • AWSなどのサーバーがある場合、Vite自身がサーバーになる必要はない
   • 本番用に最適化したビルド結果（静的ファイル）を生成する
3. モジュールのバンドルを行う
   • ページやコンポーネントを効率的にブラウザに届ける準備をする
     • 具体的には複数のjsファイルをなるべく1つにまとめてくれる
4. CSSや画像ファイルを直接インポートし、適切に処理する
   • React単体ではUIコンポーネントを構築するライブラリなので、CSSファイルや画像をJavaScriptにインポートする仕組みがない
5. 環境変数の管理
   • 開発環境と本番環境で異なる環境変数の設定・管理ができる
6. TypeScriptのサポート
   • 追加の設定なしでTypeScriptファイルを使用できる
7. Vite経由で追加できるプラグインが豊富
8. JSX変換
   • JavaScript XML（JavaScriptの構文拡張）をJavaScriptに変換する

変換前（JSX）

// React と ReactDOM をインポート
import React from 'react';
import ReactDOM from 'react-dom/client';

// 関数コンポーネント
function Welcome(props) {
  // JSXを使用してh1要素を返す
  return <h1>Hello, {props.name}</h1>;
}
// JSXを使用してWelcomeコンポーネントを呼び出し、nameプロパティを渡す
const element = <Welcome name="Sara" />;

変換後（JavaScript）

// propsを引数として受け取り、createElementするときにnameプロパティのみ使っている
function Welcome(props) {
  return React.createElement("h1", null, "Hello, ", props.name);
}

// 一つ目のcreateElementとは別に、Reactコンポーネントをつくるため、Welcomeを呼び出して、{ name: "Sara" }をいれたものをelement化
const element = React.createElement(Welcome, { name: "Sara" });

// DOM に描画する部分（appにおける最上位で1回だけ行う）
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

Vite以外のビルドツール

• Webpack
• Next.js（フレームワークであり、ビルドシステムを内包しているのでNext.js使う時はVite不要）