※当サイトの記事には、広告・プロモーションが含まれます。

Reactのプロジェクトはcreate-react-appよりViteで作成したほうが良さそう

japan.cnet.com

 東京国立博物館文化財活用センター、凸版印刷は、東京国立博物館の所蔵するすべての国宝をメタバース空間で展示する取り組み「エウレカトーハク!◉89」を開催する。開催期間は、2023年1月17日から3月31日。無料で利用可能。

東京国立博物館、所蔵する全89点の国宝をメタバース展示--国宝モチーフのNFTアート販売も - CNET Japan

⇧ amazing...

Viteとは?

GitHubで公開してる情報によりますと、

github.com

Next generation frontend tooling. It's fast!

https://github.com/vitejs/vite

⇧ 次世代フロントエンドツールで、速いという謳い文句。

公式のドキュメントによりますと、

vitejs.dev

Before ES modules were available in browsers, developers had no native mechanism for authoring JavaScript in a modularized fashion. This is why we are all familiar with the concept of "bundling": using tools that crawl, process and concatenate our source modules into files that can run in the browser.

https://vitejs.dev/guide/why.html

Over time we have seen tools like webpackRollup and Parcel, which greatly improved the development experience for frontend developers.

https://vitejs.dev/guide/why.html

However, as we build more and more ambitious applications, the amount of JavaScript we are dealing with is also increasing dramatically. It is not uncommon for large scale projects to contain thousands of modules. We are starting to hit a performance bottleneck for JavaScript based tooling: it can often take an unreasonably long wait (sometimes up to minutes!) to spin up a dev server, and even with Hot Module Replacement (HMR), file edits can take a couple of seconds to be reflected in the browser. The slow feedback loop can greatly affect developers' productivity and happiness.

https://vitejs.dev/guide/why.html

Vite aims to address these issues by leveraging new advancements in the ecosystem: the availability of native ES modules in the browser, and the rise of JavaScript tools written in compile-to-native languages.

https://vitejs.dev/guide/why.html

⇧ 大規模なプロジェクトになるほど起こりやすい開発における処理の遅延を改善しようということを目指してるようです。

Viteの発起人は、Vue.jsを作ったEvan you氏ということみたい。

ViteはReactでも使えると思われる

見た感じ、

github.com

Currently supported template presets include:

  • vanilla
  • vanilla-ts
  • vue
  • vue-ts
  • react
  • react-ts
  • react-swc
  • react-swc-ts
  • preact
  • preact-ts
  • lit
  • lit-ts
  • svelte
  • svelte-ts

https://github.com/vitejs/vite/tree/main/packages/create-vite

⇧ Reactにも対応してそう。Angularは非対応なんかな?

ViteでTypeScript対応のReactプロジェクトを作成する

というわけで、ViteでTypeScript対応のReactプロジェクトを作成してみる。

Node.jsとnpmのバージョンを確認。

作成で。

ディレクトリを移動して、npmのパッケージをインストール。

開発用サーバー起動で。

ブラウザでアクセス。

確かに、create-react-appの時よりかなり高速に動作してる感じ。これが、大規模なプロジェクトでも同様の性能が出るなら、Viteを使えるなら迷いなくViteを使った方が良い気はしますかね。

少なくとも、これから新規でReactのプロジェクトを作成できる環境であれば、Viteを使っていく感じになるんではないかと。

移行はと言うと、

zenn.dev

⇧ 結構大変そうな気がするので。

今回はこのへんで。