Node.js + TypeScript (node ts) で始めるモダンなサーバーサイド開発

Node.js + TypeScript (node ts) で始めるモダンなサーバーサイド開発

近年、JavaScript をサーバーサイドで実行できる Node.js は、その手軽さとエコシステムの豊富さから多くの開発者に利用されています。そして、その Node.js の開発体験をさらに向上させる強力なツールが TypeScript です。

「Node.js は知っているけど、TypeScript と組み合わせると何が良いの？」「どうやって Node.js で TypeScript を使うの？」

この記事では、Node.js と TypeScript を組み合わせた開発 (通称: node ts) の魅力、メリット、そして具体的な開発手順について、初心者の方にも分かりやすく解説します。

1. Node.js とは？

まず、Node.js について簡単に振り返りましょう。

JavaScript の実行環境: Node.js は、Google Chrome の JavaScript エンジンである V8 をベースにした、サーバーサイドで JavaScript を実行するためのランタイム環境です。
イベントループによる非同期処理: シングルスレッドでありながら、ノンブロッキング I/O とイベントループの仕組みにより、高負荷な処理を効率的にこなすことができます。
豊富なエコシステム (npm): 世界最大のパッケージマネージャーである npm を利用でき、様々なライブラリやフレームワークを簡単に導入できます。
フロントエンドとの親和性: フロントエンドで JavaScript を書いている開発者にとって、サーバーサイドも JavaScript で記述できるため、学習コストを抑えられます。

2. TypeScript とは？

次に、TypeScript について解説します。

JavaScript のスーパーセット: TypeScript は、JavaScript に静的型付けなどの機能を追加した言語です。JavaScript のコードをそのまま TypeScript のコードとして扱うことができます。
コンパイルが必要: TypeScript のコード (.ts ファイル) は、ブラウザや Node.js が直接実行できる JavaScript (.js ファイル) にコンパイルする必要があります。
開発体験の向上: 型安全性、インターフェース、ジェネリクスなどの機能により、より安全で保守性の高いコードを書くことができ、開発時のエラーを早期に発見しやすくなります。

3. なぜ Node.js で TypeScript を使うのか？ (node ts のメリット)

Node.js で TypeScript を組み合わせることで、以下のような多くのメリットが得られます。

型安全性の向上: 静的型付けにより、変数の型を明示的に定義できるため、実行時の型に関連するエラーをコンパイル時に発見しやすくなります。これにより、より堅牢なアプリケーションを開発できます。
優れた開発体験:
自動補完 (IntelliSense): 型情報に基づいて、エディタがコードの自動補完やドキュメントの表示をより正確に行えるため、開発効率が向上します。
早期のエラー検出: コンパイル時に型エラーを検出できるため、実行前に問題を修正でき、デバッグ時間を削減できます。
コードの可読性と保守性の向上: 型情報がコードの意図を明確にするため、他の開発者や将来の自分にとってコードが理解しやすくなり、保守が容易になります。
最新の JavaScript 機能の利用: TypeScript は常に最新の ECMAScript (JavaScript の標準規格) の機能を取り込んでおり、安定した環境で最新の JavaScript 構文を利用できます。
大規模開発への適性: 型情報やインターフェースなどの機能は、複数人での大規模な開発において、コードの品質を維持し、連携をスムーズにするのに役立ちます。
既存の JavaScript エコシステムの活用: TypeScript は JavaScript のスーパーセットであるため、npm に存在する豊富な JavaScript ライブラリをそのまま利用できます。

4. Node.js で TypeScript を始めるための準備

Node.js で TypeScript を始めるには、以下のツールが必要です。

