Vite を使用した TypeScript プロジェクトの設定

概要: このチュートリアルでは、TypeScript と Vite を使用して TypeScript を JavaScript にコンパイルする Web プロジェクトの設定方法を学習します。

Vite は、最新の Web プロジェクトのためにより高速で軽量な開発エクスペリエンスを提供するフロントエンドビルドツールです。「Vite」という名前はフランス語で「速い」という意味で、その目標を反映しています。

TypeScript プロジェクトの設定

Vite を使用して TypeScript プロジェクトを設定する手順を順を追って説明します。

ステップ1. Node.js のインストール

Windows ではコマンドプロンプトを、macOS ではターミナルを開き、コンピューターに Node.js がインストールされているかどうかを確認します。

node -v

エラーが表示された場合は、Node.js がインストールされていません。Node.js をダウンロードしてインストールする必要があります。公式ウェブサイトからダウンロードできます。

ステップ2. Vite プロジェクトの作成

ターミナルを開き、次のコマンドを使用して新しい Vite プロジェクトを作成します。

npm create vite@latestCode language: CSS (css)

コンピューターに Vite がインストールされていない場合、インストールするように促されます。

Need to install the following packages:
create-vite@5.5.2
Ok to proceed? (y) yCode language: CSS (css)

インストールを続行するには y と入力します。上記よりも高いバージョンが表示される可能性があります。

create-vite パッケージをインストールすると、プロジェクト名、フレームワークの選択、バリアントの選択を求めるプロンプトが表示されます。

√ Project name: ... myapp
√ Select a framework: » Vanilla
√ Select a variant: » TypeScript

この例では、プロジェクト名に myapp、フレームワークに Vanilla、バリアントに TypeScript を使用します。

このコマンドは、プロジェクト名と同じ名前のディレクトリにプロジェクトのスキャフォールディングを作成します。

Scaffolding project in D:\myapp...

Done. Now run:

  cd myapp
  npm install
  npm run dev

ステップ3. プロジェクトディレクトリへの移動

プロジェクトディレクトリに移動します。

cd myapp

ステップ4. 依存関係のインストール

npm install コマンドを実行して、必要な依存関係をインストールします。

npm install

ステップ5. 開発サーバーの起動

次のコマンドを実行して開発サーバーを起動します。

npm run dev

次の出力が返されます。

> myapp@0.0.0 dev
> vite


  VITE v5.4.1  ready in 275 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show helpCode language: CSS (css)

Web ブラウザで http://localhost:5173/ を開くと、アプリが表示されます。

開発サーバーを停止するには、Ctrl+C を押します。

プロジェクト構造の調査

プロジェクト構造を以下に示します。

├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
|  └── vite.svg
├── src
|  ├── counter.ts
|  ├── main.ts
|  ├── style.css
|  ├── typescript.svg
|  └── vite-env.d.ts
└── tsconfig.jsonCode language: PHP (php)

プロジェクト内のファイルとディレクトリを以下に示します（主なものについて説明します）。

index.html

これはアプリのエントリポイントです。index.html には、メインの TypeScript ファイルである src/main.ts ファイルが含まれています。

開発中は、Vite がこの src/main.ts ファイルを JavaScript バンドルにコンパイルし、index.html ファイルに挿入します。

src/main.ts

これはアプリケーションのエントリポイントです。この main.ts ファイルでは…

style.css

このファイルにはアプリの CSS コードが格納されています。インポート文を使用してアプリで使用できます。

import './style.css';Code language: JavaScript (javascript)

Vite のアセットバンドリングと処理方法により、JavaScript ファイルのように CSS ファイルをインポートできます。そのため、HTML でスタイルシートを手動でリンクする必要はありません。

package.json

この package.json ファイルは、依存関係、スクリプト、設定を管理するために使用されます。

node_modules/

このディレクトリには、インストールされたすべての npm パッケージとその依存関係が含まれています。npm install コマンドを実行すると、このフォルダーに package.json ファイルにリストされているすべてのパッケージがインストールされます。

tsconfig.json

これは、コンパイラのオプション、ファイルの包含/除外、その他の設定を含む TypeScript 設定ファイルです。TypeScript の動作方法を定義します。

プロジェクトのカスタマイズ

ステップ1. src ディレクトリから counter.ts ファイルを削除します。このステップはオプションです。

ステップ2. src/main.ts ファイルのすべてのコードを次のように置き換えます。

import './style.css';

const app = document.querySelector<HTMLDivElement>('#app');
app!.innerHTML = '<h1>Hello, TypeScript!</h1>';Code language: JavaScript (javascript)

動作方法。

まず、style.css を main.ts ファイルにインポートします。

import './style.css';Code language: JavaScript (javascript)

次に、app 要素を選択し、その innerHTML を HTML フラグメントに変更します。

const app = document.querySelector<HTMLDivElement>('#app');
app!.innerHTML = '<h1>Hello, TypeScript!</h1>';Code language: JavaScript (javascript)

最後に、開発サーバーを実行すると、テキスト Hello, TypeScript! が表示されます。

本番環境向けプロジェクトのビルド

次のコマンドを実行して、本番環境向けにプロジェクトをビルドします。

npm run build

これにより、次の構造を持つ最適化された本番ビルドが dist ディレクトリに作成されます。

├── assets
|  ├── index-Cz4zGhbH.css
|  └── index-NXap3Nzt.js
├── index.html
└── vite.svg

ローカルで本番ビルドをプレビューするには、次のコマンドを実行します。

npm run preview

このコマンドは、http://localhost:4173/ で製品ビルドを表示するためのローカルサーバーを起動します。

> myapp@0.0.0 preview
> vite preview

  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show helpCode language: CSS (css)

これで、Vite を使用して TypeScript アプリケーションの開発を開始できます。楽しいプログラミングを！