ExpressサーバをTypeScriptで作る。#

Expressとは、Node.jsでサーバアプリを作る仕組みです。 TypeScriptとは、JavaScriptに様々な機能を追加した言語です。

ここでは、TypeScriptでExpressサーバ作成、起動してみましょう。

前提#

Node.jsをインストールしておいてください。必須ではないですが、Visual Studio Codeをインストールして、ファイルの編集に使うと便利です。

Nodeプロジェクトの作成#

まずは、ディレクトリを作成、プロジェクトを初期化します。以下の２つのコマンドをターミナル（もしくはコマンドプロンプト。以下ターミナルに寄せます。）で実行します。

mkdir express_with_type
cd express_with_type
npm init -y

これでpackage.jsonというファイルが作成されます。nodeのプロジェクトでは、package.jsonでプロジェクトを管理します。以降のコマンドはすべてexpress_with_typeディレクトリで実行してください。

TypeScriptのインストール#

次にTypeScriptをインストールします。

npm install -D typescript @types/node

package.jsonにTypeScriptを使うということが記録され、TypeScriptがディレクトリにインストールされます。

プロジェクトをTypeScript用に初期化します。tsconfig.json というファイルを以下の内容で作成してください。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

tsconfig.jsonにはTypeScriptの設定情報が記載されています。

Expressのインストール#

次にExpressをインストールします。

npm install express
npm install -D @types/express

@types/express はTypeScriptでExpressを使えるようにするライブラリです。

これで、TypeScriptでExpressサーバを作成する準備が整いました。

サーバ作成#

サーバを作っていきます。まずは簡単なサーバを作って、だんだん実用的にしていきます。何をしているかを順を追って理解するようにしてください。

index.tsという名前のファイルを今いるディレクトリ(express_with_type)に作成します。

もし、Visual Studio Codeをインストールしているのであれば、Visual Studio でexpress_with_typeディレクトリを開いて以下の作業を行うと楽です。

express_with_typeの中にindex.tsという新規ファイルを作成してください。

import express from 'express'
const app: express.Express = express()
app.get("/", (req:express.Request, res:express.Response)=>{
    res.send("こんにちは");
})
app.listen(3000,()=>{
    console.log('ポート3000番で起動しました。')
})

これでサーバが完成しました！動かしていきます。

まず、tscコマンド=TypeScriptコンパイラを使ってindex.tsをトランスパイルします。

npx tsc

npx とは、今のディレクトリにインストールされているコマンドを実行するコマンドです。 tsc は、./node_modules/.bin/tsc にインストールされているのですが、npx をつけるとそれを実行してくれます。これで、index.jsというファイルが生成されます。作ったサーバを動かすためのファイルです。サーバを起動するためにはindex.jsをnodeを使って実行します。

node index.js

ブラウザで http://localhost:3000 にアクセスすることで、ブラウザにこんにちはと表示されるこのように表示されたら、完成です。無事、Webサーバを構築することができました。

次は、実用的な形に開発環境とサーバを修正していきます。一旦、サーバを停止するために、ターミナルで、Control(もしくはCtrl)を押しながらCキーを押しておいてください。

TypeScriptのソースを実行ファイルと分ける。#

今、ディレクトリを見ると、

$ ls -al
total 80
drwxr-xr-x    8 tito  staff    256  7 19 21:07 .
drwxr-xr-x+ 354 tito  staff  11328  7 19 21:07 ..
-rw-r--r--    1 tito  staff    468  7 19 21:07 index.js
-rw-r--r--    1 tito  staff    250  7 19 21:07 index.ts
drwxr-xr-x   54 tito  staff   1728  7 19 21:04 node_modules
-rw-r--r--    1 tito  staff  17663  7 19 21:04 package-lock.json
-rw-r--r--    1 tito  staff    398  7 19 21:04 package.json
-rw-r--r--    1 tito  staff   6071  7 19 21:04 tsconfig.json

こんなふうです。注目すべきはindex.jsとindex.tsです。自分で作ったファイルと、tscが生成したファイルが同じ場所にあるので、見分けにくいですね。編集するためのファイルと、生成されるファイルのディレクトリを分けてみましょう。

tscconfig.jsonを以下のように修正してください。

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

次に、自分でいじるファイル、index.tsをsrc/backendディレクトリに移動させていきます。 src/backendディレクトリはまだないので、作成します。ターミナルで以下を実行してください。

mkdir -p src/backend

