などの疑問や悩みを解決してまいります。
Vue.jsを使用してプロジェクトを作成する中で「Webpack」や「Parcel」、「Vite」などを聞くことがあるかと思います。
これらはビルドツールと言われるもので、今回はそのうちViteについて解説を交えながらViteプロジェクトの作成方法についても解説していきます。
初心者の方にもわかりやすく説明していきますので、参考になれば幸いです。
Viteとは
Viteとは、プロジェクトを高速開発をすることができるためのビルドツールです。
ビルドツールは他にも「Webpack」や「Parcel」がありますが、これらよりもViteは高速で動作するということで有名です。
Viteを導入するメリット
次にViteを導入する上でのメリットを紹介していきます。
開発サーバーの立ち上げが早い
まず開発サーバーの立ち上げが早いことが挙げられます。
大規模開発になるとチームで開発することがほとんどだと思います。
自分が開発している間にも、他の方が別ページや機能を開発することになるので自然とファイルやコード量も増えていきます。
そのためバンドルを再構築する必要があります。
更新がある度にバンドルをいちいち再構築していては時間もかかってしまい開発パフォーマンスの低下にもつながってしまいます。
ViteはES Modules（ESM）をベースにしており、開発時にはモジュールやファイルを単一のファイルにバンドルせずに、個々のモジュールを保持します。
これにより、必要なモジュールやファイルだけがリクエストされるため、ビルドプロセスが軽量化され高速化につなげているということになります。
ファイルの編集内容がブラウザに反映されるまでの時間が早い
Viteはホットモジュールリプレースメント（HMR）をサポートしています。
このHMRは、ファイルが変更された場合に、変更が加えられたモジュールだけを再ロードする仕組みです。
これにより、ページのリロードが最小限に抑えられ、開発者は素早く変更を確認できます。
Viteプロジェクトの作成方法
それではViteプロジェクトを作成していきましょう。
まずプロジェクトを作成したいディレクトリでターミナルを開きます。
開きましたら以下コマンドを入力してください。
npm create vite@latestこれでViteプロジェクトが作成されていきます。
作成する中でプロジェクトの名称や使用フレームワークなど必要項目を入力、設定をして作成完了です。
次に作成したViteプロジェクトに移動します。
cd vite-project作成したViteプロジェクトのフォルダに移動したら次は以下コマンドでViteを利用できるようにしていきます。
npm installするとインストールが始まります。
これで開発サーバーを立てることもできるようになりましたので、以下コマンドを入力します。
npm run devすると以下のようにローカルサーバーのURLが表示されるかと思います。
こちらのURLにアクセスして以下のようにページが表示されればOKです！
