【ITニュース解説】Setting Up an Express TypeScript Server: A Step-by-Step Guide

Webアプリケーション開発において、効率的で堅牢なサーバーを構築することは非常に重要だ。Node.js用の高速で柔軟なWebフレームワークであるExpressと、JavaScriptに型安全性をもたらすTypeScriptを組み合わせることで、高品質なサーバーサイド開発が可能になる。この解説では、ExpressとTypeScriptを使った基本的なサーバーをゼロから構築する手順を、システムエンジニアを目指す初心者の皆さんにも分かりやすく説明する。

まず、開発を始める前にいくつか準備が必要だ。Node.js（バージョン16以上が推奨）と、Node.jsに付属するパッケージマネージャーのnpmがシステムにインストールされていることを確認しよう。また、コードを書くためのVS Codeのようなエディタも準備しておくと良い。TypeScriptとExpressに関する基本的な知識があれば、よりスムーズに理解できるだろう。

プロジェクトの準備として、最初に作業ディレクトリを作成し、その中に移動する。例えば、express-ts-serverという名前のフォルダを作成し、その中でnpm init -yコマンドを実行する。このコマンドは、プロジェクトの情報を記述するpackage.jsonというファイルを自動的に生成し、デフォルトの設定で初期化してくれる。このpackage.jsonファイルは、後でプロジェクトの依存関係や実行スクリプトを管理するために使う、非常に重要なファイルだ。

次に、サーバーを動かすために必要な様々なソフトウェアパッケージをインストールする。Express本体をインストールするためにnpm install expressを実行する。また、TypeScript関連のパッケージも必要だ。npm install --save-dev typescript @types/node @types/express ts-node nodemonを実行して、以下のパッケージを追加する。typescriptはTypeScriptのコードをJavaScriptに変換するコンパイラそのものだ。@types/nodeと@types/expressは、Node.jsやExpressが提供する機能に対して、TypeScriptが型情報を認識できるようにするためのファイルだ。これにより、コードの記述中に型の誤りをチェックしたり、コード補完の恩恵を受けたりできる。ts-nodeは、TypeScriptファイルを事前にJavaScriptに変換することなく、直接実行できるようにするツールで、開発中に非常に便利だ。そして、nodemonは、開発中にファイルが変更されるたびにサーバーを自動的に再起動してくれるため、手動でサーバーを起動し直す手間を省いてくれる。

これらのパッケージをインストールしたら、TypeScriptのコンパイラがどのように動作するかを設定するtsconfig.jsonファイルを作成する。npx tsc --initコマンドを実行すると、基本的な設定ファイルが生成される。このファイルを編集し、いくつかの重要な設定を追加する。compilerOptionsセクションに、"module": "commonjs"を設定することで、Node.jsで一般的なモジュールシステムであるCommonJS形式で出力されるようにする。"rootDir": "./src"は、TypeScriptのソースコードがsrcディレクトリに配置されることを示し、"outDir": "./dist"は、コンパイルされたJavaScriptファイルがdistディレクトリに出力されることを指示する。"strict": trueを設定すると、より厳密な型チェックが有効になり、コードの品質と堅牢性を高めることができる。

プロジェクトのファイル構成を整えるために、srcというディレクトリを作成し、その中にサーバーのメインコードを記述するserver.tsファイルを作成する。これで、express-ts-serverディレクトリの中に、node_modules（インストールしたパッケージ群）、src（TypeScriptのソースコード）、package.json、tsconfig.jsonが揃った状態となる。

いよいよExpressサーバーのコードを記述する。src/server.tsファイルを開き、以下のコードを追加する。まず、Expressライブラリと、Expressが提供するApplication、Request、Responseといった型定義をインポートする。const app: Application = express();でExpressアプリケーションのインスタンスを作成し、const port = 3000;でサーバーが待ち受けるポート番号を設定する。 app.use(express.urlencoded({ extended: true }));とapp.use(express.json());は、それぞれURLエンコードされたデータとJSON形式のデータをサーバーが処理できるようにするための設定だ。これは、Webブラウザからのフォーム送信や、APIクライアントからのJSONデータを受け取る際に必要となる。 app.get('/', (req: Request, res: Response) => { res.send('Hello, TypeScript + Express!'); });は、サーバーのルートパス（/）にGETリクエストがあったときに、「Hello, TypeScript + Express!」というテキストを返す基本的なルート（エンドポイント）を定義している。reqはリクエストオブジェクト、resはレスポンスオブジェクトを表し、それぞれ型注釈でTypeScriptの型安全性を確保している。 最後に、app.listen(port, () => { console.log(Server is running on http://localhost:${port}`); });`で、指定したポートでサーバーを起動する。サーバーが起動すると、コンソールにメッセージが表示される。

開発をより効率的に行うために、package.jsonファイルのscriptsセクションにいくつかのコマンドを追加する。"start": "node dist/server.js"は、本番環境でコンパイル済みのJavaScriptファイルを実行するためのコマンドだ。"build": "tsc -p ."は、TypeScriptのソースコードをJavaScriptにコンパイルし、distディレクトリに出力するためのコマンドだ。そして、"dev": "nodemon src/server.ts"は、開発中にnodemonを使ってsrc/server.tsファイルを実行し、ファイルの変更を監視して自動的にサーバーを再起動するためのコマンドだ。

これでサーバーをテストする準備が整った。ターミナルでnpm run devコマンドを実行すると、nodemonが開発サーバーを起動し、Server is running on http://localhost:3000というメッセージが表示されるはずだ。Webブラウザを開き、http://localhost:3000にアクセスすると、「Hello, TypeScript + Express!」というメッセージが表示されることを確認できるだろう。

アプリケーションを本番環境にデプロイする際には、TypeScriptファイルをJavaScriptにコンパイルする必要がある。npm run buildコマンドを実行すると、TypeScriptコンパイラがsrcディレクトリ内のTypeScriptファイルをJavaScriptに変換し、tsconfig.jsonで指定したdistディレクトリに出力する。コンパイルが完了したら、npm startコマンドでdist/server.jsファイルを実行し、本番環境向けのサーバーを起動できる。

この手順を通じて、型安全なExpressサーバーをTypeScriptで構築するための基本的なフレームワークが完成した。これは、堅牢でスケーラブルなAPIを構築するための強固な基盤となる。ここからさらに、データベースとの接続、認証機能の追加、さらなるルートの定義、そしてRailwayやRenderのようなプラットフォームへのデプロイなど、様々な機能を追加してアプリケーションを拡張していくことができるだろう。