Nodejs + Express + MongoDBの組み合わせでWebサービスを作る

npmを使ってプロジェクトを開始する

Mac OS環境でNodejs + Express + MongoDBの組み合わせでWebサービスを開発することの基本をまとめておきます。
npm はnodeのパッケージを管理するツールです。
nodeプロジェクトを始める際はnpmを使って初期設定を行います。

npm init

いろいろな質問がありますが、とりあえず今はデフォルトで構いません（リターンキーを押し続けましょう）。
npm initが終わると、package.jsonが作成されます。
このpackage.jsonがこのプロジェクトの設定ファイルです。

npm install --save express

package.jsonにexpressが追加される。
app.jsを作って

const express = require('express');

const app = express();

const port = 5000;

app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

node app.js

とすると、サーバーが立ち上がってlocalhost:5000とブラウザーに打ち込めば、app.jsで動いているwebアプリにアクセスできます。

nodemonは開発中にコードに変更があれば、サーバーを自動再起動させる。

いちいちサーバーを再起動する必要がなくなります。開発には必須です。

npm でnodemonをグローバル環境にインストールする。

npm install -g nodemon
npm root -g

グローバル指定すると、/usr/local/lib/node_modulesにインストールされます。

handlebarsというview engine(テープレートエンジン)を使う。

要はHTMLにjavascriptを埋め込むためのテープレートエンジンですね。

npm install --save express-handlebars

Express

expressは必要最低限の機能を備えたWebフレームワークです。

route（ルートについて）

ルートとはどこにアクセスしたらどのようなレスポンスを返すかということを決めることです。

ブラウザーにアドレスを入れる

↓

そのアドレスにアクセスする

↓

決められたレスポンスが返ってくる

Webアプリの基本はこれなので、その設定をexpressで主に行います。

routeで/user/:idのような指定をすると、req.params.idでその値を取ることができる。

例えば、既存の記事を編集するような場合、route設定は/ideas/edit/:idのような指定の仕方をします。:idは記事ごとのidです。そのように指定するとIdeaというデータベースで記事idで検索(findOne)を行い、見つけたidea(データベース内の記事データ)をideas/editというパスに表示します。

app.get('/ideas/edit/:id', (req, res) => {
  Idea.findOne({
    _id: req.params.id
  })
  .then(idea => {
    res.render('ideas/edit', {
      idea:idea
    });
  });
});

expressは色々とミドルウェアを入れられて便利

expressは最小限の機能のwebフレームワークです。
その代わり、他のパッケージからミドルウェア関数をどんどん追加して使います。
そのおかげで、多機能を実現することができます。
app.use(）でミドルウェアを読み込みます。

methodOverride

methodOverrideはどのように使うのか？
HTTPリクエストのPUTやDELETEを扱いたい時に使います。

mongoose

mongooseを使ったMongoDBとの接続方法

// Connect to mongoose
mongoose.connect('mongodb://localhost/vidjot-dev', {
  useMongoClient: true
})
  .then(() => console.log('MongoDB Connected...'))
  .catch(err => console.log(err));

vidjot-devというところがデータベース名です。MongoDB + mongooseの場合、こうやって接続したら勝手にデータベースが作成されます。

接続できたら、'MongoDB Connected...'と表示されるようにしています。

エラーをキャッチしたら、エラーが出力されます。

// Load Idea Model
require('./models/Idea');
const Idea = mongoose.model('ideas');

Ideaに代入されるのはideasというモデルです。
でそのモデルはどのように設定されているかというと次のプログラムです。
./models/Idea.jsというファイルを作成します。

//Idea.js
const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// Create Schema
const IdeaSchema = new Schema({
  title:{
    type: String,
    required: true
  },
  details:{
    type: String,
    required: true
  },
  date: {
    type: Date,
    default: Date.now
  }
});

mongoose.model('ideas', IdeaSchema);

body-parser

Requests and responses share a common structure in HTTP
引用：https://developer.mozilla.org/ja/docs/Web/HTTP/Messages

リクエストやレスポンスの構造は上の図のようになっていて、HTTP headersとbodyからなります。
body-parserは文字通りbodyの部分をparse（構文解析する）して（いい感じに読み取ってくれる）、req.bodyというプロパティに入れてくれます。

const bodyParser = require('body-parser')
// Body parser middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

のようにbody-parserを読み込んでapp.useで使用します。

例えばContent-Type: application/jsonのようなPOSTリクエストで{ username: "山田", password: "mypassword"}というjsonが送信されると、

app.use(bodyParser.json());

というミドルウェアの部分を通過した段階でbodyの部分にあった{ username: "山田", password: "mypassword"}は、req.body.username と req.body.passwordでアクセスできるようにbody-parserが変換してくれます。

コメント

スポンサーリンク