Node.js: Node.js の実行環境が必要です。まだインストールしていない場合は、公式サイト (https://nodejs.org/) からダウンロードしてインストールしてください。
npm (Node Package Manager): Node.js をインストールすると、通常 npm も一緒にインストールされます。npm は、TypeScript のコンパイラやその他の必要なパッケージを管理するために使用します。
TypeScript コンパイラ (tsc): TypeScript のコードを JavaScript にコンパイルするためのツールです。以下のコマンドでグローバルにインストールできます。

npm install -g typescript

5. Node.js + TypeScript の開発手順

基本的な Node.js + TypeScript の開発手順は以下の通りです。

プロジェクトの初期化: 新しいプロジェクトのディレクトリを作成し、そこで npm init -y コマンドを実行して package.json ファイルを作成します。

mkdir my-node-ts-app
cd my-node-ts-app
npm init -y

TypeScript の設定: TypeScript のコンパイラオプションを設定するための tsconfig.json ファイルを作成します。以下のコマンドで基本的な tsconfig.json ファイルを生成できます。

npx tsc --init

生成された tsconfig.json ファイルを必要に応じて編集します。主な設定項目は以下の通りです。

target: コンパイル先の JavaScript のバージョン (例: es2020, es5)
module: モジュールの形式 (例: commonjs, es6) - Node.js では commonjs が一般的です。
outDir: コンパイルされた JavaScript ファイルの出力先ディレクトリ (例: ./dist)
rootDir: TypeScript のソースコードが存在するディレクトリ (例: ./src)
strict: 型チェックを厳格に行うかどうか (推奨: true)

基本的な tsconfig.json の例:

{
    "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
    },
    "include": [
    "src/**/*"
    ],
    "exclude": [
    "node_modules"
    ]
}

ソースコードの作成: src ディレクトリを作成し、その中に TypeScript のソースコード (.ts ファイル) を記述します。

例: src/index.ts

import express, { Request, Response } from 'express';

const app = express();
const port = 3000;

app.get('/', (req: Request, res: Response) => {
    res.send('Hello World from Node.js with TypeScript!');
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

この例では、Webフレームワークの Express を使用しています。Express を使用する場合は、以下のコマンドでインストールする必要があります。

npm install express @types/express

@types/express は、Express の型定義ファイルです。

コンパイル: TypeScript のコードを JavaScript にコンパイルするには、以下のコマンドを実行します。

npx tsc

このコマンドを実行すると、tsconfig.json の設定に従って、src ディレクトリ内の .ts ファイルがコンパイルされ、dist ディレクトリに .js ファイルとして出力されます。

実行: コンパイルされた JavaScript ファイルを Node.js で実行します。

node dist/index.js

上記の例では、http://localhost:3000 にアクセスすると "Hello World from Node.js with TypeScript!" と表示されるはずです。

6. 開発をさらに快適にするための設定

package.json の設定: npm run コマンドでコンパイルや実行を簡単に実行できるように、package.json の scripts にコマンドを追加します。

{
    "name": "my-node-ts-app",
    "version": "1.0.0",
    "description": "",
    "main": "dist/index.js",
    "scripts": {
        "build": "npx tsc",
        "start": "node dist/index.js",
        "dev": "nodemon --watch src -e ts,tsx --exec 'ts-node src/index.ts'"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "express": "^4.18.2"
    },
    "devDependencies": {
        "@types/express": "^4.17.17",
        "@types/node": "^20.1.7",
        "nodemon": "^2.0.22",
        "ts-node": "^10.9.1",
        "typescript": "^5.0.4"
    }
}

"build": "npx tsc": TypeScript をコンパイルします。
"start": "node dist/index.js": コンパイルされた JavaScript を実行します。
"dev": "nodemon --watch src -e ts,tsx --exec 'ts-node src/index.ts'": 開発時に便利な nodemon と ts-node を使用して、TypeScript ファイルの変更を監視し、自動的に再起動します。nodemon と ts-node はdevDependencies に追加する必要があります。

npm install -D nodemon ts-node @types/node

これらのスクリプトを定義しておくと、以下のコマンドで開発が楽になります。

npm run build   # ビルド
npm run start   # 実行
npm run dev     # 開発 (自動再起動)

まとめ

Node.js と TypeScript を組み合わせた開発 (node ts) は、型安全性の向上、優れた開発体験、そして最新の JavaScript 機能の利用など、多くのメリットをもたらします。少し初期設定が必要ですが、その後の開発効率とコードの品質は大きく向上するでしょう。

天空のたぐちゃんラボ

【Node.js TypeScript】サーバーサイド開発を強力に！導入・環境構築・実践ガイド