実施内容

前回は環境構築やビルドの仕組み等を中心に行ったので今回はAPIの具体的な設計や処理フローを中心に進めていきました。
具体的な内容は下記の通りです。

• 宿題の答え合わせ
• パラメーターの渡し方
• ボディーの渡し方
• バリデーションの方法について

宿題の答え合わせ

前回はサンプルのPUT APIを作成しましたが時間が足りなかったので残りの要件は宿題とし今回その答え合わせと復習を中心に行いました。

パラメーターの渡し方

今回はPUTのAPIになるのでURLでIDを渡し、そのIDに応じたデータを変更する処理を追加しました。
受け取り方はRouterの :id で受け取ることができます。

router.put('/:id', (req, res, next) => {
  // PUTメソッドの実行
})

メソッドの内の受け取り方は req.params.id で受け取ることができます。
ついでにconstructorで初期化してあげた方が良いです。

constructor(req: Request, res: Response) {
  this.params = req.params.id
}

console.log(this.params.id)

ボディーの渡し方

IDの指定でどのデータを更新するかを指定できたので次は実際に変更する値を渡す処理を追加します。
今回はPOSTMANでコールするので下記のように設定をします。
渡す際はrowの中でJSON形式で渡してあげます。

受け取る際は req.body.hoge や req.body.fuga でアクセスが可能です。
こちらもconstructorで初期化してあげると良いでしょう。
パラメーターと一緒にスプレット構文で展開してあげることで“this.params.hoge“のようにアクセスすることが可能です。

constructor(req: Request, res: Response) {
  this.params = { ...req.params, ...req.body }
}

バリデーションの方法について

バリデーションでチェックする方法はさまざまありますが、まずはデフォルトで必要な内容を実装しました。
観点としてはサーバーエラーにならないこと、不要なデータが紛れ込まないこと、悪意のあるリクエストを弾くことです。(下記で足りない点があったら是非教えてください。)
具体的には下記の実装となります。

if ( 
    !Number(this.params.id) ||　// id が number型かチェック
    typeof this.params.hoge !== "string" ||  // hoge が string型かチェック
    !Number(this.params.fuga)  // fuga が number型かチェック
  ) {
      // エラー処理
    }

もう一つおまけに許可していないパラメーターが送られた際にチェックするのは下記のように実装すると可能になります。

const permissionParams = ["id", "hoge", "fuga"]

// 下記をif文の中に突っ込んであげればOK
!Object.keys(this.params).every(key => permissionParams.includes(key)) 

// id, hoge, fuga 以外のパラメーターが紛れ込んでいる場合はfalseを返す

さいごに

今回はPUT APIの具体的な実装方法を中心に行いましたので、次回はPOSTとDELETEのAPIを仕上げて基本的なCLUD操作が可能な状態にしようと思います。
私自身も久しぶりにExpressを触りましたがやっぱり楽しいですね。(笑)
TypeScript最高!!!
ご興味ある方はTwitterをフォローの上DMにてご連絡くださいませ！