Help us understand the problem. What is going on with this article?

【Node.js】Expressの導入とRESTサーバへの最初の一歩【定番フレームワーク】

More than 3 years have passed since last update.

Node.jsでRESTサーバを作ろうとする場合の最初の一歩を踏み出すための情報をまとめました。

ちなみに、Mac OSX での開発環境の作成はこちらを参考にしてください。
【macOS Sierra】Mac OSX 10.12 macOS Sierra にNode.js 開発環境の構築 【初心者必見】

環境整備

Node.jsをインストールした後、RESTサーバを構築するための環境整備をします。その際に「npm」を使用して必要なパッケージをインストールしたり、設定を行ったりします。

npmとは?

npmはnode.jsのパッケージを管理するためのツールです。
Rubyで例えるとGemのようなものだと想像すると分かりやすいかと思います。

Expressのインストール

Expressはコマンドとしても使用するのでグローバルインストールします。

$ npm install -g express-generator

確認

expressコマンドが起動することを確認しましょう。

$ express --version
4.13.4

尚、Express3の時代によく使われていた「express-resource」と言うパッケージは、Expressを更に容易に使えるようにするものでしたが、Express4ではうまく動かないので、使用しません。

プロジェクトの作成

プロジェクト初期化

Node.jsのプロジェクトを初期化しましょう。任意のディレクトリを作成して、以下のコマンドで初期化されたプロジェクトを作成します。

$ mkdir api_sample
$ cd api_sample
$ npm init

上記コマンドを実行すると対話式にプロジェクトの設定を行っていきます。ここで決めれない場合、全てエンターを押していけば(後でも変更できるので)、問題ありません。

Expressの導入

加えてExpressをプロジェクトで使用する宣言を行います。

$ express
destination is not empty, continue? [y/N] y

   create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/users.js
   create : ./views
   create : ./views/index.jade
   create : ./views/layout.jade
   create : ./views/error.jade
   create : ./bin
   create : ./bin/www

   install dependencies:
     $ cd . && npm install

   run the app:
     $ DEBUG=api_sample:* npm start

この段階でpackage.jsonに依存パッケージを含めて下記のように設定されます。

{
  "name": "api_sample",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.15.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "express": "~4.13.4",
    "jade": "~1.11.0",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.0"
  }
}

パッケージのインストール

上記でプロジェクトの初期設定が行われたので、設定に基づいたパッケージのインストールを行います。(ちょっと時間がかかります)

$ npm install
npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated transformers@2.1.0: Deprecated, use jstransformer
api_sample@0.0.0 /Users/daisuke/Dev/Node/api_sample
├─┬ body-parser@1.15.2 
│ ├── bytes@2.4.0 

 :

│ └── on-headers@1.0.1 
└── serve-favicon@2.3.0 

Node.jsの起動

最低限のプロジェクトが作成できたので、ちょっと動かしてみましょう。

$ npm start

> api_sample@0.0.0 start /Users/daisuke/Dev/Node/api_sample
> node ./bin/www

ここで、以下にアクセスするとExpressのWelcomeメッセージ画面が表示されます。
http://localhost:3000/

Expressの使い方

ルーティングとは

ルーティング とは、アプリケーションのエンドポイント(URI)と、クライアント要求に対するそれらの応答の定義のことです。

変更例

すでにサンプル的なルーテイングとコントローラが用意されていますので、ちょっと変更してRESTの動作をさせてみます。

app.js

エンドポイントと「ルータモジュール」をロードして、双方を結びつけます。

app.use('/api/v1/users', users);

users.js

サンプルで提供されていたルータモジュール「users.js」を以下のようにRESTに対応した記述に変更します。

var express = require('express');
var router = express.Router();

// ユーザのサンプルデータ
var userList = [
  {
    id: "1",
    name: "Daisuke",
  },{
    id: "2",
    name: "Mitsuru",
  }
]

// GET
router.get('/', function(req, res, next) {
  res.json(userList);
});

// POST
router.post('/', function (req, res) {
  res.json('POST '  + req.body.id + ' OK');
});

// PUT
router.put('/:id', function (req, res) {
  res.json('PUT '  + req.params.id + ' Change ' + req.body.name);
});

// DELETE
router.delete('/:id', function (req, res) {
  res.json('DELETE '  + req.params.id + ' OK');
});

module.exports = router;

それぞれの記述方法と動作

GET, POST, PUT, DELETE のそれぞれの場合で、どのように記述するのか、パラメータはどうやって受け取るのかを確認して行ってください。

GET

ソースコード(users.js)

// ユーザのサンプルデータ
var userList = [
  {
    id: "1",
    name: "Daisuke",
  },{
    id: "2",
    name: "Mitsuru",
  }
]

// GET
router.get('/', function(req, res, next) {
  res.json(userList);
});

動作

$ curl http://localhost:3000/api/v1/users
[
  {
    "id": "1",
    "name": "Daisuke Akimoto"
  },
  {
    "id": "2",
    "name": "Mitsuru Motomiya"
  }
]

POST

ソースコード(users.js)

// POST
router.post('/', function (req, res) {
  res.json('POST '  + req.body.id + ' OK');
});

動作

$ curl http://localhost:3000/api/v1/users -X POST -d 'name=Megumi'
"POST Megumi OK"

PUT

ソースコード(users.js)

// PUT
router.put('/:id', function (req, res) {
  res.json('PUT '  + req.params.id + ' Change ' + req.body.name);
});

動作

$ curl http://localhost:3000/api/v1/users/2 -X PUT -d 'name=Megumi' 
"PUT 2 Change Megumi"

DELETE

ソースコード(users.js)

// DELETE
router.delete('/:id', function (req, res) {
  res.json('DELETE '  + req.params.id + ' OK');
});

動作

$ curl http://localhost:3000/api/v1/users -X POST -d 'name=Megumi'
"DELETE 3 OK"

上記でとてもシンプルなRESTサーバの基本部分ができました。後はこれを拡張して様々な目的のRESTサーバを作っていけると思います。


筆者参考

札幌圏でリモート開発、在宅勤務を中心としたシステム開発の会社を経営しています。

ローラハウス

keneo
リモート開発、在宅勤務を特色とするシステム開発会社ローラハウスの代表をしています。またランニングが趣味で「走るプログラマー」というキャッチフレーズで活動しています。Web系システム、スマートフォンアプリの開発のご用命はお気軽に!
http://laurahouse.net
laurahouse
北海道を拠点にしてリモートワークでのスマートフォンアプリの開発を得意とするエンジニアによる技術者集団です。スマートフォンアプリの開発のご用命はお気軽に!
http://laurahouse.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした