初めに
どもども！新卒期間が残り二か月の平社員の龍ちゃんです。このフレーズを同期にいじられたので積極的に使っていこうと思います。あと誤字脱字も指摘されたので、これからより一層ブログ作成に励んでいきます。
今回は、Node.jsのExpress環境でAPIを構築するための第二弾となっています。前回は、シンプルに環境構築部分について解説しました。今回の内容としては、「ミドルウェアを使用してみる」を目標に調べて実装してみました。今回の実装した結果はこちらです。ブログ内のコードは動くものと動かないものがあるので、Gitから落として動かしてもらった方が良いです。
とりあえず今回勉強した内容は、以下のサイトを参考にしています。
僕がミドルウェアを実装したことで感じたこメリットとしては以下の三点になります。
- 共通化処理を挟み込むことができる
- エラーハンドリングを簡単に実装
- 処理ごとに別々のファイルでコーディング
正直、会社に入る前までは管理のしやすさといった観点は欠落していたのですが、徐々に大切さを認識しています。ミドルウェアを導入することで、保守性を高めることができると思います。
それでは説明を始めていきます。
Express ミドルウェアとは？
ここでは、ミドルウェアとはそもそも何かという話をしていきます。この記事で端的な説明がされているのでお勧めです。こちらは広義の定義になります。Expressで実装するミドルウェアでは、狭義の定義になるような印象があります。Expressでもミドルウェアを実装することができます。ここで実装するミドルウェアとしては、「共通化処理」という言葉が当てはまります。前回解説して実装では、一つのファイルですべての処理が書き込まれていました。今回の実装では、処理の前や後に共通処理を実装します。実装する内容としては、以下になります。
- 処理の前にログを管理する
- 処理の前にルーティング定義を行い、処理をするファイルを分割する
イメージとしては、以下の図になります。
ミドルウェアの実装
Expressでミドルウェアを実装する方法について説明します。公式チュートリアルでも紹介されているので置いておきます。基本的な要素としては、「use」と「next」になります。
サンプルとして、処理の前にログを出力するミドルウェアを題材に説明していきます。実装としては、前回記事の「app.ts」を参考にしています。「app.ts」に以下のコードを追記してください。一つ注意点です！今回は、app.getの前にコードを書くようにしてください。
「middlewareTest」の引数について解説していきます。
- req：HTTPのrequest情報を受け取る
- _res：HTTPのresponse情報を受け取る
- next：ネクストファンクション
ここで重要になるのは「next」であるネクストファンクションです。簡単に説明をすると、「next()」を書くことで処理を継続することができます。
基本的にミドルウェアではデータの返送などは行いません（僕の認識では..）。ここで重要になるのがネクストファンクションです。これを処理の最後に書くことで、処理が継続されてapp.use以下に処理が走ります。試しに、「middlewareTest」内にあるnextを削除して実行すると情報が何も帰ってこなくなります。引数に関しての説明はこちらのサイトで復習できます。
もう一点重要な点として、res.endを書いている部分より「app.use(middlewareTest)」を書くと、ログが表示されなくなります。これはExpress（Node？）では処理は書いた順に実行されるという点が関係しています。実行の順番は特に気を付ける部分です。
ルーティング設定
ここでは、ルーティングで処理を振り分ける方法について解説していきます。正直ミドルウェアとしてここの機能を解説するか迷いましたが、書き方として似ているので解説していきます。
HTTPメソッドを実装する方法を解説してから、ミドルウェアとしてルーティングを定義する方法を解説します。
環境の「app/routes/testRouter.ts」と「app/app.ts」を開きながらだとわかりやすいです。
HTTPメソッド設定
本筋とは異なりますが、HTTPメソッドを設定する方法に関して説明します。公式のチュートリアルのリンクを置いておきます。僕がよく利用するHTTPメソッドとしては以下の四種類です。その他のメソッドはこちらで確認できます。
- GET
- POST
- PUT
- DELETE
これは、REST APIとも関わってくるメソッドでもあります。これらをExpressで使用する際の基本的な書き方としては、以下です。
app.METHOD(PATH,HANDLER)
プロパティの説明としては、
- METHOD：HTTPメソッド
- PATH：URLの文字列
- HANDLER：一致した場合の処理
になります。
コードとしては、以下の書き方で実装することができます。
ミドルウェアルーター設定
ここでは、ルーティング処理を切り出して実装する方法について説明します。公式のチュートリアルの一番下にサンプルが置いてあります。ここでは、実際の構築方法について解説します。
まず、ファイルを作成しましょう。ファイル名は適当に「testRouter.ts」とでもしときましょう。内容としては以下の内容を転記してください。
このままでは「/」にアクセスした際のルーティングになっています。これを「/testRouter」にアクセスした際に処理を行うように設定をする必要があります。前回記事の「app.ts」に対して以下のコードを追加することで設定完了です。内容としては、先ほど作成したrouterファイルをインポートして、「app.use」でルートと処理を紐づけています。
エラーミドルウェア
ここでは、エラーミドルウェアについて解説します。公式ですでにハンドラーが作成されているので、公式のサンプルを見ながら基本的な動作を確認します。エラーの発生方法としては、様々ありますが自分でエラーを出す方法としては以下のコードになります。
throw new Error("Error Comming!!");
そのエラーをキャッチする方法として、お試しで以下のコードを「app.ts」に追記して実行してみてください。
ここで、「/helloworld」にアクセスするとエラーメッセージが表示されると思います。エラーミドルウェアの処理記述部分では、引数を「err, req, res, next」の四つ宣言することでエラーを取得することができます。また、エラーなのでルートの最後に記述する必要があります。
このままだと使いづらいので、カスタムする必要があるのですがそれは次の記事で取り組みます。
終わりに
お疲れ様です。ミドルウェアとしてはエラーハンドリングを使う部分が最も重要になる点になるかと思います。今回は、公式チュートリアルに乗っている範囲に関しての説明を行いました。エラーハンドリングでは、公式に乗っていない部分も含めて説明するので記事として分割しています。
次回の記事はこちらになります。
それではまた！
