⚙️

ExpressとmongoDBを使ったREST APIをTypeScriptで組んでみる【2.mongoDB接続編】

2021/06/21に公開

MongoDB

TypeScript

Express

tech

はじめに

Express（TypeScript）を利用してmongoDB（mongoDB Atlas）との連携をする方法の備忘録になります。
※セキュリティやエラー処理については考慮されていない点ご了承ください。

今回はmongoDB Atlasとの接続とダミーデータの投入を行います。

前回

mongoDBとの接続部分の構築

エントリーポイントとなるindex.tsファイルとmongoDBとの接続を記載をconfig/db.tsファイルとして作成します。

src/index.ts

import express from 'express';
import cors from 'cors';
import connectDB from './config/db';

// DBと接続
connectDB();

const app = express();

// CORS設定
app.use(cors());

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// .envファイル内PORT設定したポート番号で起動。デフォルトは3001。
const port = process.env.PORT || 3001;

app.listen(port);
console.log('Express WebAPI listening on port ' + port);

src/config/db.ts

import mongoose from 'mongoose';
import dotenv from 'dotenv';

// .envファイルの設定を読み込み
dotenv.config();

// .envファイルで設定したMONGO_URIを設定
const DATABASE_URL = process.env.MONGO_URI || 'http:localhost:3001';

const connectDB = async () => {
  try {
    const connection = await mongoose.connect(DATABASE_URL, {
      // options https://mongoosejs.com/docs/connections.html#options
      useUnifiedTopology: true,
      useNewUrlParser: true,
      useCreateIndex: true,
      useFindAndModify: false,
    });
    console.log(`MongoDB Connected ${connection.connection.host}`);
  } catch (error) {
    console.error(`Error: ${error.message}`);
    process.exit(1);
  }
};

export default connectDB;

ターミナルからExpressを起動して接続を確認します。

$ yarn dev

yarn run v1.22.10
$ ts-node-dev --respawn src/index.ts
[INFO] 11:12:00 ts-node-dev ver. 1.1.6 (using ts-node ver. 9.1.1, typescript ver. 4.2.4)
Express WebAPI listening on port 3001
MongoDB Connected cluster0-shard-00-00.*****.mongodb.net

実行後にMongoDB Connected cluster0-shard-00-00.*****.mongodb.netと接続先のエンドポイントが返ってきたらひとまず接続成功です！

Modelの作成

接続がうまくいったところで、次は実際に投入するデータの形を決めていきます。
今回はテックブログの投稿記事をデータとして格納したいので下記のような形としました。
なお、記事のIDはmongoDBが自動生成してくれる_idフィールドを利用します。

タイトル 文字列必須項目
記事本文 文字列必須項目
サムネイル画像 文字列（パス）必須項目
いいね数 数値必須項目デフォルト値:0
公開非公開のフラグ 真偽値必須項目デフォルト値:false
作成日 日時必須項目デフォルト値:登録日時
更新日 日時

次にModelファイルにスキーマを記載します。mongoDBではスキーマの登録という形で実際のデータ形式を決めていきます。

src/models/postModel.ts

import mongoose from 'mongoose';

const PostSchema = new mongoose.Schema(
  {
    title: {
      type: String,
      required: true,
    },
    body: {
      type: String,
      required: true,
    },
    image: {
      type: String,
      required: true,
    },
    like: {
      type: Number,
      required: true,
      default: 0,
    },
    publish: {
      type: Boolean,
      required: true,
      default: false,
    },
    createdAt: {
      type: Date,
      required: true,
      default: Date.now,
    },
    updatedAt: {
      type: Date,
    },
  },
// timestampsオプションをtrueにすることでmongoDBが自動的にupdatedAtフィールドを生成、更新してくれます。
// 今回はフロントエンドのロジックの都合上上記で手動で用意しています。
// {
//   timestamps: true,
// },
);

const Post = mongoose.model('Post', PostSchema);

export default Post;

次にダミーデータを用意します。（とくにTypeScriptである意味はありません。。。）

src/post.ts

export const posts = [
  {
    createdAt: 1621139532415,
    title: 'Reactを使ったテックブログを作成してみた',
    body: 'ダミーデータ',
    image: '/assets/images/dummy01.jpg',
    like: 2,
    publish: true,
  },
  {
    createdAt: 1621139552415,
    title: 'Reactを使ったテックブログを作成してみた2',
    body: 'ダミーデータ2',
    image: '/assets/images/dummy01.jpg',
    like: 102,
    publish: false,
  },
];

登録用のseed.tsファイルを作成します。

src/seed.ts

import dotenv from 'dotenv';
import { posts } from './data/post';
import Post from './models/postModel';
import connectDB from './config/db';

dotenv.config();

// DBに接続
connectDB();

// データのインポート
const importData = async () => {
  try {
    // 一旦中身を全削除
    await Post.deleteMany();

    // postsの中身を全件登録
    const createPosts = await Post.insertMany(posts);

    console.log(`Data Imported!`);
    process.exit();
  } catch (error) {
    console.error(`Error: ${error}`);
    process.exit(1);
  }
};

// 登録データの破棄
const destroyData = async () => {
  try {
    await Post.deleteMany();

    console.log(`Data Destroyed!`);
    process.exit();
  } catch (error) {
    console.error(`Error: ${error}`);
    process.exit(1);
  }
};

// コマンドラインでパラメータ -d を渡すと削除モードにする
if (process.argv[2] === '-d') {
  destroyData();
} else {
  importData();
}

これで登録の準備ができました！
登録スクリプトもTypeScriptとなっているので一旦JavaScriptファイルへビルドしてからインポートを実行します。

$ yarn build
$ yarn data:import
yarn run v1.22.10
$ node dist/seed
MongoDB Connected cluster0-shard-00-01.****.mongodb.net
Data Imported!
✨  Done in 2.55s.

Data Imported!と返ってきたら処理成功です！
念の為mongoDB Atlasの管理画面からCollectionsの中にデータが入っていることを確認します。

さいごに

これでmongoDBへの接続とダミーデータの登録まで完了しました！
次回はデータのCRUD操作を行う部分を作成してみます。

なお、完成版？のソースはこちらになります。

次回

GitHubで編集を提案

はじめに

mongoDBとの接続部分の構築

Modelの作成

さいごに

Discussion