ViteでTypeScript×Reactの開発環境を構築してみた【前編】
はじめに
こんにちは、SHIFTのITソリューション部に所属しているHoribeです。
参画中の案件でフロントエンド開発を担当しており、TypeScriptとReactを使ったプロジェクトを一から立ち上げる機会がありました。今回はViteを使って環境構築したので、その手順をまとめようと思います。
本記事は、Viteというビルドツールに興味があるがまだ使用したことがない人、そろそろCreate React Appから乗り換えようと思っている人などを対象にしています。記事の通りに進めることで以下の効果があります。
Reactを使ったフロントエンドをTypeScriptで開発する環境を構築することができます。
Viteのテンプレートを使用するだけでは不足してしまうポイントと対応方法を知ることができます。
移り変わりが激しいフロントエンド技術について、現時点での最新情報のキャッチアップができます。
前後編に分かれており、前編ではViteを使ったプロジェクトの作成方法と設定ファイルの概要、後編ではESLintとPrettierの導入と設定方法を解説します。
前提として、この記事ではUbuntu 22.04で実行したコマンドをまとめています。Unix系やLinux系の環境であれば記事通りに動作すると思いますが、Windows環境の場合は手順が異なる可能性があるのでご注意ください。
Viteとは
Viteとは、フロントエンド開発で使用できるビルドツールです。Vueの開発者でもあるEvan Youさんによって2020年にリリースされました。
従来のビルドツールと比較して高速に動作することを強みとしています。（「Vite」はフランス語で「素早い」という意味であると公式サイトでも述べられています）
State of JavaScript 2022のビルドツールでは、「認知度」「利用率」「興味」「満足度」の4項目のうち、「興味」と「満足度」で首位を獲得しています。また、「認知度」と「利用率」に関しても、直近の2年間で大きく飛躍して首位に近づいており、非常に勢いのあるビルドツールであると言えます。
参考: State of JavaScript 2022 | Build Tools
Node.jsをインストールする
まずはNode.jsのインストールが必要です。Node.jsの導入にはいろいろな方法がありますが、今回はVoltaを使用します。
Voltaも2020年にリリースされたバージョン管理ツールです。Rustで作られており、動作が堅牢かつ高速であることを強みとしています。使用するツールのバージョンをメンバー間で共有することができるpin機能など、便利な機能も豊富です。
参考: Volta 公式サイト
以下のコマンドでVoltaをインストールし、Voltaを使ってNode.jsをインストールします。
curl https://get.volta.sh | bash # Voltaをインストール
volta install node # 最新安定版のNode.jsをインストールちゃんとインストールできたか確認します。npmはNode.jsをインストールすると自動で付属されているため、こちらも確認します。
$ node -v
v18.17.0
$ npm -v
9.6.7Viteを使ってプロジェクトを作成する
次にViteを使ってプロジェクトを作成します。複雑な手順は不要で、ひな形を作成するだけであればコマンド一発でReactが動作する環境を準備してくれます。
以下のコマンドで作成します。npm createという書き方は、npm initのエイリアスです。
npm create vite@latest vite-practice -- --template react-ts # `vite-practice`というプロジェクトを作成-- -- template [使用するテンプレート名]でテンプレートを指定できます。テンプレートはReactの他に、VueやSvelteにも対応しています。素のJavaScriptも使用可能です。npmのバージョンが7系以上の場合は--templateの直前に--が追加で必要なので注意してください。
開発サーバーを起動してみる
プロジェクトのひな形が作成できたので、開発サーバーを起動してみます。ひな形と言うだけあって、特に難しい手順もなく起動することができます。
作成したプロジェクトのディレクトリに移動して、npmパッケージをインストールします。インストール後、とりあえず初期状態のまま開発サーバーを起動してみましょう。
package.jsonのscriptsプロパティに予めdevとして開発サーバーを立ち上げるコマンドが登録されているため、npm run devでサーバーを起動できます。
$ cd vite-practice
$ npm i
$ npm run dev
> vite-practice@0.0.0 dev
> vite
VITE v4.4.7 ready in 636 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help開発サーバーを起動した後、コンソールに表示されているURL（デフォルトではhttp://localhost:5173/）をブラウザで開くと、以下の画面が開かれます。
Viteの開発サーバーにはHMR（Hot Module replacement）という機能が備わっており、ソースコードを更新して保存すると自動的に画面にも反映されます。試しに/src/App.tsxのソースコードを変更してみましょう。
// 省略
<h1>Vite + React</h1>
// 省略これを以下のように書き換えて保存します。
// 省略
<h1>Hello world!</h1>
// 省略すると、保存した瞬間にブラウザの描画が更新されているのがわかります。
もしHMR機能がなければ、書き換えたソースコードをブラウザで確認しようと思うたびにリロードしなければいけません。これはUIの微調整などをしている場合にとても煩わしくなってきます。フロントエンド開発を行う際に、このHMR機能は必須と言えるくらい便利な機能です。
ディレクトリ構成と設定ファイルについて
Viteを使ってプロジェクトを作成しましたが、現時点ではこのようなディレクトリ構造になっています。
vite-practice
├── .gitignore
├── README.md
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts10個以上のファイルやディレクトリが自動的に作成されていることがわかります。この中から、package.json・vite.config.ts・tsconfig.json・tsconfig.node.jsonの4つの設定ファイルについて、中身を見せながら簡単に説明していきます。
package.json
{
"name": "vite-practice",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"typescript": "^5.0.2",
"vite": "^4.4.5"
}
}package.jsonは、プロジェクトで使うパッケージに関する情報が記述されているファイルです。
先ほど述べたように、Viteで環境構築した場合にはscriptsプロパティが予め設定されています。設定されているscriptsは、それぞれ下記のような動きをします。
dev: 開発サーバーを起動する
--port <ポート番号>オプションで起動するポートを指定できる
--httpsオプションでHTTPSプロトコルを使用できる
build: プロダクションビルドを行う
ビルドされたファイル群はルートのdistディレクトリ配下に出力される
preview: プロダクションビルドしたファイルを使ってローカルにサーバーを立てる
プロダクションビルドが問題ないかどうか確認するために使用する
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})vite.config.tsは、Viteの設定が記述されているファイルです。
defineConfigをインポートすることで、設定を記述するときに自動補完の機能が働きます。ReactのViteプラグインが読み込まれているため、Reactをサポートしてくれます。公式やサードパーティーを合わせると、利用率上位のReact・Vue・Angular・Svelteはプラグインとしてサポートされています。
tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}tsconfig.jsonは、TypeScriptの設定が記述されているファイルです。
前項で導入したNode.jsそのものはTypeScriptをサポートしていないので、TypeScriptを使用するための設定ファイルが必要になります。設定項目は公式ドキュメントで詳しく説明されているので、ここでは主要なものに絞って説明します。
compilerOptions: コンパイルするときのオプション
target: コンパイル後のJavaScriptのバージョンを指定する
useDefineForClassFields: クラスのプロパティを定義するとき、プロパティ初期化子の使用を強制する
lib: コンパイル時に含める組み込みライブラリを指定する
module: 出力するモジュールの形式を指定する
isolatedModules: いくつかの安全でない記法をエラーとして扱う
jsx: JSXを出力するJavaScriptの構成を指定する
strict: trueにすると厳格な型チェックがすべて有効になる
noFallthroughCasesInSwitch: switch文を記述するとき、空のcaseをエラーとして扱う
include: コンパイルの対象を指定する
references: 参照するTypeScriptプロジェクトを指定する
tsconfig.node.json
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}tsconfig.node.jsonは、Viteの設定ファイル（先ほどのvite.config.ts）をTypeScriptで書くための設定が記述されているファイルです。
includeプロパティで指定している通り、vite.config.tsをコンパイルの対象としています。また、compositeプロパティはreferencesプロパティで参照される側のファイルでtrueにする必要があります。
おわりに
今回は、Viteを用いてTypeScript×Reactのプロジェクトを作成し、設定ファイルの中身を解説しました。Viteを使うことで、簡単にTypeScript×Reactのひな形を作成できることができたかと思います。
後編では、円滑に開発するためにESLintとPrettierの設定を進めていきます。
執筆者プロフィール: Rintaro Horibe
ITソリューション部に所属。主に開発業務を担当している。
マイブームは音楽と散歩。
お問合せはお気軽に
SHIFTについて（コーポレートサイト）
SHIFTのサービスについて（サービスサイト）
SHIFTの導入事例
お役立ち資料はこちら
SHIFTの採用情報はこちら
PHOTO：UnsplashのRobert Udrea