初めに
Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。
一体全体あれはなんなのでしょうか？？
なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、
ファイルを編集するだけでブラウザで動くようになっていたりします。
そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？)
この記事では、Vite についての基本的な情報をまとめてみます。
発音？
発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。
Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、
しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。
例えば、話題になった Kawaii ロゴではそのように表記されています。
まぁこれらはカタカナ表記の限界であり、確かに発音記号的には「ヴィット」ですが、実際、日本人の耳には「ヴィート」のように聞こえるでしょう。
これらが厳密にどっちであるかは大した問題ではありません。
(あまりカタカナにとらわれず「ヴィット」と「ヴィート」の間くらいの発音をして、澄ました顔をしておきましょう！)
で、なんなんだ？
Vite は「次世代フロントエンドツール」です。
すごく簡単にいうと、フロントエンドの開発を行う上で必要な周辺環境を良い感じにまとめてくれているもの です。
フロントエンドの開発を行う上で必要な周辺環境
具体的には以下のようなものが挙げられます。
- TypeScript, JSX, CSS, ...
- 開発サーバー
- HMR
- バンドラ
- プラグインシステム
これらについてはまた追って説明します。
そして、Vite は何より、より良い DX (開発者体験) にフォーカスしています。
これらに寄与しているものとして以下のような特徴があります。
- セットアップが簡単 (面倒くさくない)
- (開発時の) パフォーマンス
- 開発サーバーの起動速度
- ソースコードを編集した時にブラウザに反映される速度
- 扱いやすい API
- プラグインの書きやすさ・互換性
- 十分に型付けされた API
前程知識にも触れつつ、それぞれについて少しみていきましょう。
サクッとプロジェクトを作成
フロントエンドの開発を始めるには色々と面倒なセットアップが必要です。
しかし、Vite を使えば、以下のコマンドを打つだけでプロジェクトを作成することができます。
npm create vite@latest
# 試しに、 Vanilla + TypeScript のプロジェクトを作成してみます
# ✔ Project name: … what-is-vite
# ✔ Select a framework: › Vanilla
# ✔ Select a variant: › TypeScript
すると、簡単なプロジェクトが完成します。あとはやりたいようにソースコードを書いていくだけです。
他にも Vue, React など、かなりたくさんのテンプレートも用意されています。(お好みで)
う〜ん。とても簡単 (コマンドをコピって叩くだけ)
TypeScript、JSX、CSS などがすぐに使える
これらは昨今のフロントエンド開発においては欠かせないものです。
前提として、TypeScript や JSX はそのままではブラウザで動作しません。
通常はこれらを JavaScript に変換するためのツールを導入し、設定を書いていく必要があります。
Vite はこれらの面倒なセットアップをデフォルトでやってくれているので、開発者は何も考えずにすぐにこれらを使うことができます。
先ほど作成したプロジェクトであれば、何も設定なしで TypeScript のファイルを作成し、それらを読み込む (import する) ことができます。
Vite に頭が上がりません。
開発サーバー
Vite は開発サーバーも提供してくれています。
これまで、TypeScript などを使う場合には JavaScript に変換する必要があるという話をしましたが、例えば Vite の開発サーバーはこれをうまくやってくれています。
プロジェクトを作成したら、お好みのパッケージマネージャ (e.g. npm, pnpm, ...) で依存関係をインストールし、以下のコマンドを打つだけで開発サーバーが立ち上がります。
npm run dev
# or others...
これで立ち上がった開発サーバーにブラウザがからアクセスをすれば、プロジェクトがブラウザで動作するようになっているはずです。
また、Vite はこの 開発サーバーの起動が 🚀異様に速い🚀 という特徴もあります。
開発サーバーの立ち上がり速度は開発者にとってとても重要なものです。
早く開発を始めたいのに、コマンドを叩いてからブラウザで利用できるようになるまで数十秒から数分かかっていては、流石にしんどいものです。
Vite はとあるコンセプトのおかげにより、この問題を大きく改善しました。
詳しいメカニズム等は今回は話しませんが、「開発サーバーの起動がめちゃくちゃ早い」ということだけ覚えておいてください。
これは Vite を選択する大きな理由の一つです。
詳しいメカニズム等は今回は話しませんが
気になる方はこちらから:
HMR (Hot Module Replacement)
HMR は簡単にいうと、「ファイルを編集した時に効率よくブラウザに反映する仕組み」です。
ファイルを編集した際に、たくさんのモジュールを変換したり、つなげ合わせたり、場合によってはブラウザをリロードする必要があります。
ここの速度が遅いと、これもまた開発者にとってストレスとなります。(ファイルを編集したのにブラウザに反映されるのが遅い...)
ここでも、Vite は 異様に高速な HMR を提供しています。
これも Vite を選択する大きな理由の一つです。
バンドラ
開発が済んだら、それを本番環境で動かすためにソースコードをまとめる必要があります。
開発モードでもブラウザで動作していますが、これらは本番環境に不要なコードを含んでいたり、そもそもファイルがまとめられていなかったりします。
(なぜまとめなくても動くのかというのは難しい話ですが、Vite がうまくやっています。割愛)
ついては、出来上がったソースコードをまとめるためのツールも必要なのですが、Vite はこれも提供しています。
(実際には、まとめるだけではなく、サイズを小さくするための最適化なども行われます)
特に設定などは必要なく、
npm run build
# or others...
を叩くだけです。
これで最終的な成果物を作ることができるので、あとは任意の方法で公開すれば OK です。
(公開方法については今回は触れません)
プラグインシステム
Vite は優れたプラグインシステムを持っています。
プラグインというのは例えば、「Vue を動かすためのプラグイン」であったり、「React を動かすためのプラグイン」などです。
開発者は任意のプラグインをインストールし、簡単なセットアップを記述するだけですぐにそれらを使うことができます。
そして、すでにたくさんプラグインが存在しています。
(これは余談ですが、Vite のプラグインシステムは、プラグイン開発者にとってもかなり体験の良いものになっていて、Vite の発展にはこのエコシステムの発展が大きく貢献しています。)
まとめ
まだまだ Vite にはたくさんの機能があり、今回紹介しきれていないものも多いですが、
ざっくりと、
- Vite は「フロントエンドの開発を体験よく行うためのツール」である
- TypeScript, JSX, CSS などがすぐに使える
- 開発サーバーが用意されていて起動がめちゃくちゃ速い
- HMR がめちゃくちゃ速い
- バンドラも同梱されている
- プラグインシステムが充実している
といった特徴があることが分かっていただければと思います。
「なんでなの？」という詳しい仕組みは置いておいて、まずは Vite を使ってみて、その良さを感じてみるのが一番です！
トリビア
最後に、ちょっとした雑談情報です。
注目度
Vite は先日行われた State of JavaScript 2023 というアンケートで、かなりたくさんのアワードを獲得しました。
今フロントエンド界隈で最も注目を集めているといっても過言ではないでしょう。
Vue.js を使ってるとやたら見ますよね。仲良しなの？
Vite は Evan You という方が作成しました。実は彼は Vue.js の作者でもあります。
そう。 Vue.js の作者と同一人物なのです。
というより、元々 Vite は Vue.js のために開発が始まったものでした。(えぇ〜〜)
こうして Vue.js にとどまらず、フロントエンド全体の開発体験を向上させるためのツールとして成長していったことは本当に嬉しいです。 (筆者主観)
「Vue / Nuxt利用者が気軽に情報を得ることができ、またVue / Nuxt初学者がまずここを訪ねてみる」 と思える、そんなVue / Nuxtの情報が集まる広場。ハードルは低く、わちゃわちゃと知見が集まる広場へ。 ✍️ Articles: Vue, Nuxt, related libraries
Discussion