【Vite】React×TypeScriptの開発環境構築

Viteを使って、React×TypeScriptの開発環境を構築してみたので、まとめておきます。

Viteとは

Viteについて、公式サイトで以下のように説明がされています。

Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。

https://ja.vitejs.dev/guide/

高速な開発体験を強みとしており、近年注目が集まっているビルドツールのようです。

手順

Viteの公式サイトの手順に従って、環境構築をしていきます。
Node.jsおよびnpmがインストール済みであることを前提としています。

試したPCのOSは、Windows11です。

プロジェクトの作成

公式サイトに従って、プロジェクトを作成したいディレクトリで下記のコマンドを実行します。

$ npm create vite@latest simple-memo -- --template react-ts

simple-memoは、プロジェクト名です。

-- --template [テンプレート名]でテンプレートを指定できます。
VanillaやVueにも対応していますので、詳細は公式サイトをご確認ください。

--templateの前の--は、npmのバージョンが7系以上の場合に必要です。
npmのバージョンは、以下のコマンドで調べられます。

$ npm -v

パッケージのインストール

プロジェクトが作成できたら、プロジェクトのディレクトリに移動して、必要なパッケージをインストールします。

$ cd simple-memo
$ npm install

開発サーバーの起動

開発サーバーを起動します。

$ npm run dev

コマンドを実行すると、以下のようなメッセージが出てくるので、URLをブラウザで開きます。
以下の場合であれば、http://localhost:5173/をブラウザで開きます。

$ npm run dev

> simple-memo@0.0.0 dev
> vite


  VITE v4.5.0  ready in 617 ms

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

以下のような画面が出ていれば成功です。

Haruna Abe

Webエンジニア

X

フロントエンドエンジニア２年目｜ReactやTypeScriptなど、フロントエンドの情報を発信していきます