pss-aileen
commented
3 hours ago 了解しました！
それでは、VS CodeのLive Serverを使わずに、npmスクリプトのみでリアルタイムにTypeScriptを監視し、ブラウザで自動更新できる環境を構築する方法をご紹介します。
解決策: http-server + tsc --watch + nodemon
この構成では、以下のツールを使用します：
- TypeScript (
tsc --watch): TypeScriptファイルを監視してJavaScriptにコンパイルします。 http-server: シンプルなWebサーバーを立ち上げて、HTMLファイルを提供します。nodemon: ファイルの変更を監視し、サーバーをリロードします。
ステップ
1. プロジェクトのセットアップ
npm init -y
npm install typescript http-server nodemon --save-dev
npx tsc --init2. tsconfig.json の設定
{
"compilerOptions": {
"target": "ES6",
"module": "none",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true
}
}3. ディレクトリ構造
my-project/
├── src/
│ └── index.ts
├── dist/
├── tsconfig.json
├── index.html
└── package.json4. TypeScriptファイル (src/index.ts)
(() => {
const message = "Hello from TypeScript!";
console.log(message);
})();5. HTMLファイル (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TypeScript Live Development</title>
</head>
<body>
<h1>Check the console for the TypeScript message!</h1>
<script src="./dist/index.js"></script>
</body>
</html>6. package.json のスクリプト設定
"scripts": {
"build": "tsc",
"watch": "tsc --watch",
"serve": "http-server -c-1 .",
"dev": "nodemon --watch dist --exec \"npm run serve\""
}スクリプトの説明
"build": TypeScriptファイルをコンパイルします。"watch": TypeScriptファイルを監視し、変更時にコンパイルします。"serve":http-serverを使用してローカルサーバーを立ち上げます。"dev":nodemonでdistディレクトリを監視し、変更があればサーバーを再起動します。
7. ローカル開発サーバーの起動
npm run watch & npm run devまたは、1つのコマンドで実行したい場合：
"scripts": {
"start": "npm run watch & npm run dev"
}npm startこれでできること
src/index.tsを編集すると、tsc --watchが自動的にJavaScriptにコンパイルします。dist/index.jsが変更されると、nodemonが変更を検知し、http-serverがリロードされます。- ブラウザを更新するだけで、最新の変更が反映されます。
メリット
- VS Codeの拡張機能不要で、すべてコマンドラインから操作可能。
- シンプルで設定が少なく、Node.js環境で完結。
- ファイルの監視やサーバーのリロードが自動化され、快適な開発体験が得られます。
注意点
http-serverはシンプルなサーバーです。APIサーバーや複雑な構成が必要な場合は、Expressなどの別のサーバーを検討してください。- モジュール化が必要な場合は、ES Modulesやバンドラ（Vite、Webpackなど）の使用を検討してください。
この構成であれば、コマンド1つでリアルタイムにTypeScriptのコンパイルとブラウザ表示が確認できます。
[ ] testしてきちんと動くか確認する