【Vite】Vanilla TS、React × TypeScriptプロジェクトを作成してみる

概要

最近話題のViteを使用したところ、スムーズに各プロジェクトの作成ができたので、その過程について記録する。

前提

• MacBookを使用
• Node.js >=12.2.0 のバージョンが必要(2022/05時点)
  ※Vite公式ドキュメント情報
• 当記事ではnpmを用いる

Vanilla TSプロジェクトを作成する

• Viteでプロジェクトを作成する方法として、対話形式で使用可能なテンプレートを選択、もしくはテンプレートを直接指定する方法がある。
• 『こちらのREADME』に指定できるテンプレートが記載されている。

# 任意のディレクトリで以下を実行
npm create vite@latest

# 以下、対話モードで各種設定、表示された例
✔ Project name: … vanilla-ts-project
✔ Select a framework: › vanilla
✔ Select a variant: › vanilla-ts

Scaffolding project in {任意のあなたのディレクトリパス}/vanilla-ts-project...

Done. Now run:
  # あとは下記コマンド群を実行すると開発サーバまで起動、確認ができる
  cd vanilla-ts-project
  npm install
  npm run dev

# 直接テンプレートを指定する場合
npm create vite@latest {プロジェクト名} --template {テンプレート名}

# npm 6.x
npm create vite@latest vanilla-ts-project --template vanilla-ts

# npm 7+ (プロジェクト名の後に--が追加で必要)
npm create vite@latest vanilla-ts-project -- --template vanilla-ts

Scaffolding project in {任意のあなたのディレクトリパス}/vanilla-ts-project...

Done. Now run:

  cd vanilla-ts-project
  npm install
  npm run dev

(参考)React × TypeScriptプロジェクトを作成する

# 対話モード
npm create vite@latest
✔ Project name: … react-ts-project
✔ Select a framework: › react
✔ Select a variant: › react-ts

Scaffolding project in {任意のあなたのディレクトリパス}/react-ts-project...

Done. Now run:

  cd react-ts-project
  npm install
  npm run dev

# 直接テンプレートを指定する場合
# npm 6.x
npm create vite@latest react-ts-project -- --template react-ts

# npm 7+ (プロジェクト名の後に--が追加で必要)
npm create vite@latest react-ts-project -- --template react-ts