[Vite] TypeScriptベースのReactプロジェクトを始める

概要

今回のブログポストではViteを使ってTypeScriptベースのReactプロジェクトを作成する方法について説明します。また、作成されたプロジェクトのフォルダ構造と役割についても説明します。

Vite: https://vitejs.dev/

Webpackの設定を通じて React を始める方法や、create-react-app、Next.jsを使って React プロジェクトを作成する方法については、以前のブログポストを確認してください。

ブログシリーズ

このブログポストはシリーズで制作されました。以下はViteのシリーズリストです。

[Vite] TypeScript ベースの React プロジェクトを始める
[Vite] TypeScript ベース React プロジェクトへテスト環境を構築する
[Vite] TypeScript ベース React プロジェクトに Prettier を追加する
[Vite] TypeScript ベース React プロジェクトでに Stylelint(CSS-in-JS)を追加する

Vite のテンプレートを使う

Viteはすでに作られたテンプレートがを使って簡単にプロジェクトを作成できるようにサポートしています。次のコマンドを使うとTypeScriptベースのReactプロジェクトを作成できます。

npm create vite [PROJECT_NAME]

# yarn
yarn create vite [PROJECT_NAME]

# pnpm
pnpm create vite [PROJECT_NAME]

# bun
bunx create-vite [PROJECT_NAME]

すると、次のようにプロジェクト名を入力する質問が表示されます。デフォルトでは、コマンドを実行するときにPROJECT_NAMEが設定されています。名前を変更する必要がない場合は、Enterキーを押して進みます。

? Package name: › PROJECT_NAME

次に、使用するフレームワークを選択する質問が表示されます。ここではReactを選択します。

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

フレームワークを選択すると、次のようにプロジェクトでTypeScriptを使用するかJavaScriptを使用するかを選択する質問が表示されます。ここではTypeScriptを選択します。

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

全ての質問に回答すると、次のようにTypeScriptベースのReactプロジェクトが作成されることが確認できます。

Done. Now run:

  cd [PROJECT_NAME]
  yarn
  yarn dev

プロジェクト構造

Viteを使って生成したTypeScriptベースのReactプロジェクトのフォルダとファイルを見てみると、次のようになります。

├── README.md
├── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

重要なファイルは次のようです。

index.html: React アプリケーションのエントリーポイントです。
package.json: プロジェクトの依存関係とスクリプトを定義したファイルです。
public: 静的ファイルを保存するディレクトリです。
src: React アプリケーションのソースコードを保存するディレクトリです。
src/main.tsx: React アプリケーションのエントリーポイントです。
src/vite-env.d.ts: Vite 環境で使用する TypeScript 設定ファイルです。
tsconfig.json: TypeScript 設定ファイルです。
tsconfig.node.json: Node.js 環境で使用する TypeScript 設定ファイルです。
vite.config.ts: Vite 設定ファイルです。

プロジェクト実行

Viteを使って生成したTypeScriptベースのReactプロジェクトのpackage.jsonファイルを開くと、プロジェクトで使用できるスクリプトが確認できます。

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview"
},

次はViteを使って生成したTypeScriptベースのReactプロジェクトで使用できるスクリプトです。

dev: プロジェクトを開発モードで実行します。
build: プロジェクトをビルドします。
lint: プロジェクトのコードを検査します。
preview: ビルドされたプロジェクトをプレビューします。

プロジェクトを生成して実行するには、まず次のコマンドを実行してプロジェクトの依存関係をインストールします。

npm install
# yarn install

そして、次のコマンドを実行してプロジェクトを開発モードで実行します。

npm run dev
# yarn dev

すると、次のように開発サーバーが起動したことが確認できます。

  VITE v5.0.12  ready in 140 ms

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

ブラウザを開いてhttp://localhost:5173/にアクセスすると、次のように画面が表示されます。

完了

これでViteを使ってTypeScriptベースのReactプロジェクトを作成する方法について説明しました。皆さんもViteのテンプレートを使って簡単にプロジェクトを作成してみてください。

Github Sponsor

Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

[Vite] TypeScriptベースのReactプロジェクトを始める

Viteを使ってTypeScriptベースのReactプロジェクトを始める方法について説明します。

目次

概要

ブログシリーズ

Vite のテンプレートを使う

プロジェクト構造

プロジェクト実行

完了

アプリ広報