Viteを使用して、TypeScriptによるReact開発を始める方法について記載する。
環境
- Windows 11 Home 23H2
- Node.js v20.12.2
- npm v10.5.0
Viteとは？
Viteとは、Web開発のためのビルドツールであり、ネイティブESMを使用することで、高い性能を実現している。そして、React開発においては、Create React Appの代替になっている…らしい。
Viteを使用してReactをインストール
手順１．Reactのプロジェクトを作成する
以下のコマンドを使用して、TypeScriptのReactプロジェクトを作成する。
npm create vite@latest ＜プロジェクト名＞ -- --template react-ts完了後、指定したプロジェクト名のフォルダが作成される。
手順２．npmパッケージをインストール
手順１で作成されたプロジェクトに、必要なnpmパッケージをインストールする。
# プロジェクトのフォルダに移動し、
cd ＜プロジェクト名＞
# npmパッケージをインストールする
npm install手順３．インストールの確認
以下のコマンドを実行し、画像のような画面が表示されれば成功。
# サンプルプログラムを実行する
npm run dev -- --open
npm scripts
インストール後は、以下のようなスクリプトが”npm run”で実行可能になる。
{
...
"scripts": {
"dev": "vite", // 開発サーバーを起動。エイリアス: `vite dev`, `vite serve`
"build": "vite build", // プロダクション用にビルド
"preview": "vite preview" // プロダクション用ビルドをローカルでプレビュー
}
}Viteテンプレート
上記では、Viteのプロジェクト作成時に、TypeScriptのReactをテンプレートとして指定している。（–template react-ts）
TypeScriptのReactの他には、JavaScriptのReactはもちろん、Vanilla JS、Vue.js、Svelteなども公式テンプレートとして指定可能である。詳細は、Scaffolding Your First Vite Project 参照。
また、Awesome Vite.js のように、コミュニティが作成しているテンプレートも存在する。
シンプルな構成を維持しつつ、テストの自動化まで視野に入れるのであれば、以下のテンプレートあたりが良いかもしれない。
vite-template-react-ts-jestこのテンプレートと、react-tsとのパッケージ差分は以下の通りで、JestやReact Testing Libraryといったテストツールが含まれている。
@testing-library/jest-dom // Testing Libraryのライブラリで、DOMの状態のマッチャー
@testing-library/react // Testing Libraryのライブラリで、React DOMのテストユーティリティ
@types/jest // JestのTypeScript定義
identity-obj-proxy // CSS Moduleをモックする
jest // Jest
Jest-environment-jsdom // Jest用にDOM環境をシミュレートする
jest-transformer-svg // Jest用にReactコンポーネントにSVGを直接インポートする
ts-jest // Jest用のTypeScript変換ツール
ts-node // TypeScriptの実行エンジン。JavaScriptにJIT変換するなお、コミュニティテンプレートは –templateパラメータとして指定できないため、GitHubからダウンロードして使用することになる。
参考
