Node.js MongoDBの簡易Webアプリケーション連携フローまで　[その1]

全体像

• クライアント
  • html/css/JavaScript
• サーバー
  • node.js
• データベース
  • MongoDB

各種インストール

npm init -y

npm i express

expressは、Node.jsでWebアプリケーションを構築するためのフレームワークです。

npm i mongose

mongoseは、MongoDBのドキュメント型データベースとNode.jsアプリケーションを簡単に接続し、データモデルの作成やクエリの実行を行うことができます。

npm i nodemon

nodemonは、ファイルの変更を検知して自動的に再起動するツール

npm i axios

Axiosは、ブラウザやNode.jsで動作するPromiseベースのHTTPクライアントライブラリです。Axiosを使用することで、WebページやアプリケーションからHTTPリクエストを簡単に送信できます。

クライアント⇄サーバー間のファイル準備

作成するもの以下2つ。

• /server.js
• /public/js/script.js

一つ目：/server.js

ルート直下に、server.js　作成

const express = require("express");
const app = express();
const port = 3003;

// publicディレクトリを静的ファイルのルートとして設定
app.use(express.static('public'));

// ポート番号を指定してアプリケーションを起動
app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

二つ目：/public/js/script.js

import axios from "axios";

データスキーマ

スキーマとは、どのようなデータを格納するのかの定義のことです。

MongoDBの場合、コレクションに格納されるドキュメントの構造を定義するためのルールの集合です。

>> https://mongoosejs.com/docs/guide.html

/models/Threads.js　ルート直下に作成

• title
• content
• image

#/models/Threads.jsに作成

import mongoose from "mongoose";

const ThreadsSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,
    maxlength: 20,
  },
  content: {
    type: String,
    required: true,
  },
  uploadTime: {
    type: Date,
    default: Date.now,
  },
});

// ThreadsSchemaを、Threadsで他のファイルで使えるように
module.exports = mongoose.model("Threads", ThreadsSchema);

まとめ

• クライアント
• axiosライブラリ読み込んだ
• MongoDBにおけるデータスキーマの作成

>> その2に続く