Open3
【学習メモ】Node.js・TypeScriptの開発環境構築
※学習中のため、随時更新する可能性あり。
環境構築方法
- npm初期化
npm init -y
- TypeScriptのインストール
npm install --save-dev typescript
- ts-node-dev をインストール
npm install --save-dev ts-node-dev
ts-node-dev
は、
・tsファイルの変更をリアルタイムに監視し、その変更に応じてTypeScriptのコードを即座に再起動して実行する
・変更されたファイルのみを再コンパイルするため、反映されるのが速い
- @types/node をインストール
npm install -D typescript @types/node@20
※「@types/node@20」のバージョン部分は、使用するNode.jsのバージョンに合わせて変更する
- TypeScriptの設定ファイルの生成 (tsconfig.json)
npx tsc --init
- tsconfig.json の基本的な設定
{
"compilerOptions": {
"target": "es2018", // コンパイルする ECMAScript のバージョン
"module": "commonjs", // モジュールシステム
"rootDir": "./src", // ソースファイルが置かれているディレクトリ
"outDir": "./dist", // トランスパイルされたファイルを出力するディレクトリ
"esModuleInterop": true, // default exportを使用するための設定
"strict": true // 厳格な型チェックオプション
},
"include": ["src/**/*"], // コンパイルするファイルのパターン
"exclude": ["node_modules"] // コンパイルから除外するファイル
}
- package.json に スクリプトの設定
package.json に start スクリプトを追加して、ts-node-dev を使用してアプリケーションを実行できるようにする
"scripts": {
"start": "ts-node-dev --respawn --transpile-only src/index.ts"
}
※--respawn
は、監視状態にするオプション。一度実行すると終了するプログラムの場合は、このオプションをつけておく。
※--transpile-only
は、型チェックをスキップしてトランスパイルのみを行うオプション
- テスト用にtsファイルの作成
「src/index.ts」を作成し、テスト用にコンソールログを記載。
console.log('test node.js');
- 作成したファイルを実行
npm start
を実行し、ターミナル上にコンソールログが出力されるか確認。
Expressを使用する場合
- Expressをインストール
npm install express
- 型定義のインストール
npm install --save-dev @types/express
TypeScript のコンパイルについて
tscコマンドでtsファイルをjsにコンパイルする
TypeScriptは、npx tsc
コマンドを使用し、tsファイルをjsにコンパイルできる。
例えば、以下を実行すると、index.tsファイルと同じディレクトリに
コンパイルされた「index.js」が作成される。
npx tsc src/index.ts
そして、コンパイルしたjsファイルは、node
コマンドで実行できる。
node index.js
ただ、修正する度にnode
コマンドを実行するのは手間なので、以下を活用することで、
tsファイルに対して、コンパイル + 実行を一度に行うことができ、
かつファイルが変更された時に自動でコンパイルして実行される。
各パッケージについて
ts-node
ts-node
自体はファイルの監視はしていないので、監視する場合はnodemon
と組み合わせる必要あり。
-
ts-node
は、TypeScriptを実行時にコンパイルしてNode.jsで実行できるようにするパッケージ。 -
nodemon
と組み合わせることで、tsファイルの変更がある度に自動でトランスパイルとアプリケーションの再起動を行える
nodemon
について
nodemon
自体は直接TypeScriptファイルを理解できないため、ts-nodeを組み合わせてコンパイルする必要あり。
- nodemonは、ファイルが変更されたときに自動的に再起動する監視のパッケージ。
- 言語に依存しない一般的なツールのため、TypeScriptを含む他の言語での開発に使用することができる
- 直接TypeScriptファイルを理解できないため、TypeScriptコードを実行する前にJavaScriptへとトランスパイルする必要がある。そのため、
ts-node
が利用される。
ts-node-dev
ts-node-dev
は、ファイルを監視し、自動でコンパイル&実行がされる。
TypeScriptを使用する場合は、これを使う方が便利。
-
ts-node
とnodemon
の両方の機能を持っており、TypeScript用に特化している - そのため、変更されたファイルのみを再コンパイルし、即座に再起動できる