📝

RESTfulなAPIを作成する！(with Node.js Express & MongoDB &　TypeScript)

2021/03/07に公開

MongoDB

Node.js

TypeScript

tech

はじめに

本記事では、Node.js ウェッブアプリケーションサーバーフレームワークであるExpressと、NoSQLのMongoDBで簡単なAPIを作成する手順をまとめました。

必要なパッケージを導入

yarn add express mongoose

yarn add -D @types/express @types/mongoose @types/node @types/nodemon nodemon ts-node typescript

nodemon,ts-node導入

nodemonについての概要についてはこちらの記事で勉強させていただきました！

ファイル監視させるためpackage.jsonに以下を追記します。

"scripts": {
    "start": "nodemon --exec ts-node src/index.ts"
 }

ts-nodeはソースコードを修正するたびに tsc を実行し、さらにそのあと node コマンドを実行するのは手間なので導入しました。

コードを書く

express

まずはexpressについて軽く触れるため、ポート番号 3000 に起動させます。

import express from "express";

const app = express();

app.get('/',(req:Request,res:Response) => {
  res.send('Hello from node');
});

const PORT = process.env.PORT || 3000;// port番号を指定

//サーバー起動
app.listen(PORT, () => console.log(`Server run at port ${PORT}`));

ターミナル上でyarn startとタイプすると

Server run at port ３０００

と表示されれば ok です。

サーバーを起動後Postmanでurlにローカルホスト３０００番を指定し、SENDボタンを押すと意図した結果が返されます。
postman

MongoDB

MongoDBについては以下の記事が画像付きでわかりやすいです。

コードに戻り、MongoDBとの接続を図ります。

import express from "express";
+ import mongoose from "mongoose";


const app = express();

app.get('/',(req:Request,res:Response) => {
  res.send('Hello from node');
});

+ mongoose
+  .connect(
+    'mongodb://username:<password>@cluster0-shard-00-00.uppu6.mongodb.net:27017,cluster0-shard-00-01.uppu6.mongodb.net:27017,cluster0-shard-00-02.uppu6.mongodb.net:27017/myFirstDatabase?ssl=true&replicaSet=atlas-k12pxg-shard-0&authSource=admin&retryWrites=true&w=majority',
+    {
+      useNewUrlParser: true, //ユーザーが新しいパーサーにバグを見つけたとき古いパーサーに逆戻りする機能
+      useUnifiedTopology: true,//新しいトポロジエンジンに関連しなくなったいくつかの接続オプションのサポートが削除される機能
+      useFindAndModify: false,
+    }
+  )
+  .then(() => console.log("mongodb connected!"))
+  .catch((error) => console.log(error));

const PORT = process.env.PORT || 3000;// port番号を指定

//サーバー起動
app.listen(PORT, () => console.log(`Server run at port ${PORT}`));

保存すると、nodemonが働きコンソール上に "mongodb connected!" と表示されるはずです。

ユーザー名やパスワードをリポジトリにコミットさせないためにenvファイルを導入します。

envファイル

まず必要なパッケージをインストールしましょう。

yarn add dotenv

env ファイルはトップディレクトリに作成します。

├── src/
   　└──index.tsx
└──.env
└──package.json
└──tsconfig.json

.env内のコードは以下のとおりです。

.env

USERNAME=・・・・・・・・・・・　//MongoDBに登録したユーザー名を指定
PASSWORD=・・・・・・・・・・・　//接続セキュリティ情報を作成時のパスワードをペースト

index.tsファイルは以下のように変更を加えます。

import express from "express";
+ import dotenv from "dotenv";

const app = express();
+ dotenv.config();


app.get('/',(req:Request,res:Response) => {
  res.send('Hello from node');
});

mongoose
  .connect(
-    'mongodb://~',//MongoDBのurl
+    `mongodb://${process.env.USERNAME}:${process.env.PASSWORD}@cluster0-shard-00-00.96zsr.mongodb.net:27017,cluster0-shard-00-01.96zsr.mongodb.net:27017,cluster0-shard-00-02.96zsr.mongodb.net:27017/myFirstDatabase?ssl=true&replicaSet=atlas-118son-shard-0&authSource=admin&retryWrites=true&w=majority`,
    {
      useNewUrlParser: true, 
      useUnifiedTopology: true,
      useFindAndModify: false,
    }
  )
  .then(() => console.log("mongodb connected!"))
  .catch((error) => console.log(error));

const PORT = process.env.PORT || 3000;// port番号を指定

//サーバー起動
app.listen(PORT, () => console.log(`Server run at port ${PORT}`));

Model 作成

モデルを作成するために、MongoDBのスキーマを利用します。スキーマの役割は、 JSON 形式で変数名と値のペアを定義することです。
ファイル構成を確認しておきましょう。

├── src/
   ├── models/　　　　← New
           └──User.ts  
   └──index.tsx
└──.env
└──package.json
└──tsconfig.json

それではコードを書いていきます。

Users.ts

import mongoose, { Schema } from "mongoose";

const UserSchema: Schema = new mongoose.Schema({
  username: {
    type: String,
    require: true,
  },
  email: {
    type: String,
    require: true,
  },
  date: {
    type: Date,
    default: Date.now,
  },
});

export default mongoose.model("Users", UserSchema);