はじめに

今回はTypeScriptでNode.js用のWebフレームワークであるExpressを使った環境の構築方法を記載します。
途中までの手順でNode.js + Expressの環境も用意可能です。

前提条件

・構築する環境にnode及びnpmがインストールされていること。

確認したローカルの環境

・OS Mac
・node 21.1.0
・npm 10.5.0
・作業するユーザー名：test-user

作業ディレクトリの準備とNodeの初期化

ターミナルを起動し、以下のコマンドでプロジェクト用のexpress_sampleディレクトリを用意し、express_sampleディレクトリ内に移動してNode.jsの初期化を行います。

$ mkdir express_sample
$ cd express_sample
$ npm init -y
Wrote to /Users/test-user/express_sample/package.json:
{
  "name": "express_sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Node.jsの初期化時に「-y」を指定したことで、コマンドを実行したディレクトリ内（今回の場合はexpress_sampleディレクトリ）に標準的な設定が記載されたNode用のpackage.jsonファイルが作成されます。

Expressフレームワークの導入

以下のコマンドを実行しExpressをインストールします。

$ npm install express

Expressをインストールしたことでexpress_sampleディレクトリ内にnode_modulesディレクトリとpackage-lock.jsonファイルが追加されます。
ここまででNode.js + Expressの環境が整ったので、確認のためindex.jsファイルを作成し以下のExpressを使用したコードを追加します。

// expressを読み込む
const express = require('express')

// expressのオブジェクトを作成
const app = express()
// ポートを指定
const port = 3000

// 「/」にアクセスされた時の処理
app.get('/', (req, res) => {
  res.send('Hello World!')
})

// サーバーを起動
app.listen(port, () => {
  console.log('Example app listening on port ' + port)
})

上記はExpressフレームワークを使用したアプリを3000番ポートで起動し、http://ドメイン:3000/でアクセスされた場合に「Hello World!」と表示されるアプリになります。
ここまで準備が出来たら、以下のコマンドを実行しアプリを起動します。

$ node index.js
Example app listening on port 3000

アプリが起動したら、ブラウザにてhttp://localhost:3000/またはhttp://127.0.0.1:3000/へアクセスすることで「Hello World!」が表示されたと思います。
アプリを停止する場合は、ターミナルにて[Control]キー + [C]キーを押下します。

TypeScriptの準備と初期化

まずはTypeScriptに必要、または入れておくと便利な以下のモジュール等をインストールします。

$ npm install -D typescript ts-node @types/node @types/express

typescript：TypeScriptをビルドするためのコンパイラ（tsc）など
ts-node：開発中にいちいちビルドせずにtsファイルのまま確認するためのツール
@types/nodeおよび@types/express：TypeScript用のNode.js及びExpressの型定義

上記のコマンドでは開発時に使用するために「-D」オプションまたは「–save-dev」オプションを指定しています。
次に以下のコマンドでTypeScriptの初期化処理を実施します。

$ tsc --init

TypeScriptの初期化処理を実施すると、全ての項目がデフォルト設定のtsconfig.jsonファイルがexpress_sampleディレクトリ内に作成されます。
tsconfig.jsonファイルはTypeScriptのビルド時に読み込まれ、ビルド後のファイルの出力先なども指定できるので、今回はビルドしたファイルがexpress_sampleディレクトリ配下のbuildディレクトリに出力されるように修正してみます。

テキストエディタでtsconfig.jsonを開き、コメントアウトされている「outDir」のコメントアウトを解除するか、自分で「outDir」の設定を追加し、以下のように記載します。

"outDir": "./build",

あとはTypeScriptで書かれたファイルを用意し、コンパイルして実行します。
今回は、index.tsファイルを用意し、以下のようにコードを記載します。

// expressを読み込む
import express from 'express';

// expressのオブジェクトを作成
const app: express.Application = express();
// ポートを指定
const port = 3000;

// 「/」にアクセスされた時の処理
app.get('/', (req, res) => {
  res.send('Hello World! It\'s TypeScript!')
});

// サーバーを起動
app.listen(port, () => {
  console.log('Example app listening on port ' + port)
});

index.tsファイルができたらtscコマンドを実行し、TypeScriptをビルドします。

$ tsc

ビルドが完了すると、先ほど指定したbuildディレクトリにindex.jsファイルが作成されるので、nodeコマンドで実行します。

$ node build/index.js
Example app listening on port 3000

アプリが起動したら、ブラウザにてhttp://localhost:3000/またはhttp://127.0.0.1:3000/へアクセスすることで「Hello World!It’s TypeScript!」が表示されたと思います。

最後に

上記手従に従って実行すると最終的に以下のようなディレクトリ構成になります。

[sapmle-bucket]ディレクトリ
　　　　- [build]ディレクトリ
　　　　　　　　- index.js
　　　　- index.js
　　　　- index.ts
　　　　- [node_modules]ディレクトリ
　　　　　　　　- (インストールされたモジュール色々)
　　　　- package-lock.json
　　　　- package.json
　　　　- tsconfig.json

今回の解説では、必要最低限のTypeScript + Expressの環境構築方法を説明しましたが、環境さえ整えばExpressの公式に記載されているロジックがほとんど修正せずに動くため（TypeScriptとして書く必要はありますが）、公式と睨めっこしてもらえればと思います。