ViteでReact環境を構築する方法【Windows11】

Viteとは

Vite（ヴィートと発音。フランス語で「速い」の意味）は、Web開発のビルドツールです。従来のWeb開発のビルドツールに比べて高速に動作します。

この記事では、Windows11にViteでReactの開発環境を構築する方法を解説します。

事前準備

Node.jsのインストール

ViteでReactプロジェクトを作成するにはNode.jsが必須になります。Vite公式サイトのガイダンスにもある通り、 Node.js 14.18+、16+ のバージョンが必要としていますが、執筆時点（2023年4月11日）のLTS（推奨版）である18.15.0をインストールしておけば問題ないです。インストールできていない場合は、お使いのプラットフォーム（Windows／Mac／Linux）に合わせて公式サイトからインストーラやソースコードを取得してインストールします。

使用しているNode.jsのバージョンが、公式サイトの推奨するバージョンよりも下位のバージョンの場合は、他のNode.jsを使用したプロジェクト等に影響がないか確認の上、アップグレードしておきましょう。

Reactのインストール

npm（Node Package Manager）を使用してReactをインストールします。npmはNode.jsをインストールすると自動的にインストールされます。npmはNode.jsのパッケージ管理システムで、ライブラリやフレームワークのパッケージをインストール、アップデート、アンインストールすることができます。

Reactのインストールが必要な場合は以下のコマンドを実行します。

npm install react react-dom

ViteでReact環境を構築する

プロジェクト用ディレクトリを用意する

プロジェクト作成用のディレクトリを用意します。ディレクトリ階層はできるだけ浅い方がアクセスしやすく使い勝手が良いと思います。筆者はCドライブ直下に以下のディレクトリを用意して環境を構築していますが、お好みの場所で問題ありません。

C:\development\vite-projects

ディレクトリができたら、WindowsのコマンドプロンプトやPowerShell、Visual Studio Codeのターミナル等で、ディレクトリを開きます。

インストールコマンドを実行する

Viteはnpm、yarn、pnpmでインストールすることができます。どのパッケージマネージャーを使用してもインストール手順は同じです。

※Node.jsのみがインストールされている環境では、npm以外は実行できません。yarnやpnpmでインストールを実行したい場合はそれぞれ個別にプラグインをグローバルにインストールする必要があります。

npmの場合

> npm create vite@latest

yarnの場合

> npm install -g yarn
> yarn create vite

pnpmの場合

> npm install -g pnpm
> pnpm create vite

コマンド実行後は画面の案内に従ってインストールを進めます。今回は、プロジェクト名「my-app」、フレームワーク「react」、プログラム言語に「Typescript + SWC」で作成してみます。

はじめに、プロジェクト名を入力します。

? Project name: » my-app

続いて、フレームワークを選択します。今回は「React」を選択しますが、この段階でVueやSvelteなどのフレームワークを選択することも可能です。

√ Project name: ... my-app
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Others

フレームワーク選択の次は、プログラム言語を選択します。

√ Project name: ... my-app
√ Select a framework: » React
? Select a variant: » - Use arrow-keys. Return to submit.
    JavaScript
    TypeScript
    JavaScript + SWC
>   TypeScript + SWC

今回は「TypeScript + SWC」の組み合わせを選びました。SWCはRustで作られたコンパイラで、公式サイトでもシングルコアでBabelより20倍、4コアで70倍高速と宣言しています。

SWC is 20x faster than Babel on a single thread and 70x faster on four cores.

Rust-based platform for the Web – SWC

√ Project name: ... my-app
√ Select a framework: » React
√ Select a variant: » TypeScript + SWC

Scaffolding project in C:\development\vite-projects\my-app...

Done. Now run:

  cd my-app
  npm install
  npm run dev

「Done.」が表示されたらアプリケーションの構築は完了です。

アプリケーションを起動する

構築が完了したら、「Now run」で表示されたコマンドを順番に実行し、アプリケーションが起動することを確認します。

> my-app@0.0.0 dev
> vite


  VITE v4.2.1  ready in 361 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

ブラウザで「Local」のURLにアクセスし、以下の画面が表示されたらインストール完了です。

まとめ

以上が、Windows11にViteでReactの開発環境を構築する方法です。開発規模が小さなうちは気にならなくても、開発が進み規模が大きくなるにつれてビルド時間も比例して長くなります。少しでもストレスなく開発するためにも、ぜひ試してみてください。