Vite でプロジェクトを作る

Vite でプロジェクトを作る

従来は、Vue CLI や create-react-app などのスクリプトを利用してサンプルのプロジェクトを作っていました。最近は、「Vite」というビルドツールがよく利用されているようなので簡単に紹介します。

色々なフレームワークで利用可能

React や Vue などのフレームワークを利用する際は、多くの場合は、パッケージ管理アプリのnpmなどを利用して開発するケースが多くなっています。もちろん、HTML に組み込む形で、利用する事も可能ですが、多様なモジュールを利用する場合も多く余り現実的ではありません。

以前は、Vue の場合は、「Vue CLI」や、React の場合は、「create-react-app」などのスクリプトを利用してサンプル（テンプレート）のプロジェクトを作って利用するというのが一般的でした。

これに対して、Vite を利用すると、Vue でも React などのフレームワークでも、同じような要領でサンプルのプロジェクトを作成することができて、開発用のサーバーや公開用のイメージの作成もできるという結構便利なツールです。

簡単な使い方

使い方は極めて簡単です。

$ npm create vite

と入力するだけです。コマンドラインで細かい指定をすることもできますが、単純に上のコマンドを実行すると、プロジェクト名や、利用するフレームワークを聞いてくるので、質問に答えて行くと目的のサンプルプロジェクトを作成できます。

プロジェクトを作成した後に、プロジェクトのフォルダに移動して

$ npm install

を実行して、必要なモジュールをインストールすれば、開発用のサーバーを起動できます。 起動は、以下のコマンドを実行すると、開発用のサーバーが起動されます。

$ npm run dev

サーバーは標準設定では、「localhost:3000」になっているので、Web ブラウザでこの URL を入力すれば開発を進める事が可能です。

公開用のイメージは、以下のコマンドで作成できます。

$ npm run build

で作成できます。公開用のイメージは、プロジェクトフォルダの下の「dist」というフォルダが作成されてその下に作成されます。

従来のプロジェクトとの違い

基本機能は、従来のスクリプトと似ていますが、細かい点では少し違いがあります。

大きな違いは、フォルダの構成とファイルの構成が若干違っています。 従来は、いわゆるエントリーポイントと呼ばれるファイルがあって、プロジェクトフォルダの下の「public」というフォルダに「index.html」というファイルが作成されました。Vite の場合は、これに相当するファイルは、「public」の下には作成されずに、「src」フォルダの下に作成されます。

こうした、細かい違いがある程度で実用上は殆ど差がありません。

実際に、簡単なプロジェクトで試してみましたが、大きな性能の差は感じられません。しかし、ホームページの情報をみると、サーバーの起動が速いなどの利点が書かれています。また、変更部分のアップデートも高速になっているとされています。現在までのところ、規模の小さなプロジェクトで試しただけなので、ここで言われている性能の差がどの程度なのかは分かりませんが、大きなプロジェクトで試すと違うかもしれません。

少なくても、同じようなインターフェースで複数のフレームワークが扱えるというだけでも大きなベネフィットと言えます。

技術は進化しています！

現状では、従来のスクリプトも利用可能なので、無理に Vite に切り替える必要性はありません。 しかし、プログラミングの世界では、このように新しい物が常に生まれています。

様子を見ながら、こうした新しい技術を取り入れていくと、開発の作業も効率化されます。 私も、まだ Vite を利用し始めたばかりで、その素晴らしさを十分には体験できていませんが、従来より便利になってきているのが分かります。

ところでこの Vite の利用には幾つか条件があります。

これは、利用するnpmのバージョンが、「12.2.0」より新いバージョンである必要があります。2022 年 2 月現在の LTS バージョンは、「16.14.0」になっているので、これを機会に、開発のキリが良い時を見て、NodeJS のバージョンを新くすることを考えると良いかと思います。

また、利用するnpmのバージョンによって、Vite で利用する「テンプレート」の指定の仕方も違っています。詳しくはVite の公式サイトをご覧ください。

まとめ

最近、Vue や React のサンプルプロジェクトの作成で、Vite を利用し始めました。 まだ、その利点を完全には享受していませんが、同じインターフェースで、一つのツールで Vue も React もカバーできるので、便利なので新規の開発を中心に利用しています。

便利なので是非試してみてください！