TypeScriptで始めるNode.js入門

2023年3月20日メンテナンス済み / 株式会社ICS

TypeScript

みなさんは普段Node.jsをどのように使っていますか？サーバーサイドで動くJavaScriptであるNode.jsは、Socket.IOと連携してリアルタイムなウェブコンテンツを作ったり、webpackやgulpのようなフロントエンドエンジニアのツールとして使われたりとさまざまな場面で活用されています。

Node.jsで大規模な開発をする場合、TypeScriptを採用して開発の生産効率性・保守性を上げるのもオススメです。WebStormやVisual Studio Codeを使えばコード補完が効くためプログラミングの効率が劇的に向上し、TypeScriptの静的型付けによってコンパイル時型チェックが行われるので安全性が増します。Node.jsを使って中・大規模なシステムを構築するときはTypeScriptを検討するといいでしょう。

今回はNode.jsをTypeScriptで記述する基本設定から、TypeScriptの外部モジュール機能を使ってウェブサーバーを立ち上げる手順までを紹介します。今回のサンプルコードはGitHubで公開してるので、ダウンロードして読み進めましょう。

TypeScript環境の構築

使用環境を整えましょう。まずNode.jsをインストールします。Node.jsは公式サイトのインストーラーを使って手順にしたがってインストールします。インストール後コマンドライン（macOSだと「ターミナル.app」、Windowsだとコマンドプロンプト）にてnode -vと実行し、Nodeのバージョンが表示されていればインストール成功です。

つづいて、作業フォルダーで次のコマンドを入力します。すると、package.jsonファイルが作られます。

npm init -y

つづいて、TypeScriptとts-nodeをインストールします。Node.jsはJavaScriptを実行できるものの、TypeScriptを直接実行することはできません。TypeScriptのままNode.jsを実行できるようにするモジュールが「ts-node」です。

コマンドラインから以下のコマンドを実行します。

npm install typescript ts-node

また、Node.jsの型定義ファイルを用意しておきます。TypeScriptだけだとNode.jsのモジュールにどんなメソッドや変数があるかという情報を持っていないため、コンパイルが通りません。型定義ファイルを読み込むとTypeScriptに対応したエディターでコード補完が効くメリットもあります。

npm install @types/node -D

※コマンドの-Dはモジュールのインストール場所（devDependencies）を指定する--save-devのショートカットです。

これでpackage.jsonファイルの中身が仕上がりました。

▼package.jsonファイル

{
  "dependencies": {
    "typescript": "^5.0.2",
    "ts-node": "^10.9.1"
  },
  "devDependencies": {
    "@types/node": "^18.15.3"
  },
  "private": true
}

つづいて、TypeScriptのコンパイル設定もしておきましょう。package.jsonと同階層に、tsconfig.jsonファイルを次の内容で用意します。

▼tsconfig.jsonファイル

{
  "compilerOptions": {
    "module": "CommonJS",
    "strict": true,
  }
}

※モジュールの方式は、CommonJSとESMのどちらかを選べます（参照：『CommonJS vs native ECMAScript modules | ts-node』）。本記事では設定の少ないCommonJSで解説してます。

以上でNode.jsをTypeScriptで記述する環境の構築は終了です。

TypeScriptファイルの作成

Node.jsをTypeScriptで記述していきましょう。新規テキストファイルを作成してexample1フォルダーの中にapp.tsという名前にします。app.tsの中にテキストエディターで以下のようなコードを記述します。

console.log("Hello! Node.js × TypeScript");

コマンドラインでNode.jsを実行するためのts-nodeコマンドを実行します。コマンドラインに「Hello! Node.js × TypeScript」と出力されるのが確認できます。

ts-node example1/app.ts

httpモジュールを使ってhttpサーバーを立ててみよう

Node.jsをTypeScriptで記述して簡単なhttpサーバーを立ててみましょう。ここで作るのはブラウザでアクセスがあったら文字列を表示するシンプルなhttpサーバーです。Node.jsにおけるさまざまな処理は「モジュール」という単位に分けられています。たとえばhttpサーバーを立てるための機能はhttpモジュール、ファイルの読み書きを行うための機能はfsモジュールにて定義されています。TypeScriptでこのようなモジュールを使用するためにはimport文を使います。

import * as http from "http";

httpサーバーを設定するcreateServer()メソッド、サーバーを起動してリクエストを待ち受け状態にするlisten()メソッドを使って、httpサーバーは以下のようにして構築できます。

import * as http from "http";

const port = 5000; // ポート番号

// httpサーバーを設定する
const server = http.createServer(
  (request, response) => {
    // サーバーにリクエストがあった時に実行される関数
    response.end("Hello! Node.js with TypeScript");
  }
);
// サーバーを起動してリクエストを待ち受け状態にする
server.listen(port);
// ログを出力する
console.log(`http://localhost:${port} へアクセスください`);

サンプル：httpモジュールを使ったサーバー構築

コマンドラインからts-node example2/app.tsコマンドを実行し、ブラウザでhttp://localhost:5000にアクセスすると「Hello! Node.js with TypeScript」と表示されています。これはNode.jsによってhttpサーバーが起動してクライアントのリクエストを待っている状態であることを示します。この待ち受け状態はショートカットCtrl+Cキーで停止できます。

Node.jsによって文字が出力されている例

外部モジュールを作って長い処理を複数のファイルに分けよう

処理が増える毎に長くなっていくスクリプトの見通しを良くするためには、機能毎に処理を分けて外部ファイル化して外部モジュールをつくるといいです。上記のhttpサーバーのポート番号を外部ファイルで管理してみましょう。app.tsと同じ階層にconfig.tsという外部ファイルを作ってapp.tsから読み込みます。ここで注意したいのは、外部から読み込まれる変数にexportを指定する必要があることです。

▼config.ts

/** ポート番号 */
export const port = 5000;

これを読み込む側のapp.tsの処理ですが、Node.jsのモジュール読み込みと同じようにimport文を使います。

▼app.ts

import * as http from "http";
import { port } from "./config"; // 自前で作成したモジュールを読み込む

// httpサーバーを設定する
const server = http.createServer(
  (request, response) => {
    // サーバーにリクエストがあった時に実行される関数
    response.end(`Hello! Node.js with TypeScript. Port is ${port}.`);
  }
);
// サーバーを起動してリクエストを待ち受け状態にする
server.listen(port);
// ログを出力する
console.log(`http://localhost:${port} へアクセスください`);