# Viteとは
Vite (フランス語で"速い"という意味) は、新しいフロントエンドビルドツールです。
主な目的は、開発サーバーの高速な起動とモジュールのホットリロードを実現することです。

# Viteを使うメリット
- 開発サーバーの起動が非常に高速
- モジュールのホットリロードが即時に行われる
- 本番ビルドも高速
- Webpackに比べて設定が簡単
- プリバンドルされたデータを利用し、高速なHMRを実現
- ロールアップをベースとしているため、最新のブラウザとNode.jsの機能を利用可能

# Webpackとの比較
Webpackは長年にわたり主流のビルドツールでしたが、大規模なプロジェクトでは起動が遅く、ホットリロードの応答が遅くなる傾向がありました。また、設定が複雑になりがちでした。

一方、Viteは開発サーバーの起動が非常に高速で、モジュールのホットリロードもスムーズに行われます。設定も比較的シンプルです。本番ビルドの速度も高速化されています。

# インストールして実行してみよう

まずはインストール
![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)

インストーラーの質問に答えると、新しいViteプロジェクトが作成されます。

# 開発サーバーを起動
プロジェクトディレクトリに移動し、次のコマンドを実行します:

![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)

ローカルサーバーが起動し、アプリケーションが自動的にブラウザで開きます。

# 参考

https://ja.vitejs.dev/


# 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

# Viteとは
Vite (フランス語で"速い"という意味) は、新しいフロントエンドビルドツールです。
主な目的は、開発サーバーの高速な起動とモジュールのホットリロードを実現することです。

# Viteを使うメリット
- 開発サーバーの起動が非常に高速
- モジュールのホットリロードが即時に行われる
- 本番ビルドも高速
- Webpackに比べて設定が簡単
- プリバンドルされたデータを利用し、高速なHMRを実現
- ロールアップをベースとしているため、最新のブラウザとNode.jsの機能を利用可能

# Webpackとの比較
Webpackは長年にわたり主流のビルドツールでしたが、大規模なプロジェクトでは起動が遅く、ホットリロードの応答が遅くなる傾向がありました。また、設定が複雑になりがちでした。

一方、Viteは開発サーバーの起動が非常に高速で、モジュールのホットリロードもスムーズに行われます。設定も比較的シンプルです。本番ビルドの速度も高速化されています。

# インストールして実行してみよう

まずはインストール
```: npm
npm create vite@latest
```

```: yarn
yarn create vite
```

インストーラーの質問に答えると、新しいViteプロジェクトが作成されます。

# 開発サーバーを起動
プロジェクトディレクトリに移動し、次のコマンドを実行します:

```: npm
npm run dev
```

```: yarn
yarn dev
```

ローカルサーバーが起動し、アプリケーションが自動的にブラウザで開きます。

# 参考

https://ja.vitejs.dev/


# 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11


Viteとは

Viteを使うメリット

続きを読むには単価診断を受けてください（30秒）