【React.js Node.js Express MongoDBでwebアプリ】①Node.jsAppの作成

【React.js Node.js Express MongoDBでwebアプリ】①Node.jsAppの作成

こんにちは、Mako(@makokamiya)です。

今回は、こちらのチュートリアルを参考に、React.js + Node.js + Express + MongoDB(MERN stack)の構成でwebアプリを作ろうと思うので、調べた内容を記録していきます!

このチュートリアルは、フロントエンドとバックエンドで分離して開発ができるような構成になっています。
英語で書かれているので、1つ1つ調べて理解しながらまとめていきたいと思います。

まずは、バックエンドをNode.js, Express & MongoDb: Build a CRUD Rest Api exampleに沿って進めます。

Node.js Appの作成

任意の名前でフォルダーを作って、そのディレクトリに移動します。

$ mkdir sample-app // 任意のアプリの名前
$ cd sample-app // ディレクトリを移動

Node.jsアプリの用のpackage.jsonを作成します。

$ npm init
// 対話形式で設定していく

express, mongoose, cors モジュールをインストールします。

$ npm install express mongoose cors

{
  "name": "任意のアプリの名前",
  "version": "1.0.0",
  "description": "Node.js Restful CRUD API with Node.js, Express and MongoDB",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/アカウント名/レポジトリ名-app.git"
  },
  "keywords": [
    "nodejs",
    "express",
    "mongodb",
    "rest",
    "api"
  ],
  "author": "入力した名前",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/アカウント名/レポジトリ名/issues"
  },
  "homepage": "https://github.com/アカウント名/レポジトリ名#readme",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "mongoose": "^5.10.8"
  }
}

用語の理解

Node.jsとは

Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。

https://nodejs.org/ja/about/

npmとは

npm(Node Package Manager)は、名前の通り、Node.js パッケージ管理してくれるものです。

コマンドの理解

npm init

$ npm init

npm init はNode.jsアプリケーションのためのpackage.jsonを作成するコマンドです。

このコマンドはアプリケーションの名前とバージョン、初期エントリポイントファイルの名前 (デフォルトでは index.js) など、さまざまなことを要求します。

https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment

npm install

$ npm install パッケージの名前 --オプション

npm install はpackageをインストールするコマンドです。


チュートリアルではオプションで --save がつけられています。


--save のオプションは、パッケージが dependencies に記述され、次回 npm install したときに dependencies に書かれたパッケージを node_modules 内にインストールしてくれるオプションです。

npm 5.0.0からは --save オプションをつけなくてもデフォルトで dependencies に記述されるようです。

npm install saves any specified packages into dependencies by default.

https://docs.npmjs.com/cli-commands/install.html

参考:npm install時に「–save」オプションはいらない
  :【いまさらですが】package.jsonのdependenciesとdevDependencies

各パッケージについて

各パッケージはnpmjs.comで検索できます。

express

Node.js用のフレームワーク

mongoose

MongoDB用のODM

cors

ウェブアプリケーションは、自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) にあるリソースをリクエストするとき、オリジン間 HTTP リクエストを実行します。

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

チュートリアルではbody-parserもインストールしています。

body-parser はフォームからのPOSTデータを受け取るためのものですが、この機能はexpressに標準搭載されたようですので、今回は省きました。

参考:Body-ParserがExpressにexpress.json()として標準搭載されている話

まとめ

今回はNode.jsアプリを新規から作ってみました!
一つ一つの用語を調べながらまとめることで、理解が深まったと思います!

次回はいよいよExpressを使ってお決まりの Hello,World! を表示させます^^

参考チュートリアル

フルスタック:React.js + Node.js + Express + MongoDB example: MERN stack CRUD App
– フロントエンド:React Hooks CRUD example with Axios and Web API
– バックエンド:Node.js, Express & MongoDb: Build a CRUD Rest Api example