mkdirはディレクトリを作成するコマンドです。ディレクトリが作成されます。この中にindex.ts を移動させます。ターミナルで以下を実行してください。

mv index.ts ./src/backend

そうしたら、もう一度、tscを使って、index.tsからindex.jsファイルを生成します。

ターミナルで以下を実行してください。

npx tsc

すると、distディレクトリにindex.jsが出力されます。 distの中のindex.jsを実行します。

node dist/index.js

これで、編集するためのファイルと、生成されるファイルのディレクトリを分けることができました。サーバを停止するために、ターミナルで、Control(もしくはCtrl)を押しながらCキーを押してください。

最後に、最初に出力したindex.jsが残っているので削除をしておきます。

rm index.js

(windowsだと rm はdelです。)

サーバがAPIを扱えるようにする。#

最近のWebアプリケーションでは、ブラウザ上で動くアプリケーションからサーバのAPIを実行してデータを送受信、処理を行います。今、サーバは「こんにちは」と出力していますが、APIを扱うには少し足りません。機能強化します。

src/backend/index.tsを以下のように書き換えてください。

import express from 'express'
import messageController from './controllers/message'

const app: express.Express = express()

// 追加 サーバの強化追加
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
// 追加終了

// 追加 処理の外だし
app.use("/messages", messageController)
// 追加終了

// 3000番ポートでAPIサーバ起動
app.listen(3000, () => {
    console.log('ポート3000番で起動しました。')
})

また、src/backend/controllers ディレクトリを作成し、

mkdir src/backend/controllers

その中にmessage.tsという名前のファイルを作成してください。内容は以下です。

import express, { Router } from 'express'

var router: Router = express.Router();

router.get('/', function(req, res) {
    res.send({text:"こんにちは！"});
});

export default router;

index.tsは機能を強化し、サーバとして通信を受け取る部分だけに特化させました。そして、APIの処理はmessage.tsに切り出し、index.tsから読み込むようにしました。

tscでトランスパイルします。

npx tsc

起動します。

node dist/index.js

ブラウザで http://localhost:3000/messages にアクセスします。

JSON表示

{"text":"こんにちは！"}

この形は、JSONといって、APIの通信によく使われる形です。 {"値名":"値", "値名2":"値2"} のように{}に囲まれた値の名前と値が:でくっついた形式をしています。TypeScriptとの親和性がよいので、よく使われます。

これで、サーバがAPIを扱えるようになりました。

ターミナルで、Control(もしくはCtrl)を押しながらCキーを押して、サーバを停止してください。

ソース変更時に自動再起動する。#

これまで、ソースを変更するたびに tsc コマンドと、node dist/index.js コマンドを何度も実行しました。これからソースコードをどんどん修正して、サービス化していくのに、何度も実行するのはめんどくさいですね。

このページの最後に、ソースコードを編集したら、自動的にトランスパイル、サーバ再起動をしてくれるようにします。

まず、tsc-watchというツールをインストールします。

npm install -D tsc-watch

そして、tsc-watchを実行します。tsc-watchは、実行しておくとファイルに変更があったら勝手にトランスパイルしてくれます。そして、--onSuccess オプションのあとに、サーバを実行するコードを記載する事によって、トランスパイル後にサーバを起動してくれます。

npx tsc-watch --onSuccess "node dist/index.js"

ただ、覚えておくにはちょっと長すぎるコマンドですね。そんなときには、package.jsonに記載しておきます。

package.jsonの以下の場所を、

// 省略
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
// 省略

以下のように変更してください。

  "scripts": {
    "watch:backend": "tsc-watch --onSuccess \"node dist/index.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

保存した後に、ターミナルで以下を実行します。

npm run watch:backend

以下のような表示がされます。

9:39:10 PM - Starting compilation in watch mode...


9:39:13 PM - Found 0 errors. Watching for file changes.
ポート3000番で起動しました。

では、試しに src/backend/index.tsを修正してみましょう。以下の行を

    console.log('ポート3000番で起動しました。')

以下のように修正します。

    console.log('ポート3000番で起動しましたよ！')

すると、自動的に再起動され、以下のような表示がなされます。

9:41:38 PM - File change detected. Starting incremental compilation...


9:41:38 PM - Found 0 errors. Watching for file changes.
ポート3000番で起動しましたよ！

これで、サーバサイドの実用的な開発ができます！

次はVueで、フロントエンドの構築に入っていきましょう。

ご質問・ご要望をお待ちしています。