Viteとは何ですか？ Vite で React プロジェクトを初期化するチュートリアル

Vite は、速度とパフォーマンスの制限を克服することを目的として生まれた、Web アプリケーション開発および構築ツールです。

React 開発環境を素早く簡単にセットアップする方法をお探しですか? Vite はまさにあなたが探していた答えかもしれません。高速性とシンプルな構成により、Vite は開発者にとっての第一の選択肢になりつつあります。 Viteを強力なアシスタントにしましょう。

この記事では、次の内容について学びます。

• Viteとその優れた機能とは何ですか?
• React + Viteプロジェクトの初期化方法の詳細なガイド

1. Viteとは何ですか?

Vite（「vit」と発音し、フランス語で「速い」を意味する）またはVitejsは、Vue.jsを開発したEvan Youによって作成されたWebアプリケーション開発および構築ツールです。Viteは、速度とパフォーマンスの制限を克服することを目的として誕生しました。

Vite は、ブラウザのネイティブ ES モジュールを活用し、ホット モジュール置換 (HMR)機能を提供することで、Web プロジェクトの構築に新しいアプローチをもたらします。

Reactを使用してシンプルな Web アプリを構築しているとします。Vite以前は、 WebpackやCreate React App (CRA)などの人気のツールが広く使用されていました。ただし、これらのツールは起動時やコードの更新時に遅くなる可能性があります。

2. Vite の方が速いのはなぜですか?

• 以前は、Webpack は、ブラウザーが Web ページを読み込んで表示する前に、ソース コード全体を 1 つ以上の大きなファイルに「バンドル」する必要があり、特にソース コードが大きく複雑な場合は、プロジェクトの起動に時間がかかりました。
• Vite は、Rollup を活用して最終的なコードバンドルを実行し、コンパクトで最適化されたファイルを作成し、それによってアプリケーションの全体的なパフォーマンスを向上させるという点で異なります。
• さらに注目すべきは、Vite が開発中にソースコードを処理する方法です。 Vite は、すべてのコードを最初からバンドルするのではなく、ブラウザでサポートされているJavaScript標準である ES モジュールを使用して、必要に応じて個々のモジュールを読み込みます。つまり、Web サイトで複数の JavaScript ファイルを使用している場合、Vite は最初に全体を読み込むのではなく、その時点でブラウザが要求したファイルのみを提供します。
• コードを変更すると、Vite はアプリケーション全体を再パッケージ化することなく、関連する部分のみを更新します。これにより、応答時間が短縮されるだけでなく、スムーズで継続的な開発エクスペリエンスも提供され、ワー​​クフローを中断することなく変更の結果をすぐに確認できるようになります。

Vite は、すべてを 1 つのステップにまとめるのではなく、作業を「分解」してその時点で必要なことだけを実行するため、開発プロセスがはるかに高速かつ柔軟になることがわかります。

3. Viteを使う理由

• クイック スタート: Vite を使用すると、プロジェクトをほぼすぐに開始できるため、時間を節約できます。
• シンプルな構成: Vite はセットアップが簡単で、特に初心者に優しいように設計されており、複雑な構成に煩わされることなくプロジェクトを開始できます。
• TypeScript サポート: Vite はTypeScriptと適切に統合されており、TypeScript の強力な機能を最大限に活用しながら、より安全で保守しやすいコードを作成するのに役立ちます。
• 高性能:ブラウザネイティブの ES モジュールとホット モジュール置換 (HMR) を使用することで、Vite はコード変更時に即座にフィードバックが得られるスムーズな開発エクスペリエンスを実現します。

4. Viteの特徴と機能

• ネイティブ ESM によるオンデマンド ファイル配信:ソース コード全体を 1 つの大きなブロックにパッケージ化するのではなく、Vite はブラウザーのネイティブ ECMAScript (ESM) モジュールを活用して、必要に応じて個々のファイルを読み込みます。このアプローチにより、複雑なパッケージングが不要になり、パフォーマンスが高速化され、最適化されます。
• ホット モジュール置換 (HMR): Vite は、ページを再読み込みしたりアプリケーションの状態を失ったりすることなく、コードの変更を即座に確認できる機能を提供します。これにより、開発エクスペリエンスがよりスムーズかつシームレスになります。
• Vite のプラグイン API と JavaScript API:新しい機能を追加したり、Vite の動作を変更したり、他のツールと統合したりして、単純なものから複雑なものまで、プロジェクトの要件に合わせて調整できます。
• 複数のフレームワークとテクノロジーをサポート: Vite は React、Vue と連携して動作します。さらに、Sass および Tailwindcss と統合されているため、アプリケーションを簡単かつ効率的に構築できます。

6. React Viteプロジェクトの初期化手順

お使いのコンピューターにはすでに Nodejs がインストールされているものと想定していますが、方法がわからない場合は、こちらを参照してください。

// npm
npm create vite

// yarn
yarn create vite

// pnpm
pnpm create vite

// bun
bun create vite

インストールが完了したら、指示に従ってnpm install必要なライブラリをインストールします。最後にnpm run devプロジェクトを実行します。
デフォルトでは、Vite はポート 5173 で実行されます。ポートを再設定する場合は、ファイルを開いてvite.config.ts編集します。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
})

7. 結論

Vite は優れた速度とパフォーマンスを提供するだけでなく、React と TypeScript を使用した Web アプリケーション開発を簡素化します。

Webpack のような従来のツールに代わるものを探している場合は、Vite を試してみると違いがわかるでしょう。迷わずに、Vite で最初のプロジェクトの構築を始めましょう。