【Vite】 Vite をReact x TSXで入門してみた！

5769 ワード
React TypeScript vite reacthooks TypeScript テキストリンク

Vite とは

Vite は、Vue.js フレームワークを開発したEvan You 氏が作ったフレームワークです。

Vue やReact, Preact でも開発を行うことができるだけでなく、公式の CLI でアプリを制作するよりもホットリロードやビルドにかかる時間が少なく、アプリをより効率的に開発することができます。さらに、Vue Composition API やReact Hooks　も公式にサポートしているため、初期設定することなく利用することができます。

公式ドキュメント：　https://github.com/vitejs/vite

この記事では、Vite をReact でTODO　アプリを構築してみます。

環境構築してみる

まず、セットアップを行います。

npm init vite-app --template react <プロジェクト名> # 今回は vite-react　としました。
cd <プロジェクト名>
npm install

これにより、生成されたディレクトリは次のようになります。

$tree
.
├─node_modules
├─src 
│  ├─App.css
│  ├─App.jsx
│  ├─index.css
│  ├─logo.svg
│  └─main.jsx
│
├─.gitignore
├─index.html
├─package.json
├─package.json.lock
└─vite.config.js

ここで、開発サーバーを起動します。

npm run dev

http://localhost:3000 で上のような画面が描写されれば成功です。

TypeScript で開発を行う

続いて、TypeScript での開発を行います。

まず、親ディレクトリにて、tsconfig.jsonを次のように実装します。

Vite では、ESBuild によって型情報なしにコンパイルされるため、const enum などの一部の型に対応していません。そのため、tsconfig.json では、compilerOptions で "isolatedModules": true とする
必要があります。

tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
        "isolatedModules": true,
        "module": "commonjs",
        "outDir": "./dist",
        "strict": true,
        "esModuleInterop": true // ここを変更
    },
    "include": [
        "./src/**/*."
    ]
}

また、すべての.jsx ファイルを.tsx に変更します。

このとき、index.html ファイルで読み込むファイル名を/src/main.jsx から/src/main.tsx に変更しないと画面が表示されないので気をつけてください。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script> // 読み込むファイル名を "main.tsx" に変更する必要あり
</body>
</html>

注意：

Vite　では、.ts ファイルをコンパイルすることしか対応していないので、型のチェックを行ってはくれません。 そのため、IDE を使って開発する時ややビルド実行時には、型のチェックが行われるように設定してください。

まとめ

以上で、React で TypeScript が実行できるように設定してみました。
今後、React Router や Redux を使うための設定はどうすればいいかといったことについて書いていきたいと思います。