Typescript でExpress のルーティングを書いてみる

こんにちは！Typescript の記事を頑張って量産しています。インフラのことも書きたいことはたくさんあるんですが、インフラ以外も書きたいという想いが最近強くなってきたので、開発系統の入門記事を今日も頑張ってかいていきます。

今日はNode のExpress というフレームワークがあるのですが、それを用いてTypescript で簡単なルーティングを書いていきたいと思います。

その前にExpress についてサラッとかきます。

Express とは
Express をTypescript で書いてみる
まとめ
今回の参考記事

Express とは

Express とは、Node.js で動作するWeb アプリケーションのフレームワークです。PHP を普段やっている人にとってはLaravel を書く感覚に近いような感じがします。というか、ほぼLaravel と感覚同じです。どのフレームワークもそうですよね。。。きっと。

Gemini にメリットを聞いてみると・・・

シンプルで分かりやすい: Node.jsの基本的な機能の上に、Webアプリケーションに必要な便利な機能が整理されて提供されているので、コードが書きやすく、理解しやすいです。

ルーティングが簡単: どのURLにアクセスがあったときに、どの処理を実行するか（ルーティング）を直感的に記述できます。

ミドルウェアが豊富: リクエストとレスポンスの間で様々な処理を行う「ミドルウェア」という仕組みがあり、認証、ロギング、エラー処理など、多くの便利なミドルウェアが公開されています。自分で作成することも可能です。

テンプレートエンジンとの連携: HTMLを動的に生成するためのテンプレートエンジン（EJS, Pugなど）と簡単に連携できます。

大規模なアプリケーションにも対応可能: シンプルでありながら、大規模なWebアプリケーションやAPIサーバーの開発にも十分対応できる柔軟性を持っています。

活発なコミュニティ: 世界中で多くの開発者に利用されており、情報が豊富で、困ったときに助けを得やすいです。

という答えが返ってきました。うなずけるものも多いですね。特にシンプルで分かりやすいというのはその通りだと思います。フレームワークですからねｗ

例えば、node ではサーバーを作成するのを行をかかないと実装が難しいのですが、Express だと3 行くらいでかけます(require の定義とかも合わせて)。
なので、これはなんてシンプルなんだって感動しました。なので、フレームワーク大好きです。

Express がなんて楽なんだというのが分かったと思うので、実際に実装に入っていきます。

Express をTypescript で書いてみる

今回はこんな感じの構成にしようかなと思っています。ちょっとこの記事を意識して練習がてら、構成についても考えてみようということで、controller とinfra を分離してかいています。本当にhello world するくらいの記述しかないので、そんなに構えなくて大丈夫です！！

■ 今回の構成

/src
├── controllers
│   ├── hello.js
│   ├── hello.ts
│   ├── index.js
│   └── index.ts
├── index.js
├── index.ts
└── infra
    ├── index.js
    └── index.ts

まずは、src ディレクトリの index.ts を最初に記述して、3000 port でlisten できるところまで実施してみます。

// パッケージ定義
const express = require('express');
const app = express();

// server 作成
app.listen(3000,
    () => console.log('server started'
)


export default app;

やっていることとしては、npm でインストールした、express を読み込んで、app という名前で使えるようにしています。それから、express でlisten するポートを指定して、問題なさそうだった場合、server started というのをログとして出力するような内容になっています。

起動するために、

# ts ファイルのcompile 
tsc index.ts

# node コマンドで立ち上げる
node index.js
=> server started というのがログで出力されればオッケー！

の手順を踏んでいきましょう！ここまでいけたら、次はController をかいていきます。

ここでは、Hello.ts とindex.ts をそれぞれかいていきます。まずは、hello.ts です。
今回は役割を分離しながら、簡単にexpress でもこういうことができるんだよという例を見せたいだけなので、特段難しい処理などは省いております。

class HelloController {

    // hello world と表示
    public async HelloWorld(req, res){
        res.send('hello world')
    }
}

export {HelloController}

やっていることとしては、HelloController Class を作成して、そこでHelloWorld メソッドを定義しています。一番この中で忘れやすいのが、export {HelloController} のところです。これを記述するのを忘れてしまうと、継承することができなくなるので、これは書くのを忘れないように注意してください。

ここでexport して、外部のファイルでそれが受けれるようにしておりますが、Class が増えた時のために、index.ts でまとめてexport できるようにしておきましょう！！

import {HelloController} from "./hello";  // ※hello.ts としないように注意


export default {
    HelloController
};

なので、import で hello.ts でexport したclass を呼んであげて、ここで外部で読み込めるようにするために、export default を記述しています。この記述をすることによって、複数のClass を一気に読み込めるみたいなので、まとめられていい感じですね！

ここまでできたら、controller で処理を渡す準備はできたので、Routing の部分を書いていきましょう。

import Controller from "../controllers"

const express = require('express');
const router = express.Router();

const helloCont = new Controller.HelloController();


// hello world をcontroller より呼び出す
router.get('/api', helloCont.HelloWorld )


export default router;

フレームワークをやったことがわかる方なら、直感的にわかるかもしれませんが、上のコードでやっていることは、Controller を呼び出して、変数定義をしてあげています。helloCont と名前を付けてあげている部分です。こうすることで、HelloController にかいてある、メソッドを helloCont.HelloWorld のように記述することで呼び出すことができます。

そして、今回はGET 処理なので、router.get と書いて、呼び出したいパスを指定することで、hello world を呼び出すことができるようになります。

最後に大元のファイルのindex.ts を少し変更していきます。Router を定義しているファイルを呼び出してあげて、このルーティングを使いますよという形で、express 側で認識してもらえるように、app.use という形でで定義します。

// 継承 
import indexRouter from "./infra/index";

// パッケージ定義
const express = require('express');
const app = express();

app.use('/',indexRouter)

// server 
app.listen(3000,
    () => console.log('server started')
)

export default app;

ここまでできたら、最後にnode で読めるように、tsc コマンドでcompile してあげます。

# src ディレクトリのindex.ts をcompile
tsc index.ts

他のts ファイルも一緒にcompile されるので、全部のファイルをcompile する必要はありません。
これで、localhost:3000/api にアクセスしたときに、hello world と表示されたら、今回の検証は成功です！！！

まとめ

Express でTypescript に挑戦を最近してますが、express を使う感覚はLaravel とほとんど同じなので、書き方さえ覚えてしまえば後は慣れるだけだなという感じがします。まだあんまり、Typescript の恩恵を受けれるような書き方などはしていませんが、Typescript の書き方にもこれから慣れていこうと思います。

これからもTypescript だけではなく、React とかも少しずつ紹介できていけたらなと思いますので、興味のある方はぜひ参考にしてみてください！！