🎇

ViteでReact環境を爆速で作ってみる。

2022/12/11に公開

React

hanetsukiです。先日、Vite4がリリースされましたね。

早速CLIを使ってみる。

とりあえず、例にならってCLIを実行してみることにしましょう。

pnpm create vite

? Project name: › vite4-trial

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Others

? Select a variant: › - Use arrow-keys. Return to submit.
    JavaScript
    TypeScript
    JavaScript + SWC
❯   TypeScript + SWC

Done. Now run:

  cd vite4-trial
  pnpm install
  pnpm run dev

  VITE v4.0.0  ready in 306 ms

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

無事立ち上がってしまいました... ここまで来るのに30秒も入りませんでした。爆速すぎます...

おわりに(？)

正直、記事書きながら横でシェルを叩いてたんですけど、何も追記することが何もなく立ち上げることができてしまいました。。。

これで終わるのもなんなのでいくつかVite4ブログ内容のピックアップをして筆をおきたいと思います。

Vite4アップデートのピックアップ

ブログで`pnpm`が使われてた

Vite4のアナウンスブログ、Vite 4.0 is out! の Start playing with Vite 4 内で、pnpmが利用されてました。

https://pnpm.io/

私も個人開発などでは利用していますが、こういった場で出してくるあたりに開発者体験を追求している感じがでていてエモいなって思いました。

もちろん、npm・yarnでも利用できるのでご安心を

# With NPM:
$ npm create vite@latest

# With Yarn:
$ yarn create vite

# With PNPM:
$ pnpm create vite

Scaffolding Your First Vite Project - Vite

ReactのpluginにSWC版が追加

今回一番、お！って感じたところですね。
新たに@vitejs/plugin-react-swcが追加されました。
これは、SWCを呼ばれる、Vercel社が作っている。Babelの代替えとなるコンパイラーです。

SWC is 20x faster than Babel on a single thread and 70x faster on four cores.

とあるように、「SWCは、単一スレッドでBabelより20倍高速であり、4コアで70倍高速です。」とのことです。

話は少しそれましたが、そのSWCを用いたReactプラグインが今回登場しました。

前述の環境構築では、* + SWC のように、どのpluginを用いて環境を立ち上げることができるか選択できるようになっています。

We believe that both approaches are worth supporting at this point, and we'll continue to explore improvements to both plugins in the future.

現時点では、両方のアプローチをサポートする価値があると考えており、今後も両方のプラグインの改善を検討し続けるそうです。

ブラウザの互換性

最新のブラウザーサポートのデフォルトターゲットがSafari13からSafari14に変更が入りました。

日本語ドキュメントもある。

日本語を母国語としている身としてはありがたいですね。
https://ja.vitejs.dev/

個人的には、英文ドキュメントを翻訳ツールを用いて解読するのも好きなので、どちらのドキュメント共に照らし合わせながら英語の勉強でもしてもいいかなって思ってます（？）。

おわりに

個人開発をする時であったり、軽くあれを試したい。みたいな時にViteは非常に重宝します。
最近では、Astroの内部に組み込まれていたり、SvelteKitやSolid, Qwikなどのフレームワークや、Storybookを動かすための機能の1つとしてViteを採用していることも多くなってきているようです。

もう、Viteは使ってて当たり前の時代はすぐそこまできているような...そんな気がしています。

まだ使ったことないよ！って方は、是非手元で試してみてください！

以前こんな記事も書いているので、jQuery使ってる人もぜひお試しを。

それではこれにて。